Skip to content

Unitflow

Effect-native state for UI flows that outgrow hooks.

Unitflow brings Effect’s architectural strengths to frontend code: self-contained models, typed boundaries, renderer-independent behavior, and a shape agents can follow.

Instead of scattering behavior across components, hooks, atoms, and project conventions, build UI behavior as Effect-powered models that own their state, actions, async work, dependencies, and cleanup.

Unitflow is inspired by Effector: explicit stores, events, and UI logic outside the component tree, rebuilt around Effect services, layers, scopes, and dependency injection.

Use Unitflow when frontend code needs the same architectural weight as the rest of your Effect application.

Bring Effect’s Backend Power to the Frontend

Section titled “Bring Effect’s Backend Power to the Frontend”

Dependency injection, full type safety, Scope, Stream, Schema, fibers, and the rest of the Effect ecosystem are no longer reserved for server code. Unitflow brings that power into your frontend architecture.

Each model owns one part of the UI: its state, actions, async work, dependencies, and cleanup. Models communicate through typed boundaries, so the app grows as a hierarchy of explicit units instead of a web of shared state.

Unitflow keeps behavior outside the component tree. A model can be driven by React, Vue, tests, tooling, or anything else through a renderer-independent boundary.

Effect is already a strong substrate for agents: typed services, layers, errors, and composable programs. Unitflow adds clear frontend boundaries and simple primitives, so agents can follow the architecture instead of inventing it on every change.

For React apps, install the React package with its peers:

Terminal window
pnpm add @unitflow/react @unitflow/core effect@4.0.0-beta.88 react

For non-React runtimes, install the core package:

Terminal window
pnpm add @unitflow/core effect@4.0.0-beta.88

Packages: