Zustand

by vercel-labsfc2a696a50a3No license18K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated yesterday

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

FeaturedInstructions onlySoftware Development

AI-generated overview

Adapter that connects a Zustand vanilla store to json-render's StateStore interface for state management.

What it does: This skill documents the @json-render/zustand package, which adapts a Zustand vanilla store to json-render's StateStore interface. It covers installation, a basic usage example wiring a store through StateProvider, and a nested-slice example using selector and updater options. It also lists the zustandStateStore options: store, selector, and updater.
When to use it: Use it when integrating json-render with Zustand so that json-render reads and writes flow through a Zustand store. It is also relevant when selecting a nested slice of a larger store or overriding how next state is applied.
Requirements: Requires Zustand v5 or later (v4 is unsupported) plus the packages @json-render/zustand, @json-render/core, @json-render/react, and zustand, installed via npm. Ships no scripts; instructions only.

@json-render/zustand

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

Installation

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

Usage

tsx

import { createStore } from "zustand/vanilla";import { zustandStateStore } from "@json-render/zustand";import { StateProvider } from "@json-render/react";
// 1. Create a Zustand vanilla storeconst bearStore = createStore(() => ({  count: 0,  name: "Bear",}));
// 2. Create the json-render StateStore adapterconst store = zustandStateStore({ store: bearStore });
// 3. Use it<StateProvider store={store}>  {/* json-render reads/writes go through Zustand */}</StateProvider>

import { createStore } from "zustand/vanilla";import { zustandStateStore } from "@json-render/zustand";import { StateProvider } from "@json-render/react";
// 1. Create a Zustand vanilla storeconst bearStore = createStore(() => ({  count: 0,  name: "Bear",}));
// 2. Create the json-render StateStore adapterconst store = zustandStateStore({ store: bearStore });
// 3. Use it<StateProvider store={store}>  {/* json-render reads/writes go through Zustand */}</StateProvider>

With a Nested Slice

tsx

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 }),});

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.

Source and attribution

Source:vercel-labs/json-renderinskills/zustandat commitfc2a696

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Zustand

@json-render/zustand

Installation

Usage

With a Nested Slice

API

`zustandStateStore(options)`

Source and attribution

More from vercel-labs/json-render

Remotion

Svelte

Xstate

Solid

Vue

Shadcn Svelte

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices