This is the guided path. You build one app, from an empty component to a routed, tested feature — adding exactly one idea per step.
If you are looking for a specific answer instead, go to the Guide (organised by task) or search.
A task list. It starts as three lines in a component and ends up with server data, optimistic updates, URL state, a validated form, a typed route and tests.
| Step | What you add |
|---|---|
| 1. Your first state | craftComponent, state |
| 2. Derive instead of duplicate | computed + methods |
| 3. Move logic out of the component | craftService |
| 4. Compose services | generators, yield* |
| 5. Load server data | query |
| 6. Write server data | mutation, optimistic updates |
| 7. Put state in the URL | queryParams |
| 8. Build a form | insertForm, validators |
| 9. Wire up routing | craftRoute, compile-time DI check |
| 10. Test what you wrote | testing by register, architecture rules |
Then: Where to go next.
::: tip Wondering what this buys you over plain Angular? What craft adds to Angular is the inventory — including what it costs. :::
You need an Angular 21 application and Node.js 20.19+ (or 22.12+). No prior knowledge of generators, RxJS or signals internals is required — each is introduced when it first earns its place.
::: tip Read in order Every step builds on the previous one’s code. Skipping ahead works, but step 4 is where the mental model clicks — don’t skip that one. :::
::: warning Experimental
@craft-ng and this documentation are both experimental. APIs can still move
between minor versions.
:::