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>
`);

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 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
• Islands architecture with SSR
• Learning how fine-grained reactivity works at the DOM level

Don't use it for:

• Large team apps that need a mature ecosystem (router, devtools, testing library, component library)
• Content-heavy sites that need SSG, image optimization, and routing (use Astro or Next.js)
• Apps that require extensive community support — CellUI is small and new

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. View source to see the hydration markers.