zustand
This adapter bridges Zustand and json-render by implementing the StateStore interface, letting you use a Zustand vanilla store as the backing state layer. Configure it with your store, optionally select a nested slice, and pass it to json-render's StateProvider to handle all state reads and writes through Zustand.
zustand connects Zustand state management to json-render's StateStore interface for integrated state handling.
AI-generated summary based on this skill's SKILL.md
Install
vercel-labs/json-render/zustand · repository language: TypeScript
git clone https://github.com/vercel-labs/json-render
cp -r json-render/skills/zustand ~/.claude/skills/zustandnpx skillfed install vercel-labs/json-render/zustandFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use zustand with json-render?
Zustand integrates with json-render through a StateStore adapter that implements json-render's state interface. Create your Zustand vanilla store, wrap it with the adapter, and pass it to json-render's StateProvider. The adapter handles all state reads and writes, letting json-render components subscribe to and update your Zustand store directly.
What is a zustand adapter for json-render?
The zustand adapter for json-render is a bridge that implements the StateStore interface, connecting your Zustand vanilla store to json-render's state system. It translates json-render state operations into Zustand store mutations, enabling seamless integration without manual state synchronization.
Can I connect zustand to json-render with nested slices?
Yes, zustand supports nested slice connections to json-render. When configuring the adapter, you can optionally select a specific nested slice from your Zustand store. This lets you scope json-render to a particular branch of your state tree while keeping the full store accessible through Zustand elsewhere.
How do I set up StateStore adapter for Zustand vanilla store?
To set up the StateStore adapter for your Zustand vanilla store, instantiate your store using Zustand's createStore, then pass it to the adapter constructor. Configure any options like nested slice selection, then provide the configured adapter to json-render's StateProvider to wire Zustand as your state backend.
What license does zustand use for json-render integration?
Zustand is licensed under Apache-2.0, making it freely available for commercial and open-source projects. This permissive license applies to the zustand adapter and all integration code with json-render.
SKILL.md
rendered from the published skill — quoted content, verbatim
@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
```tsx const appStore = createStore(() => ({ ui: { count: 0 }, auth: { token: null }, }));
const store =
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/zustand/SKILL.md