Examples

Practical examples. Live demos.

Explore Nuclo patterns with interactive previews and the source code beside each behavior.

● Live
01
Counter
Minimal counter demo: mutate state, call update(), and let dynamic text refresh.
0
COUNT
Counter.ts
● Live
02
Search Filter
Live search that filters a list of users as you type. Zero libraries, just state and update().
SearchFilter.ts
● Live
03
Loading States
Async data fetching with idle / loading / success / error states. No special async API needed.
Ready to fetch
LoadingStates.ts
● Live
04
Atomic Styling
createCss() with theme tokens and screens. cx() composes styles with last-wins conflict resolution.

Click tags to toggle them. Active tags use the primary color token — cx() resolves conflicts per property.

Nothing selected yet.

AtomicStyling.ts
● Live
05
Todo List
Add, complete, and delete tasks. Filter by all / active / done. Classic todo with Nuclo state.
No tasks yet.
0 of 0 remaining
TodoList.ts