effective-ui

Composable, effect-based UI framework built on Effect.ts

Experimental — work in progress. The API is unstable and subject to change.

Features

• Everything is an Effect
• Declarative DOM via tag, text, children
• Tree-shakable for smaller builds
• Composable routing with dynamic path + query support
• Async data fetching with loading/error fallback
• Predictable UI pipes
• Pure, memoizable components (no diffing or VDOM)

Installation

pnpm install @vasilvelikov/effective-ui
Copy

Quick Start

import { dom, runtime } from "@vasilvelikov/effective-ui";

const App = dom.tag(
  "div",
  dom.children(
    dom.tag("h1", dom.children(dom.text("Hello from effective-ui"))),
  ),
);

Effect.runPromise(runtime.mount(App, "#root"));
Copy

For more information check out the docs

Examples

This repo includes examples that you can run locally.

pnpm install
pnpm run example counter
Copy

Then open http://localhost:5173 in your browser.

Project Structure

src/           → the core UI framework
examples/      → runnable examples
Copy

TODO (Open to Contributions)

• Predefined components - planned
• Theming - planned
• SSR/streaming support - maybe

Want to contribute? See the Contributing Guide.

See CHANGELOG.md for release history.