Examples
Practical examples. Live demos.
Explore small Nuclo patterns with interactive previews and source code beside each behavior.
Live
01
Counter
Mutate state, call update(), and dynamic text refreshes.
0
COUNT
Counter.ts
Live
02
Todo List
Use list() for repeated items and update() after each mutation.
No tasks yet.
0 of 0 remaining
TodoList.ts
Live
03
Search Filter
Filter an array with plain JavaScript and render it with list().
AC
Alice Chen
BS
Bob Smith
CD
Charlie Davis
DP
Diana Park
SearchFilter.ts
Live
04
Styling
Use css() for classes and cx() for small conditional changes.
css() creates the base class. cx() adds the selected class only when state changes.
Styling.ts
Styling
Styling basics
A short set of styling examples: create a class, compose a class, and use a tiny theme.
Styling
01
css()
Create a class from one typed style object.
Simple card
One style object returns one reusable class.
css.ts
Styling
02
cx()
Compose classes conditionally. Later styles win.
cx() adds the selected class.
cx.ts
Styling
03
createCss()
Define a small theme and use its tokens.
Theme tokens
Resize above 520px to use the sm screen rule.
createCss.ts