
Description
Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.
SKILL.md
@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. |
More skills from the json-render repository
View all 25 skillscodegen
generate code from UI specifications
Jul 17Code GenerationEngineeringJSONdevtools
inspect and debug generative UI components
Jul 17DebuggingFrontendUI Componentsdirectives
apply custom directives to JSON specs
Jul 17AutomationFrontendi18nJSONimage
generate images from JSON specifications
Jul 17ImagesJSONSatoriSVGink
render JSON specs as terminal UIs
Jul 17CLIJSONUI Componentsjotai
manage state with Jotai
Jul 17FrontendReactState Management
More from Vercel Labs
View publisheragent-browser
automate browser interactions for AI agents
agent-browser
Jul 20AgentsAutomationBrowser Automationagentcore
run browser automation on AWS Bedrock
agent-browser
Jul 17AutomationAWSBrowser Automationcore
navigate and interact with web pages
agent-browser
Jul 20AgentsBrowser AutomationNavigationderive-client
reverse engineer internal APIs from browser traffic
agent-browser
Jul 20API DevelopmentAutomationBrowser AutomationWeb Scrapingdogfood
perform exploratory testing on web applications
agent-browser
Jul 17Browser AutomationDebuggingQATestingelectron
automate Electron desktop applications
agent-browser
Jul 17AgentsBrowser AutomationDesktop