zustand

vercel-labs/json-render

Zustand adapter for json-render state management integration.

What is zustand?

Connects Zustand vanilla stores to json-render's StateStore interface, enabling state-driven JSON rendering. Use this when you need Zustand as the state backend for json-render components.

Adapts Zustand vanilla stores to json-render's StateStore interface
Supports full store or nested slice selection via selector function
Provides custom updater control for state application strategies
Enables json-render to read and write state through Zustand
Works with Zustand v5+ (v4 not supported)

How to install zustand

npx skills add https://github.com/vercel-labs/json-render --skill zustand

Prerequisites

Zustand v5 or higher installed
@json-render/core and @json-render/react packages
Familiarity with Zustand vanilla stores (createStore from zustand/vanilla)

Claude Code

Cursor

Windsurf

Cline

How to use zustand

1.Install @json-render/zustand, @json-render/core, @json-render/react, and zustand v5+
2.Create a Zustand vanilla store using createStore from zustand/vanilla
3.Call zustandStateStore({ store }) to wrap your store as a StateStore
4.Optionally add selector and updater options for nested slices or custom update logic
5.Wrap your json-render components with StateProvider using the created store

Use cases

Good for

Integrating json-render with existing Zustand state management in React apps
Rendering JSON-driven UIs backed by Zustand stores
Managing nested state slices (e.g., ui, auth) separately in json-render
Building state-reactive components that sync with Zustand
Replacing default json-render state with Zustand for consistency

Who it's for

React developers using json-render and Zustand together
Teams managing complex state with Zustand
Developers building JSON-driven UIs with external state backends

zustand FAQ

Do I need Zustand v5?

Yes, Zustand v5+ is required. Zustand v4 is not supported due to breaking changes in the vanilla store API.

Can I use a nested slice of my store?

Yes, use the selector option to pick a slice (e.g., selector: (s) => s.ui) and the updater option to apply changes back (e.g., updater: (next, s) => s.setState({ ui: next })).

What's the default update behavior?

By default, the adapter performs a shallow merge of the next state into the store. Override with the updater option for full replacement or custom logic.

Do I need to use React?

@json-render/react is required for the StateProvider component, but the Zustand adapter itself works with Zustand vanilla stores.

Full instructions (SKILL.md)

Source of truth, from vercel-labs/json-render.

name: zustand description: Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.

@json-render/zustand

Zustand adapter for json-render's StateStore interface. Wire a Zustand vanilla store as the state backend for json-render.

Installation

npm install @json-render/zustand @json-render/core @json-render/react zustand

Requires Zustand v5+. Zustand v4 is not supported due to breaking API changes in the vanilla store interface.

Usage

import { createStore } from "zustand/vanilla";
import { zustandStateStore } from "@json-render/zustand";
import { StateProvider } from "@json-render/react";

// 1. Create a Zustand vanilla store
const bearStore = createStore(() => ({
  count: 0,
  name: "Bear",
}));

// 2. Create the json-render StateStore adapter
const store = zustandStateStore({ store: bearStore });

// 3. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through Zustand */}
</StateProvider>

With a Nested Slice

const appStore = createStore(() => ({
  ui: { count: 0 },
  auth: { token: null },
}));

const store = zustandStateStore({
  store: appStore,
  selector: (s) => s.ui,
  updater: (next, s) => s.setState({ ui: next }),
});

API

`zustandStateStore(options)`

Creates a StateStore backed by a Zustand store.

Option	Type	Required	Description
`store`	`StoreApi<S>`	Yes	Zustand vanilla store (from `createStore` in `zustand/vanilla`)
`selector`	`(state) => StateModel`	No	Select the json-render slice. Defaults to entire state.
`updater`	`(nextState, store) => void`	No	Apply next state to the store. Defaults to shallow merge. Override for nested slices, or use `(next, s) => s.setState(next, true)` for full replacement.