1
Install via npm
bash
Quick Start~5 min read
Getting Started
Install Nuclo, wire up TypeScript, and build your first imperative UI with explicit update() calls.
01
Installation
Get up and running with Nuclo in three steps.
2
Enable TypeScript types
Add Nuclo's built-in types for all 140+ tag builders:
tsconfig.json
✓
Or use a per-file reference: /// <reference types="nuclo/types" />
3
Import and use
One import registers all global builders — no destructuring needed:
typescript
i
Deno? Import directly: import 'npm:nuclo' or pin it via deno.json imports.
02
Your First App
A counter that demonstrates state, events, and explicit update().
Mutate plain JavaScript variables, then call update() once to sync all dynamic bindings:
counter.ts
How it works
import 'nuclo' registers all 140+ global tag builders — no destructuring, no tree-shaking concerns.
State is just plain JS variables — no hooks, proxies, or stores needed.
() => value zero-arg functions become dynamic bindings, re-evaluated on every update().
on(event, handler) attaches DOM listeners and returns a modifier any tag builder accepts.
render(element, container) mounts once — all subsequent updates run through update().
03
Understanding update()
The heartbeat of every Nuclo app. Mutate state freely, call it once, and every dynamic binding re-runs.
Batching multiple mutations
typescript
Why explicit updates?
Performance
Batch many mutations into one DOM pass.
Control
You decide exactly when the UI updates.
Debuggable
Set a breakpoint on update() to trace every change.
Predictable
No hidden re-renders, watchers, or dependency tracking.
04
Dynamic Functions
Any zero-arg function passed as a child or attribute becomes a live binding that re-evaluates on update().
Text content
typescript
The arrow function re-runs when you call update().
Attributes
typescript
Any attribute value can be a function.
Style properties
typescript
Individual style properties bind independently.
05
Event Handling
The on() helper returns a modifier accepted by any tag builder, keeping your event logic co-located with the element.
Attach a single listener:
typescript
Stack multiple listeners on one element:
typescript
✓
You can also pass standard addEventListener options as a third argument: on('click', handler, { once: true }).
06
What's Next?
You've got the essentials — explore what makes Nuclo powerful on larger projects.