Zustand

This is a thin adapter that lets you use a Zustand vanilla store as the state backend for json-render, a library that renders UIs from JSON schemas. You wire up your Zustand store through the StateStore interface, and json-render reads and writes state through it instead of managing its own. Supports slicing into nested parts of your state tree if you don't want to hand over the whole thing. Only works with Zustand v5+, not v4, due to breaking changes in the vanilla store API. Honestly pretty niche unless you're already committed to both json-render and Zustand, but if you are, this is the glue code you need.

skills.sh installs: 1.9K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill zustand --agent claude-code

Installs into .claude/skills of the current project.

Files

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