Zustand Adapter for JSON Render
OfficialFreeIntegrate Zustand with json-render for state management.
Free · Opens the source repo
What Zustand Adapter for JSON Render does
The @json-render/zustand skill provides a seamless way to integrate Zustand's state management capabilities with json-render's StateStore interface. This adapter allows developers to wire a Zustand store as the backend for json-render, enabling efficient state management in applications that utilize json-render for rendering JSON data. By leveraging this skill, you can ensure that your application's state is managed effectively while taking advantage of Zustand's simplicity and performance.
To use this skill, you first need to create a Zustand vanilla store using the createStore function. Once your store is set up, you can create a json-render StateStore adapter using the zustandStateStore function, passing in your Zustand store. This allows json-render to read from and write to your Zustand store, facilitating a smooth integration between the two libraries. The skill also supports nested slices, allowing for more granular state management if needed.
This skill is particularly useful for developers working on React applications that require dynamic state management alongside JSON rendering. It simplifies the process of connecting Zustand with json-render, making it easier to maintain and update application state in response to user interactions or data changes. With the growing popularity of Zustand for state management, this adapter provides a valuable tool for enhancing the functionality of json-render in your projects.
When to use it
Use this skill when you need to manage application state in a React project that utilizes json-render for rendering JSON data.
When not to use it
This skill is not suitable if you are not using Zustand for state management or if you are working with versions of Zustand prior to v5.
What you can build with it
Integrating Zustand in a React App
Use the Zustand adapter to manage state effectively in a React application that renders JSON data.
Creating Nested State Slices
Leverage the adapter's capabilities to manage nested slices of state for more complex applications.
Simplifying State Management
Utilize the adapter to simplify the integration of Zustand with json-render, enhancing your app's state management.
How to install Zustand Adapter for JSON Render
View source1. Install with the skills CLI
npx skills add vercel-labs/json-render/zustand --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by vercel-labs@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. |
Frequently asked questions about Zustand Adapter for JSON Render
Similar skills
WinMD API Search
Easily find and explore Windows desktop APIs.
WebMCPify
Transform any web app into an agent-ready platform.
Phoenix Tracing
Instrument LLM applications with OpenInference tracing.
Foundry Hosted Agent CopilotKit
Guidance for developing agentic web apps on Azure.
Power Automate Foundation
Connect AI agents to Power Automate seamlessly.
Power Automate Flow Builder
Efficiently build and deploy Power Automate flows programmatically.