Examples
Every example below is a real route of one of the demo applications. Each opens in StackBlitz on the relevant file, already navigated to the page.
The demo groups them the way you would meet them: components first, then the primitives on their own, then the same features behind services, then routing and the rest.
Just want to poke at something?
The Playground is a shareable sandbox with a small todo flow — the fastest way to try an idea.
Components
Functional, selectorless components rendered from typed hyperscript.
| Example | What it shows |
|---|---|
| Functional Components | craftComponent, inputs and outputs as factory parameters, hyperscript templates |
| Reactive Composition | Composing components and directives with .pipe(...) |
| Content Projection | Free DOM content, typed DOM contracts, and logical projection by contract |
| Pending Block | Type-safe async suspension with settledValue, settled(...) and pendingNode |
| Pending Block — Exception | Coordinating pending, reloading and business-exception fallbacks with pendingNode and catchNode |
Primitives
Using state, query, mutation, queryParams and asyncProcess directly, with no service layer.
| Example | What it shows |
|---|---|
| Query | query() with reactive params, status and caching |
| Mutation | mutation() with manual control of modification operations |
| List with Pagination | Pagination with hand-managed query params and page state |
| Granular Mutation | Optimistic updates and cache invalidation, done by hand |
| Full Demo | Everything at once, without store or service abstractions |
| Login Form | insertForm, validators, and a typed submit wired to a mutation |
| Pixel Art | state + insertSelect over a flat array |
| Pixel Art Matrix | Nested insertSelect and internal source$ between rows and cells |
| Exceptions | Business exceptions on query(), rendered per code with matchNode.exhaustive |
| Exception QueryParams | queryParams decode failures through hasException() and exceptions().parse |
State machines
State machines for explicit transitions, history and collection-oriented UI.
| Example | What it shows |
|---|---|
| Profile editor | craftStateMachine, typed transitions and persisted history |
| Text editor | A compact state machine for editing, validation and transitions |
| Task board | A state machine per list item with history and reactive collection updates |
Services
The same features, packaged behind craftService.
| Example | What it shows |
|---|---|
| Craft Query | A reusable query service with configured storage persistence (localStorage by default) |
| Craft Mutation | Create / update / delete with reactive cache synchronisation |
| Craft List Pagination | queryParams + insertPaginationPlaceholderData in a service |
| Craft Granular Mutation | insertReactOnMutation updating cached data without a reload |
| Craft Full Demo | Queries, mutations, async work, URL state and persistence together |
| craftService Counter | The smallest possible service — scopes and composition |
| craftService User Detail | Service inputs, and exposing only part of a dependency |
| craftRegisterFor | A parent driving live children through a typed registry |
Effect
Concrete EffectTS integration examples, using the dedicated Effect demo.
| Example | What it shows |
|---|---|
| Profile Lookup | queryEffect, typed business errors, and pending / exception rendering |
| Access Check | An Effect service provided by the application Layer |
| Team Overview | Combining application-wide and route-scoped Effect Layers |
| Effect Playground | A shareable todo sandbox with queryEffect, mutationEffect, and a route-provided Effect service |
| Translate in an Effect | provideI18nRuntime as a route Layer, translateEffect inside a plain Effect program, and the locale as Craft state driving the query params |
Design system
The typed style system, at all three of its levels. Both routes read from the same sheets under src/app/examples/design-system/, which has a README walking through the same progression in code.
| Example | What it shows |
|---|---|
| Mini Design System | definePalette, defineStateAxis, cssVars and the theme: one dark-mode rule for the whole system, and variants as data-* attributes rather than class strings |
| Scroll context | Level 3: requires(scrollPort.block) travelling up the tree, provides(...) on the layout that owns the area, and the scrollState axis |
Start from Activating the style system — the sheets emit nothing without the Vite plugin.
Internationalisation
| Example | What it shows |
|---|---|
| Type-safe i18n | defineCatalog + msg + plural, a second locale through defineLocaleLike, every shipped semantic token, a custom defineToken that resolves a service and parses its parameter with a schema, and runtime.bind switching the whole page reactively |
The guide is Type-safe i18n.
Routing
| Example | What it shows |
|---|---|
| Query Params in the route | queryParams declared on the route rather than in a component |
| Guard Demo | Guards as bare generators, and handleExceptions per code |
| Slow Page | Non-blocking navigation: the stay → blank → loader phases, and a craftGen resolver recovered locally with catchTag |
| View Transitions | Outlet-driven view transitions surviving the guard/resolve chain, with a per-route skeleton |
| Lazy Layout | A lazy child collection with its own DI check and a route-provided service |
Tooling
| Example | What it shows |
|---|---|
| Playground | A shareable sandbox: a small todo flow with craftService, query() and mutation() |
| Send Context to AI | Exporting the live dependency graph and app context to an assistant |
Notes
Each example ships its own api.service.ts simulating the network, so every route works standalone.
Source repository: craft-ts-demo.
Effect demo source repository: craft-demo-effect.