zustand

Zustand is a small library for keeping an app's data in one place; this wires it underneath a json-render screen, so the screen and the rest of the app always read the same data.

WHEN TO USE

SCOPE

USE FOR

Wire an existing Zustand vanilla store as the state backend for a json-render UI.
Point json-render at one nested slice of a larger Zustand store instead of its whole state.
Control exactly how updates are written back with a custom updater instead of a shallow merge.

NOT FOR

Zustand v4 is not supported: its vanilla store interface changed too much to work.

This is a saved copy of the skill's SKILL.md instructions. It may differ from the upstream file or the version you install.

In this document (4)

@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.

Local tool required

1 FOR YOU

01
Install the Zustand adapter along with Zustand v5
Run npm install @json-render/zustand @json-render/core @json-render/react zustand; only Zustand v5+ works, v4's vanilla store API is incompatible.

Listed as free: Connected services may require an account or charge fees.
Installation: One command — usually under 2 minutes.

Not standalone. This skill ships with vercel-labs/json-render and only works together with that tool — install the tool first, then add this skill.

Run this outside your AI tool, using Node.js 22.20.0 or newer. Skills CLI 1.7.2 skips skill selection; prompts cancel installation without an interactive terminal. If choosing Project when asked about installation scope, open your project's folder before running this.

Install checklist

Check selected tools if a picker appears; Claude Code may be unchecked under Additional agents. ↑/↓ moves, Space toggles selections, Enter confirms.
Without a tool picker, check Installing to: for your intended tool. Stop if it names a different tool.
If asked, choose Symlink (Recommended) for shared files or Copy to all agents for separate copies; review the summary before confirming installation.
Install the find-skills skill? defaults to Yes, adding another skill for all projects. Choose No if you don't want that extra installation.

Skills CLI 1.7.2 sends install data to skills.sh by default, including the source, skill names, target tools and file details; GitHub sources are reported only when GitHub confirms the repository is public, while other remote sources can also be reported. Confirmed-public GitHub sources also trigger a security-audit request. Before installing, set the environment variable DO_NOT_TRACK=1 or DISABLE_TELEMETRY=1 to disable both.

npx skills add vercel-labs/json-render --skill "zustand" --full-depth

After installing for Claude Code, open it in the installation project if you chose Project; Global makes the skill available across projects on this computer. Once Claude Code loads the skill, its description helps Claude decide when to use it.

If installation created a top-level skills folder that did not exist when your Claude Code session started, run /reload-skills in that session. Run it again after later changes in that folder.

What's inside

Files included with this skill.

View on GitHub

The repository is licensed under Apache-2.0 — use, modification, and redistribution are allowed under that license’s terms.

View the repository’s license file on GitHub →

@json-render/zustand

Installation

Usage

With a Nested Slice

API

zustandStateStore(options)

Local tool required

What's inside

More skills

codegen

core

devtools

directives

image

ink

`zustandStateStore(options)`