Skip to main content
@craft-ts
LearnLearn with EffectAI agentsGuideReference
@craft-ts/core@craft-ts/component@craft-ts/dev-tools@craft-ts/effect@craft-ts/style@craft-ts/style-testing@craft-ts/i18n@craft-ts/i18n-effect@craft-ts/mcp
ExamplesMigrationEffect compatibility & maturityAdopting CraftTS progressivelyPress kitRoadmapBacklog
Beta
  • Learn
  • Learn with Effect
  • AI agents
  • Guide
  • Reference
  • Packages
  • Resources

i.Learn

  • Overview
  • 1. Your first state
  • 2. Derive instead of duplicate
  • 3. Move logic out of the component
  • 4. Compose services
  • 5. Load server data
  • 6. Write server data
  • 7. Put state in the URL
  • 8. Build a form
  • 9. Wire up routing
  • 10. Test what you wrote
  • Where to go next
  1. Learn
  2. Where to go next

Where to go next#

You have the whole mental model: declare with a name, yield what you do not own, derive the rest. Everything below is a variation on it.

Fill the gaps in what you built#

You haveNext thing worth adding
A query and a mutationPersistence — storage persistence as an insertion (localStorage by default)
A listCollections — entity storage, selectors, updates
A formValidation — custom and async validators
RoutesRoute guards and Route providers
A running appNon-blocking navigation — pending UI instead of a freeze

Concepts worth a dedicated read#

  • The mental model — the design principles behind the API you just used

  • Exceptions as values — declared failures, exhaustively handled

  • Insertions — writing your own and composing them

  • Typed insertion pipes — readable composition for each primitive

  • Generators — craftGen outside a service

Teach the app its boundaries#

The graph you just tested is also a map you can constrain. Architecture rules are ordinary Vitest assertions on the static Craft graph: unique identities, unique HTTP, pure craftComputed, folder lanes, exclusive feature branches — and any neighbourhood you can look up is a rule you can write. Nx still owns the workspace graph (imports, affected, cache); Craft judges the app. Craft graph vs Nx is the split.

Setup is in that guide. The demo suite already runs them:

shell
npx nx architecture demo

When your app grows#

  • Service scopes — choosing component, per-call, and app-wide lifetimes

  • Scaling routes — splitting collections before TypeScript's instantiation ceiling bites

  • Lazy services and App start

  • Observability — logging and tracing that follow the dependency graph

Reference#

Looking for one symbol? The API index lists every export with a one-line description and a link.

See it running#

Examples points at the demo application, which exercises most of the above end to end.

Importing Craft into an app that an agent will edit? Point it at coding agents — llms.txt, the @craft-ts/mcp server, and the Agent Skills.

← 10. Test what you wrote

←10. Test what you wrote

On this page

  • Fill the gaps in what you built
  • Concepts worth a dedicated read
  • Teach the app its boundaries
  • When your app grows
  • Reference
  • See it running

@craft-ts · MIT licensed

GitHubnpm

Search