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
Decision gist · record as of 2026-07-08
zustand connects Zustand state management to json-render's StateStore interface for integrated state handling. 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.
Use it when
- The zustand adapter for json-render is a bridge that implements the StateStore interface.
- Yes, zustand supports nested slice connections to json-render.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
vercel-labs/json-render/zustand · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/zustand/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Integrate Zustand state management with json-render rendering”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This adapter bridges Jotai atoms into json-render's state layer, letting you manage UI state through Jotai's atom system. Pass an atom and optional Jotai store to the jotaiStateStore function, then wrap your json-render components in StateProvider to route all state reads and writes through Jotai.
This adapter bridges Redux (or Redux Toolkit) with json-render's state management layer, letting you use your Redux store as the backing state for dynamic UI generation. Configure it with your store instance, a selector for your UI slice, and a dispatch function to sync state changes back through Redux.
This adapter bridges XState Store atoms into json-render's StateStore interface, letting you manage application state through @xstate/store. Pass an atom to the adapter and wrap your json-render components with the resulting store provider.
Zustand State Management teaches you to build type-safe global state for React without boilerplate. Master the three core patterns—basic stores, TypeScript-first setup, and persistent storage—while avoiding common pitfalls like hydration mismatches and infinite render loops.
The core package provides schema definition, catalog mapping, and spec streaming utilities for json-render. Build type-safe component and action definitions, generate AI prompts, and handle dynamic prop expressions with state binding and visibility conditions.
Zustand State is a minimal state management solution designed for React and vanilla JavaScript applications. It eliminates boilerplate by removing the need for providers and offers fine-grained control through selectors to optimize component rerenders. The skill covers store creation, state updates, performance patterns, and integration with middleware like persistence and devtools.
More skills Zustand (unlicensed)