Documentation
Everything you need to build with Stax, grouped by topic. New here? Start with the tutorial, then dip into the reference sections as questions come up.
Guide
Migration
- Coming from ReactA guide for React developers learning Stax — key differences, concept mapping, and side-by-side examples.
- Coming from SvelteA guide for Svelte developers learning Stax — key differences, concept mapping, and side-by-side examples.
- Coming from VueA guide for Vue developers learning Stax — key differences, concept mapping, and side-by-side examples.
Todo App
- Build a Todo App with StaxLearn Stax fundamentals by building a complete todo application from scratch
- Getting StartedSet up a new Stax project and understand the project structure
- Your First ElementLearn how to create and compose elements with the $ factory
- Making It InteractiveAdd reactivity to your app with Signals
- Building the Todo ListRender lists reactively with each and create reusable components
- Toggling and UpdatingHandle user interactions to toggle todo completion status
- Adding New TodosHandle form input to add new todos to the list
- Derived StateCompute values from signals with Readable.map and Readable.zipWith
- Conditional RenderingShow and hide elements with when and add a 'Clear Completed' button
- Deleting TodosAdd delete buttons to remove individual todos
- PersistenceSave todos to localStorage using a proper Effect-based persistence layer
Dom
- Elements & AttributesCreate HTML and SVG elements, set attributes, bind reactive values, and handle events.
- ComponentsDefine components as plain functions or Effect generators, with context providers and children.
- BoundariesHandle async loading states and errors with suspense and error boundaries.
- Element ManipulationImperative DOM operations via the Element namespace — attributes, classes, styles, focus, and more.
- AnimationCSS-based enter/exit animations for control flow transitions, with stagger functions for lists.
- Virtual ListsRender large lists efficiently by only mounting visible items with virtualEach.
- UtilitiesPortal, FocusTrap, ScrollLock, UniqueId, and other DOM utilities.
- ScreenReactive viewport dimensions, media queries, and display metrics.
Reactivity
- Signals & ReadablesThe foundation of Stax's reactivity system — mutable Signals and composable Readables.
- Async StateManage loading, error, and success states for async operations with AsyncReadable, Mutation, and AsyncCache.
- Reactive CollectionsIn-place mutable arrays, maps, sets, and structs that automatically trigger reactive updates.
- State MachinesDeclarative state machines with type-safe transitions and reactive guards using Transition.
- Control FlowReactive conditionals, pattern matching, and list rendering with when, match, each, and more.
Router
- Defining RoutesCreate routes with typed params, search params, loaders, guards, animations, and error handling.
- Building a RouterCompose routes into a router with fallbacks, layouts, guards, prefixes, and error handling.
- NavigationNavigate programmatically and read route state with the Navigation service.
Platform
- Platform OverviewHow @stax-ui/platform integrates with @effect/platform instead of reinventing the wheel.
- Server-Side RenderingConvert an Stax Router into an Effect HttpRouter with SSR, data loading, and mutation handling.
- Static Site GenerationPre-render pages at build time with Route.static and Platform.buildStaticSite.
- Vite PluginDev server SSR, server-code stripping, and SSG build integration with @stax-ui/vite-plugin.
- DebuggingStrategies for debugging Stax apps, including structured framework logs and Readable debug wrappers.