jotai
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.
jotai connects Jotai atoms as the state backend for json-render's StateStore interface.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-08
jotai connects Jotai atoms as the state backend for json-render's StateStore interface. 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.
Use it when
- The @json-render/jotai adapter (Apache-2.0 licensed) integrates Jotai atom state management with json-render.
- Create a Jotai atom for your state, pass it to jotaiStateStore along with an optional Jotai store instance.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
vercel-labs/json-render/jotai · 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 to use jotai with json-render?
The jotai adapter bridges Jotai atoms into json-render's state layer. Pass an atom and optional Jotai store to the jaiStateStore function, then wrap your json-render components in StateProvider to route all state reads and writes through Jotai. This lets you manage UI state through Jotai's atom system while rendering json-render templates.
What is the @json-render/jotai adapter?
The @json-render/jotai adapter (Apache-2.0 licensed) integrates Jotai atom state management with json-render. It provides the jotaiStateStore function to connect Jotai atoms as the backend for json-render's StateStore, enabling seamless state synchronization between Jotai and your rendered components.
How do I set up json-render StateStore using Jotai backend?
Create a Jotai atom for your state, pass it to jotaiStateStore along with an optional Jotai store instance, then wrap your json-render components with StateProvider. This configures json-render to use Jotai as its state backend, routing all state operations through Jotai's atom system.
Can I share a Jotai store between json-render and React components?
Yes. The jotai adapter lets you share the same Jotai store across json-render and regular React components. Pass your store to jotaiStateStore, and both json-render templates and React code will read and write to the same Jotai atoms, keeping state synchronized.
What does jotai atom state store json render integration enable?
Integrating jotai atoms with json-render enables centralized state management through Jotai's atom system while rendering dynamic UIs from JSON. You get atomic updates, fine-grained reactivity, and the ability to compose state logic in Jotai while json-render handles template rendering and event binding.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
@json-render/jotai
Jotai adapter for json-render's StateStore interface. Wire a Jotai atom as the state backend for json-render.
Installation
npm install @json-render/jotai @json-render/core @json-render/react jotai
Usage
import { atom } from "jotai";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
// 1. Create an atom that holds the json-render state
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
// 2. Create the json-render StateStore adapter
const store = jotaiStateStore({ atom: uiAtom });
// 3. Use it
<StateProvider store={store}>
{/* json-render reads/writes go through Jotai */}
</StateProvider>
With a Shared Jotai Store
When your app already uses a Jotai <Provider> with a custom store, pass it so both json-render and your components share the same state:
```tsx import { atom, createStore } from "jotai"; import { Provider as JotaiProvider } from "jotai/react"; import {
(truncated - see the full file via the links below)
File tree — 1 file
skills/jotai/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 Jotai atom state management with json-render”
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 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.
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.
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.
Master state management by understanding which tool fits each scenario: Zustand for straightforward global state, Jotai for fine-grained atomic updates, and Context for dependency injection. This skill covers practical patterns, including how to structure complex stores with slices, leverage derived atoms, and keep server data separate using TanStack Query.
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.
react-three-fiber bridges React and Three.js, letting you compose 3D scenes declaratively using familiar component patterns. Define complex 3D environments through JSON specifications and React's component model, then render them efficiently in the browser. Perfect for building interactive visualizations, games, and immersive web experiences.
More skills Xstate Store (unlicensed)