Mark root state
Use reactive collections and objects for the values that change. They are the small surface Starbeam tracks directly.
Reactivity that stays JavaScript.
Mark the root state that changes, then build domain-shaped functions, classes, getters, collections, and resources around it as ordinary JavaScript.
How Starbeam works
Mark the state that changes. Keep the rest JavaScript.
Starbeam asks you to make the changing roots visible. Reactive objects and collections keep their JavaScript and TypeScript surface, so your app can keep using classes, functions, getters, built-in APIs, and methods.
Write ordinary code above it
Domain objects can expose values like session.user,
cart.total, and form.isValid without
adopting a special component shape.
Read derived values
Getters and functions can derive from root state. Starbeam follows those reads when a framework renders the result.
Add lifecycle when work needs one
Resources wrap setup, sync, and cleanup while returning the domain-shaped value your app wants to read.
Lifecycle bridge
Attach work to the lifetime it needs.
Root state does not need an owner. Timers, subscriptions, sockets, shared app state, and DOM observers do. Starbeam keeps that lifecycle work close to the framework edge.
Read lifecycle conceptsResources
Use a resource when state needs setup, sync, cleanup, or finalize work tied to one component lifetime.
Services
Use a service for resource-backed state that should live with the app root where the adapter exposes an app lifetime.
Read about servicesElement resources
Use an element resource when the framework should provide a DOM element and Starbeam should own the setup and cleanup work.
Read about element resourcesFramework adapters
One model, native framework edges.
The Starbeam model stays the same. Each adapter connects reads and lifecycle to the framework you are already using.
Open the inventory table demoReact
Hooks connect reactive reads, resources, services, and element resources to React rendering and effects.
Preact
Install the adapter once, then render reads can stay direct while hooks cover resources, services, and element resources.
Vue
Setup helpers and directives connect Starbeam reads, resources, services, and element resources to Vue components.
Svelte
The Svelte 5 adapter exposes experimental
fromStarbeam() reads today, while element resources
attach through element-resource attachments.
Ember
Glimmer autotracking sees Starbeam reads directly, while helpers and modifiers connect resources, services, and element resources to Ember lifetimes.
Collaborative legibility
Stable JavaScript shapes are easier to review together.
When state lives behind familiar objects, getters, and methods, teammates can talk about the domain instead of translating framework wiring. That same stable structure also gives coding agents clearer seams to inspect, edit, and explain.
Where to go next