v0.2.3 · Zero dependencies
Mutate.Call update().Done.
update().Nuclo is a tiny imperative DOM framework. Build UIs from plain functions and mutable state — no proxies, no virtual DOM, no hidden re-renders. The DOM changes exactly when you tell it to.
$npm install nuclo
0
dependencies
175
typed HTML & SVG builders
~10KB
gzipped, entire runtime
counter.ts
live0
COUNT
update() calls: 0
How it works
One explicit cycle.
No reactivity graph, no scheduler, no surprises. A single predictable path from your data to the screen.
01 · Mutate
Change your data
State is plain JavaScript — variables, arrays, objects. Mutate it however you like, as many times as you like.
02 · Commit
Call update()
One global function commits your changes. Batch a dozen mutations and commit once — nothing renders until you say so.
03 · Patch
Nuclo syncs the DOM
Every dynamic expression re-evaluates, and only values that actually changed are written to the DOM. No diffing, no re-renders.
Philosophy
When you mutate state, nothing happens. Call update() and Nuclo does exactly what you asked—no more, no less.
01
Explicit is better than implicit
No reactive proxies tracking your every move. You mutate, you call update(). Clear causality, predictable behaviour.
02
Batch freely, update once
Make 10 mutations before calling update() once. The DOM sees only the final state—no wasted renders.
03
Functions, not components
Build with plain JavaScript functions. No lifecycle hooks, no class magic, no special syntax—just functions that return DOM nodes.
Features
Built for clarity.
No magic. No surprises. Every update is intentional.
01 — EXPLICIT
You own the update cycle
Mutate freely, then call update() once. No subscriptions, no schedulers, no diffing surprises — the DOM syncs when you decide.
02 — LIGHTWEIGHT
Zero dependencies
About 10 KB gzipped for the entire runtime. No compiler, no build plugins — add one import and start building.
03 — TYPED
TypeScript-first
175 fully-typed HTML & SVG builders, with autocomplete for every attribute, style property, and event.
04 — PRECISE
Fine-grained patching
Dynamic expressions re-evaluate on update(), and only the values that actually changed touch the DOM.
Comparison
No diffing. No proxies. No surprises.
Most frameworks decide when your UI updates. Nuclo asks you.
Virtual DOM
render → diff → commit
Re-renders component trees on every state change
Diffs old and new trees to find what changed
Needs memoization to claw performance back
Stale closures and dependency arrays
Reactive proxies
signals · stores · effects
Wraps your state in proxies and subscriptions
Tracks dependencies invisibly at runtime
Updates cascade on schedules you don't control
Magic that's hard to step through in a debugger
Nuclo
the nuclo waymutate → update()
Plain mutable state — no wrappers, no proxies
One call, update(), is the whole mental model
Patches only the values that changed
~10 KB, zero dependencies, TypeScript-first
Quick Start
Up and running in minutes.
Three steps and you're building real UIs.
01 — INSTALL
Install
Add Nuclo to your project with your favourite package manager.
terminal
02 — IMPORT
Import
A single side-effect import globally injects all 175 tag builders.
main.ts
03 — BUILD
Build
Write plain functions that return DOM nodes. Call update() when state changes.
app.ts
Examples
See it in action.
Interactive demos. Explore the code behind each one.
counter.ts
0
todo.ts
Get Started
Ready when you are.
Install Nuclo, import it once, and ship UIs that update exactly when you say. The whole API fits in an afternoon.
$npm install nuclo