Skip to content
Effect Days 2026 Get your ticket

Installation

Requirements:

  • TypeScript 5.9 or newer. TypeScript 7 is recommended for the best performance and compatibility with Effect’s TypeScript tooling.
  • Node.js, Deno, and Bun are supported.

Manual Installation

Node.js

Follow these steps to create a new Effect project for Node.js:

  1. Create a project directory and navigate into it:

    Terminal window
    mkdir hello-effect
    cd hello-effect
  2. Initialize a TypeScript project:

    npm

    Terminal window
    npm init -y
    npm install --save-dev typescript

    pnpm

    Terminal window
    pnpm init
    pnpm add --save-dev typescript

    Yarn

    Terminal window
    yarn init -y
    yarn add --dev typescript

    This creates a package.json file with an initial setup for your TypeScript project.

  3. Initialize TypeScript:

    npm

    Terminal window
    npx tsc --init

    pnpm

    Terminal window
    pnpm tsc --init

    Yarn

    Terminal window
    yarn tsc --init

    When running this command, it will generate a tsconfig.json file that contains configuration options for TypeScript. One of the most important options to consider is the strict flag.

    Make sure to open the tsconfig.json file and verify that the value of the strict option is set to true.

    {
    "compilerOptions": {
    "strict": true
    }
    }
  4. Install the necessary package as dependency:

    npm

    Terminal window
    npm install effect@rc

    pnpm

    Terminal window
    pnpm add effect@rc

    Yarn

    Terminal window
    yarn add effect@rc

    This package will provide the foundational functionality for your Effect project.

Let’s write and run a simple program to ensure that everything is set up correctly.

In your terminal, execute the following commands:

Terminal window
mkdir src
touch src/index.ts

Open the index.ts file and add the following code:

src/index.ts
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefined

Run the index.ts file. Here we are using tsx to run the index.ts file in the terminal:

Terminal window
npx tsx src/index.ts

You should see the message "Hello, World!" printed. This confirms that the program is working correctly.

Deno

Follow these steps to create a new Effect project for Deno:

  1. Create a project directory and navigate into it:

    Terminal window
    mkdir hello-effect
    cd hello-effect
  2. Initialize Deno:

    Terminal window
    deno init
  3. Install the necessary package as dependency:

    Terminal window
    deno add npm:effect@rc

    This package will provide the foundational functionality for your Effect project.

Let’s write and run a simple program to ensure that everything is set up correctly.

Open the main.ts file and replace the content with the following code:

main.ts
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefined

Run the main.ts file:

Terminal window
deno run main.ts

You should see the message "Hello, World!" printed. This confirms that the program is working correctly.

Bun

Follow these steps to create a new Effect project for Bun:

  1. Create a project directory and navigate into it:

    Terminal window
    mkdir hello-effect
    cd hello-effect
  2. Initialize Bun:

    Terminal window
    bun init

    When running this command, it will generate a tsconfig.json file that contains configuration options for TypeScript. One of the most important options to consider is the strict flag.

    Make sure to open the tsconfig.json file and verify that the value of the strict option is set to true.

    {
    "compilerOptions": {
    "strict": true
    }
    }
  3. Install the necessary package as dependency:

    Terminal window
    bun add effect@rc

    This package will provide the foundational functionality for your Effect project.

Let’s write and run a simple program to ensure that everything is set up correctly.

Open the index.ts file and replace the content with the following code:

index.ts
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefined

Run the index.ts file:

Terminal window
bun index.ts

You should see the message "Hello, World!" printed. This confirms that the program is working correctly.

Vite + React

Follow these steps to create a new Effect project for Vite + React:

  1. Scaffold your Vite project, open your terminal and run the following command:

    npm

    Terminal window
    # npm 6.x
    npm create vite@latest hello-effect --template react-ts
    # npm 7+, extra double-dash is needed
    npm create vite@latest hello-effect -- --template react-ts

    pnpm

    Terminal window
    pnpm create vite@latest hello-effect -- --template react-ts

    Yarn

    Terminal window
    yarn create vite@latest hello-effect -- --template react-ts

    Bun

    Terminal window
    bun create vite@latest hello-effect -- --template react-ts

    Deno

    Terminal window
    deno init --npm vite@latest hello-effect -- --template react-ts

    This command will create a new Vite project with React and TypeScript template.

  2. Navigate into the newly created project directory and install the required packages:

    npm

    Terminal window
    cd hello-effect
    npm install

    pnpm

    Terminal window
    cd hello-effect
    pnpm install

    Yarn

    Terminal window
    cd hello-effect
    yarn install

    Bun

    Terminal window
    cd hello-effect
    bun install

    Deno

    Terminal window
    cd hello-effect
    deno install

    Once the packages are installed, open the tsconfig.json file and ensure that the value of the strict option is set to true.

    {
    "compilerOptions": {
    "strict": true
    }
    }
  3. Install the necessary package as dependency:

    npm

    Terminal window
    npm install effect@rc

    pnpm

    Terminal window
    pnpm add effect@rc

    Yarn

    Terminal window
    yarn add effect@rc

    Bun

    Terminal window
    bun add effect@rc

    Deno

    Terminal window
    deno add npm:effect@rc

    This package will provide the foundational functionality for your Effect project.

Now, let’s write and run a simple program to ensure that everything is set up correctly.

Open the src/App.tsx file and replace its content with the following code:

src/App.tsx
import { useState, useMemo, useCallback } from "react"
import reactLogo from "./assets/react.svg"
import viteLogo from "/vite.svg"
import "./App.css"
import { Effect } from "effect"
function App() {
const [count, setCount] = useState(0)
const task = useMemo(
() => Effect.sync(() => setCount((current) => current + 1)),
[setCount]
)
const increment = useCallback(() => Effect.runSync(task), [task])
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={increment}>count is {count}</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App

After making these changes, start the development server by running the following command:

npm

Terminal window
npm run dev

pnpm

Terminal window
pnpm run dev

Yarn

Terminal window
yarn run dev

Bun

Terminal window
bun run dev

Deno

Terminal window
deno run dev

Then, press o to open the application in your browser.

When you click the button, you should see the counter increment. This confirms that the program is working correctly.