Skip to content
Starbeam

Install Starbeam

Install the packages you import directly. Most apps need one framework adapter, @starbeam/universal, and @starbeam/collections.

What are you building?

Section titled “What are you building?”
If you are building…Install…Start with…
A framework-neutral model@starbeam/universal @starbeam/collectionsreactive collections, domain objects, and Resource
A React app@starbeam/react @starbeam/universal @starbeam/collectionsuseReactive(), useResource(), useService(), useElementResource()
A Preact app@starbeam/preact @starbeam/universal @starbeam/collectionsinstall(options), direct render reads, resource/service hooks
A Vue app@starbeam/vue @starbeam/universal @starbeam/collectionsuseReactive(), setupResource(), setupService(), element-resource directives
A Svelte app@starbeam/svelte @starbeam/universal @starbeam/collectionsSvelte 5 read bridge: experimental fromStarbeam() and element-resource attachments
An Ember app@starbeam/ember @starbeam/universal @starbeam/collectionsdirect Glimmer-tracked reads, setupResource(), setupService(), element modifiers
A reusable library@starbeam/universal @starbeam/collectionsframework-neutral state and domain-shaped APIs

Framework-neutral state

Section titled “Framework-neutral state”

Use this when you are writing a model that is not tied to one UI framework.

Terminal window
pnpm add @starbeam/universal @starbeam/collections

Import collection-shaped root state from @starbeam/collections:

import { reactive } from "@starbeam/collections";

Import lifecycle APIs from @starbeam/universal when work needs setup, sync, or cleanup:

import { Resource } from "@starbeam/universal";

Most app models start here: mark the storage that changes, then expose ordinary JavaScript above it.

Framework apps

Section titled “Framework apps”

Add the adapter for the framework that owns rendering.

React

Section titled “React”
Terminal window
pnpm add @starbeam/react @starbeam/universal @starbeam/collections
import {
  Starbeam,
  useElementResource,
  useReactive,
  useResource,
  useService,
} from "@starbeam/react";

Use the React guide for the bridge argument, resources, services, and element resources: React.

Preact

Section titled “Preact”
Terminal window
pnpm add @starbeam/preact @starbeam/universal @starbeam/collections
import {
  install,
  useElementResource,
  useResource,
  useService,
} from "@starbeam/preact";

Install Starbeam into Preact options, then ordinary render reads are tracked by the adapter: Preact.

Vue

Section titled “Vue”
Terminal window
pnpm add @starbeam/vue @starbeam/universal @starbeam/collections
import {
  Starbeam,
  elementResourceDirective,
  useReactive,
  setupReactive,
  setupResource,
  setupService,
} from "@starbeam/vue";

Vue uses useReactive() for direct template reads, setupReactive() when you want a specific Starbeam read as a Vue ref, and directives for element resources: Vue.

Svelte

Section titled “Svelte”
Terminal window
pnpm add @starbeam/svelte @starbeam/universal @starbeam/collections
import {
  elementResource,
  elementResourceAttachment,
  elementResourceStore,
  fromStarbeam,
} from "@starbeam/svelte";

Svelte currently exposes experimental Starbeam reads through fromStarbeam() and DOM element resources through Svelte 5 element-resource attachments. Component-resource and app-service helpers are not exposed yet. See Svelte.

Ember

Section titled “Ember”
Terminal window
pnpm add @starbeam/ember @starbeam/universal @starbeam/collections
import { setupResource, setupService } from "@starbeam/ember";
import {
  elementResource,
  elementResourceModifier,
} from "@starbeam/ember/modifier";

Ember’s adapter mirrors Starbeam reads into Glimmer autotracking, so templates and getters can read Starbeam-backed domain objects directly. Use setupResource() for component-owned resources, setupService() for owner-scoped services, and modifiers for element resources: Ember.

Direct packages

Section titled “Direct packages”

Most app code should start with the packages above. Reach for direct packages when you are writing reusable libraries or adapter-level integration code.

If your library only exposes ordinary Starbeam-backed objects, start with the same framework-neutral install:

Terminal window
pnpm add @starbeam/universal @starbeam/collections

Add direct packages only when your library needs their lower-level APIs.

@starbeam/resource

Section titled “@starbeam/resource”

Use @starbeam/resource directly when you are authoring reusable resource helpers or doing manual resource integration. App code usually imports Resource from @starbeam/universal or consumes resources through a framework adapter.

@starbeam/service

Section titled “@starbeam/service”

@starbeam/service is the lower-level app-scoped service kernel. App authors usually use framework adapter helpers instead:

  • React and Preact: useService();
  • Vue: setupService(); install the Starbeam plugin when you want to establish app ownership explicitly;
  • Svelte: service helpers are not exposed yet.

See Services and app lifetime for the app-facing model.

@starbeam/reactive

Section titled “@starbeam/reactive”

Use @starbeam/reactive directly when you are building lower-level reactive primitives. App and library models usually start with @starbeam/collections, @starbeam/universal, or a framework adapter.

@starbeam/core

Section titled “@starbeam/core”

Do not start new code with @starbeam/core. It is a deprecated compatibility alias for @starbeam/universal. Existing users can follow the core compatibility migration.

Next steps

Section titled “Next steps”