EFFECT NATIVE / PLATFORM FIRST

Cooperative
by design.

Typed is a TypeScript toolkit built on Effect. Compose reactive state, accessible interfaces, and libraries that work with the web.

Start building Why cooperative?

TypeScript + Effect · Open source · Adopt one piece at a time

YOUR NEXT RELEASE

A little state. A real interface.

Try the checkboxes. The count is derived from the same state.

Model the application
Connect the interface
Ship something useful

@typed/fx + @typed/template + @typed/ui

01 / STATE IS YOURS

Keep your model independent of the view. Test the behavior without mounting an interface.

02 / THE DOM IS SHARED

Compose real nodes, native events, and existing tools. Give each part a clear owner.

03 / WORK HAS A LIFETIME

Use Effect to describe errors, dependencies, and cleanup. Carry those contracts into the UI.

PICK YOUR STARTING POINT

Build with it.
Build on it.

Start with an application, or use Typed's building blocks in your own library.

FOR APPLICATION DEVELOPERS

From state to something people use.

Run a counter, then add forms, requests, navigation, and tests. Use the same model in an existing stack or a new application.

Start with a counter →

FOR LIBRARY DEVELOPERS

Make your abstractions fit together.

Compose push streams, renderer-independent state, and typed templates. Preserve error and service channels. Build a component library, renderer, or framework.

Follow the library path →

ORDINARY TYPESCRIPT. REAL COMPOSITION.

One value.
Every place it belongs.

A RefSubject is current state and a stream of changes. Derive the total, interpolate both values, and give the button an Effect. The renderer connects the updates and owns their subscriptions.

Understand the example →

import { RefSubject } from "@typed/fx";
import { component, html } from "@typed/template";
import { Button } from "@typed/ui/Button";

export const Quantity = component(function* () {
  const quantity = yield* RefSubject.make(1);
  const total = RefSubject.map(quantity, n => n * 24);

  return html`<section>
    <output>${quantity} items · $${total}</output>
    ${Button({
      content: "Add an item",
      onclick: RefSubject.increment(quantity),
    })}
  </section>`;
});