Build a Todo App with Effex

In this tutorial, you’ll build a fully-functional todo application while learning the core concepts of Effex. By the end, you’ll understand:

  • How to create elements with the $ factory
  • Reactive state with Signals
  • Building reusable components
  • Handling user interactions
  • Derived state and computed values
  • Conditional rendering
  • Working with lists

What You’ll Build

A todo app with the ability to:

  • Add new todos
  • Mark todos as complete
  • Filter by status (all, active, completed)
  • Clear completed todos
  • Persist to localStorage

Prerequisites

  • Basic JavaScript/TypeScript knowledge
  • Node.js 18+ installed
  • A code editor (VS Code recommended)

A Quick Note on Effect

Effex is built on Effect, a powerful TypeScript library for building robust applications. You don’t need to understand Effect deeply to use Effex—we’ll introduce concepts gradually as they become relevant.

For now, just know that when you see yield*, think of it like await:

// async/await (familiar)
async function doSomething() {
  const result = await fetchData();
  return result;
}

// Effect.gen (same pattern)
Effect.gen(function* () {
  const result = yield* fetchData();
  return result;
});

// Effect.gen (what you'll see most in Effex)
const MyComponent = () =>
  Effect.gen(function* () {
    const count = yield* Signal.make(0);
    return yield* $.div({}, $.of("Hello!"));
  });

The yield* is like await—it “unwraps” the result. The difference is that Effect tracks errors and dependencies in the type system, giving you compile-time safety that async/await can’t provide.

For a deeper introduction, see Effect in 2 Minutes. But you don’t need to read it now—we’ll explain concepts as they come up. Let’s start building!

Chapters

  1. Getting Started - Set up your project
  2. Your First Element - Learn the $ factory
  3. Making It Interactive - Add reactive state
  4. Building the Todo List - Components and lists
  5. Toggling and Updating - Handle interactions
  6. Adding New Todos - Form handling
  7. Derived State - Computed values
  8. Conditional Rendering - Show/hide elements
  9. Deleting Todos - Removing items
  10. Persistence - Save to localStorage
Docs