Skip to main content
createStore creates a Zustand store synced with the view’s persisted state, on the same lifecycle as useViewState. Reach for it when state is complex or shared across components; otherwise use useViewState.

​
Example

A counter store persists its count across remounts, and the view reads and updates it through the store hook. 
import { createStore } from "skybridge/web";

type CounterState = {
  count: number;
  increment: () => void;
};

const useCounter = createStore<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>Count: {count}</button>;
}

​
Signature

createStore<State>(
  storeCreator: StateCreator<State, [], [], State>,
  defaultState?: State | (() => State),
): UseBoundStore<StoreApi<State>>;

​
Parameters

​
storeCreator

storeCreator: StateCreator<State, [], [], State>;
The Zustand state creator, the standard (set, get) => ({ ... }) returning the store’s initial state and actions.

​
defaultState

defaultState?: State | (() => State);
Initial state, used only when the host holds no persisted state for this view. Pass a value or a lazy initializer that runs once. When the host already has persisted state, that value wins.

​
Returns

UseBoundStore<StoreApi<State>>;
A Zustand store. Call it as a React hook with a selector (useCounter((s) => s.count)), or use getState, setState, and subscribe outside React. Store updates persist to the view’s state, and external state changes rehydrate the store.

useViewState

The simpler hook this builds on, and its lifecycle

Manage State

Decide what to persist and share with the model

DataLLM

Narrate the on-screen state to the model