Welcome to Zidom#
Zidom is an independent, TypeScript-first UI framework built around fine-grained reactivity and direct DOM bindings. You can compose interfaces with JSX, store local state in signals, derive values with computed signals, and integrate routing, queries, forms, shared state and services when an application grows.
The idea: components set up the view; reactive dependencies drive changes afterward. A signal used directly as JSX text can update its existing text node without invoking the component function again.
Your first look#
import { signal } from '@zidomjs/core';import { mount } from '@zidomjs/dom';function Counter() { const count = signal(0); return <button onClick={() => count.value++}> Clicked {count} times </button>;}mount(() => <Counter />, document.getElementById('app')!);The count signal is passed into JSX as a signal, not as count.value. That distinction matters without the optional compiler. For derived content, write {() => count.value * 2}.
Why use direct bindings?#
- Precise updates: dependent text and attributes react when their source changes.
- Scoped lifetimes: mounted components own effects, listeners, refs and cleanup.
- Flexible applications: add optional first-party packages rather than changing reactive models.
- Explicit design: ordinary JavaScript and a small set of primitives are the baseline.
What Zidom is not claiming#
Zidom is not React with different syntax, and it does not use a full virtual DOM diff for routine signal changes. Structural updates still create, remove and reorder real DOM nodes. No audited evidence establishes that Zidom is faster or smaller than all competing frameworks. Streaming SSR, production hydration, a scaffolding CLI and independent production release approval are still pending.
Where next?#
Read Getting started to install the beta, or How Zidom works for the reactive model. You can also browse the API overview and release status.
Run the example#
See the Zidom counter example and inspect the exact source next to the result.