Examples

Every example below is a real route of the demo application. 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

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 matchBlock.exhaustive
Exception QueryParams	queryParams decode failures through hasException() and exceptions().parse

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

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: ng-craft-demo.