Practical examples. Live demos.
Pick an example to open it full screen, with the live preview and its source side by side.
Basics
4The patterns every Nuclo app is made of.
Counter
Mutate state, then call update(). The dynamic text refreshes.
Todo List
Use list() for repeated items. Call update() after each mutation.
Search Filter
Filter an array with plain JavaScript. Render the result with list().
Styling
Use css() for classes. Use cx() for small conditional changes.
Components
4Plain functions with static and dynamic params, children, lists matched by identity and nested data. Every preview counts its mounts.
Static & Dynamic Params
A value param is read once, when the component is built. A function param is read on every update(). The component itself runs once either way, and the mount count proves it.
Children & Modifiers
A component forwards its children with a spread: builders, text, attribute objects and modifiers. Conditional parts go in when(), so the component around them is never rebuilt.
List Identity
list() keeps a row while its item is in the array: reorder, insert and rename without losing inputs or focus. A switch clones the objects on every update to show what breaking identity costs.
Nested Data
A team with members with tasks: one component per level, nested list() calls, derived counts as functions over the same objects. Deep changes patch only their own nodes.
API
13One small demo per building block, the same ones the docs embed.
Tag Builders
A builder takes attributes, static children and dynamic text. Rename changes the state, then calls update().
Components
A component is a plain function. Each Counter() call keeps its own count.
Attributes
Attribute values can be functions. The second button flips busy and calls update(); Save's disabled and aria-busy follow.
Events
onInput and onKeyDown are plain attributes. Type, then press Escape to clear.
Lifecycle
onMount starts an interval and returns its cleanup. Unmount runs the cleanup, so the count pauses until the timer mounts again.
Explicit Updates
count++ only changes the variable. The text catches up on the next update(), from the button or anything else on this page.
Dynamic Values
Edit the name. The static text was fixed when the element was built; the dynamic one runs again on every update(). forceUpdate() rebuilds the tree, so the static text catches up too.
update()
Every update() runs every dynamic value, even when its data did not change. Other demos on this page push the count up too.
scope()
Both buttons add an item and rename the user. update('cart') refreshes only the scoped panel.
when()
The first true condition wins; otherwise .else() renders. A new branch is built from scratch.
list()
Rows are matched by identity. Check a row, then Reverse: the same <li> moves, checkbox and all.
region() & into()
A layout with a stacked main region and a side region, filled from outside it. Type into Home, open the dialog and close it: the text stays. Article fills both regions with one into().
forceUpdate()
update() refreshes only the dynamic lang line. forceUpdate() calls App again and patches the same <h1>. The explicit form rebuilds only this tree, not the whole page.
Styling
3Create a class, compose a class, and use a tiny theme.
Forms
3Validation as plain functions over plain state, touched fields, steps and dynamic rows.
Field Validation
Rules as a function over plain state, errors shown once a field was touched, a debounced async check with a pending state, and a submit that waits for all of it.
Multi-step Wizard
Three steps as when() branches over one data object. Next touches the step's fields and advances only when they pass. Review lists everything with Edit links.
Dynamic Rows
Invoice lines in an array rendered with list(). Each row validates itself, the total counts the valid ones, and rows keep their inputs when others are added or removed.
SVG
4Charts and animations from the SVG tag builders, driven by plain data and update().
Bar Chart
Rects from an array. Their y and height are functions of the data, so update() moves the bars.
Line Chart
A path whose d is built from the points, with a gradient area and one circle per point.
Donut Chart
One circle per slice. stroke-dasharray gives each its share of the ring and stroke-dashoffset its start.
SVG Animation
SMIL as builders: animateSvg pulses the sun, animateTransformSvg orbits the planet. A dynamic dur sets the speed.
Routing
5Route tables, matching, the active route, layers and loaders. nuclo-router is a separate package: npm install nuclo nuclo-router.
A Routed App
A real app with its own router, running in the frame: a route table, one outlet(), plain links, a pending state and a 404. Click around, then use Back.
Nested Routes
Docs is a layout with child routes. A topic renders in its outlet() and ./topic links resolve against the layout's route. Type in the notes, then switch topics: the layout is never rebuilt.
Route Loaders
The post page exports a load() that runs before the page is built. Watch router.pending while it waits, and the error state with Retry when it throws on the broken post.
Layers
The order form pushes the customer page as a layer and awaits its result. The form is not re-rendered, so its notes survive. Save resolves the push, Cancel or Back dismisses it.
Pattern Matching
Static, :param and *rest patterns, and a section table mounted under two parents. Type a path and watch match(), which resolves without loading anything.