> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# createStore

> Persist view state in a Zustand store

`createStore` creates a [Zustand](https://github.com/pmndrs/zustand) store synced with the [view](/build/view)'s persisted [state](/build/state), on the same [lifecycle](/api-reference/use-view-state#lifecycle) as [`useViewState`](/api-reference/use-view-state). 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.

```tsx highlight={8-11} theme={null}
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

```tsx theme={null}
createStore<State>(
  storeCreator: StateCreator<State, [], [], State>,
  defaultState?: State | (() => State),
): UseBoundStore<StoreApi<State>>;
```

## Parameters

### `storeCreator`

```tsx theme={null}
storeCreator: StateCreator<State, [], [], State>;
```

The Zustand state creator, the standard `(set, get) => ({ ... })` returning the store's initial state and actions.

### `defaultState`

```tsx theme={null}
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

```tsx theme={null}
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.

<CardGroup cols={3}>
  <Card title="useViewState" icon="save" href="/api-reference/use-view-state">
    The simpler hook this builds on, and its lifecycle
  </Card>

  <Card title="Manage State" icon="database" href="/build/state">
    Decide what to persist and share with the model
  </Card>

  <Card title="DataLLM" icon="message-circle" href="/api-reference/data-llm">
    Narrate the on-screen state to the model
  </Card>
</CardGroup>