Examples

Small, readable apps that build up from a single button to a complete five-package app.

Every example links to its source on GitHub, and most come with a step-by-step tutorial. Hosted live demos are on the way — for now the tutorials are the fastest way to run the code yourself.

Counter

Beginner

The classic first app — a button that increments a number. The smallest complete Zoijs app.

Concepts statetext bindingsevents
Packages @zoijs/core

Live Input

Beginner

Type in a field and watch the page update on every keystroke — a one-line reactive binding.

Concepts stateinput bindingevents
Packages @zoijs/core

Full Name

Beginner

Combine two inputs into a derived value with computed() — cached and recomputed only when its sources change.

Concepts computedderived state
Packages @zoijs/core

Todo

Intermediate

Add, toggle, and remove items in a keyed list with each() — DOM nodes are reused as the list changes.

Concepts each (keyed lists)stateevents
Packages @zoijs/core

Reorder List

Intermediate

Move items around and see how keyed each() preserves focus, input values, and scroll position while reordering.

Concepts each (keyed)reorderingDOM preservation
Packages @zoijs/core

Task Board

Advanced

A complete little app — routing, data loading, form actions, and per-page titles — using all five packages together in about 200 readable lines.

Concepts routingasync dataactionskeyed listscomputedpage head
Packages @zoijs/core@zoijs/router@zoijs/resource@zoijs/action@zoijs/head

New to Zoijs?#

Start with the Counter tutorial and work down the Tutorials list, then read the Core Concepts. When you're ready for the full picture, the Task Board ties every package together.