CellUI

Signals that bind directly to the DOM.

CellUI is a reactive UI framework built on DocumentFragment, WeakRef, and tagged template literals. It skips virtual DOM diffing entirely — when a signal changes, exactly one text node or attribute updates. O(1).

Quick Start

bashnpm create cellui@latest my-app
cd my-app && npm install && npm run dev

Or add to an existing project:

bashnpm install @cmj/cellui

typescriptimport { signal, view, mount } from '@cmj/cellui';

const count = signal(0);

mount('#app', () => view`
  <button onclick="${() => count.value++}">
    Clicked ${count} times
  </button>
`);

Components

CellUI's component registry copies source into your app:

bashnpx cellui-ui init
npx cellui-ui list
npx cellui-ui add button input card

The generated files live in src/components/ui by default and are meant to be edited in place.

Core Concepts

Components execute once

In React, your component function re-runs on every state change. In CellUI, it runs once. Signals handle reactivity at the DOM level, not the component level.

Signals, not state

signal(0) creates a reactive container. Reading .value inside an effect() creates a dependency. Writing .value notifies subscribers. No useState, no setState, no dependency arrays.

Tagged templates, not JSX

view is a tagged template literal. It produces a real DocumentFragment. No virtual DOM, no compiler required. Your code runs as-is.

Guides

• Reactivity & Signals — signal, computed, effect, deep signals, WeakRef
• Templating — view, interpolation types, control flow, XSS safety
• Forms — bind(), validation, manual binding
• Composability — components, ambient, Substrate, patterns to avoid
• Async & Data Fetching — loading states, polling, WebSocket, TanStack Query
• Lifecycles — onDispose, cleanup patterns, kill switch
• Batching — batch(), untracked(), deduplication
• Component Authoring — copy-in components, children, reactive props, cleanup
• Component Patterns — Button, Modal, Tabs, FormField, Toast recipes
• Design Tokens — primitive/semantic/component layers, multi-brand, CSS sync
• Theming — ambient themes, scoped Substrates, dark/light toggle
• Accessibility — ARIA, focus management, keyboard nav, live regions
• Adoption — incremental adoption, React/Vue/WordPress interop, migration
• SSR & Hydration — serverView, hydrate, isomorphic components

API Reference

• Mounting & Shield — mount(), error boundaries, telemetry
• Substrates — createSubstrate, ambient, dependency injection

When to Use CellUI

Use it for:

• Interactive widgets embedded in existing pages
• Performance-critical UIs with frequent, sparse updates
• Small-to-medium SPAs where framework overhead matters
• Simple islands architecture with synchronous SSR
• Learning how fine-grained reactivity works at the DOM level

Maturity notes:

• Large team apps should standardize on the included router, testing helpers, lifecycle cleanup patterns, and Vite compiler plugin before broad rollout.
• Content-heavy sites should pair CellUI with an SSG or content framework when routing, image optimization, and static generation are primary requirements.
• Ecosystem-dependent apps should treat CellUI as a focused runtime and document any third-party integration choices in the project template.

How This Site Works

This documentation site is built with CellUI's own serverView() function. Every page is rendered by the framework itself. Client-side CellUI adds search, scroll spy, and the live demo.