Skip to content

Framework guides

Starbeam’s state model is framework-neutral. Framework adapters make it feel native by connecting Starbeam’s reactive model to each framework’s rendering and lifecycle rules.

The goal is not one framework with incidental ports. React, Preact, Vue, Svelte, and Ember are public docs targets, with adapter coverage maturing at different speeds.

The core model stays the same in every framework:

  1. Mark root state reactive. Use @starbeam/collections for collection-shaped state and @starbeam/universal for scalar state and lifecycle APIs.
  2. Build ordinary JavaScript abstractions above it.
  3. Use resources when state needs setup, sync, or cleanup.
  4. Let the adapter connect reads and resources to the framework.

The framework-specific layer should feel small. It is the bridge between Starbeam’s model and the framework’s rendering and lifecycle rules. Your domain model can still expose normal getters, methods, and objects; the adapter is the place that connects those reads and resources to React, Preact, Ember, Vue, or Svelte.

Need the package list first? Start with Install Starbeam.

Want to see the same model running inside the docs site? The inventory table demo embeds React, Preact, Vue, Svelte, and Ember shells that all use the same @starbeam-demos/table-core package. The model stays unchanged; each tab shows the framework edge.

  • React: hooks for reactive reads, resources, services, and element resources.
  • Preact: adapter installation, reactive reads, resources, services, and element resources.
  • Vue: setup helpers and directives for reactive state, resources, services, and element resources.
  • Svelte: Svelte 5 adapter with experimental fromStarbeam() reads and element-resource attachments. Component-resource and service helpers are not exposed yet.
  • Ember: native Glimmer autotracking for Starbeam reads, plus resources, services, and element resources.

Some guide details may mature at different speeds. The top-level posture stays the same: Starbeam is designed to make the same domain-shaped reactive model work across modern JavaScript frameworks.