Examples

The fastest way to learn Flexium is to read working code. Nine examples cover everything from a single signal to production deploy. Each one is a complete, runnable snippet.

Read them in order if you're new — each builds on the previous. Jump around if you're looking for a specific pattern.

Path

1. Counter — use() basics. One signal, one button.
2. Todo list — Arrays, keyed reconciliation, batched updates.
3. Data fetching — Async resources, Suspense, ErrorBoundary.
4. Form validation — Derived state with use(() => ...).
5. Routing — Routes, Route, Link, useRouter.
6. Fast signals — createSignal escape hatch + compile-time substitution. 13ns per call.
7. Shared state — use(value, { key }) — global signals without Providers.
8. Canvas — Declarative canvas primitives via flexium-canvas.
9. Production deploy — vite-plugin-flexium with optimize: 'auto'.

By topic

Reactivity → Counter, Form, Fast signals, Shared state

Async / data → Data fetching

App structure → Routing, Production deploy

Canvas / interactive → Canvas

What's missing on purpose

These examples don't cover every API. For the full surface, the TypeScript declarations are the authoritative reference — IDE autocomplete + JSDoc on every export will teach you faster than prose.

Migration cheat sheet

Coming from React?

React	Flexium
useState(0)	use(0) (value form)
useMemo(() => x, [deps])	use(() => x) (auto-tracked)
useEffect(fn, [deps])	inside a component: unsafeEffect(fn) (auto-cleaned)
<Suspense fallback={...}>	<Suspense fallback={...}> (same name, same shape)
useContext(Ctx)	Ctx.value from use(Ctx)
useRouter() from next	useRouter() from flexium/router

Coming from Solid?

Solid	Flexium
createSignal(0)	createSignal(0) (same name, same shape)
createMemo(() => x)	createComputed(() => x)
createEffect(fn)	createEffect(fn) or unsafeEffect(fn)
<For each={...}>	array.map(item => ...) with key={...}
<Show when={...}>	{condition && <X />}