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
Install
vercel-labs/json-render/jotai · repository language: TypeScript
git clone https://github.com/vercel-labs/json-render
cp -r json-render/skills/jotai ~/.claude/skills/jotainpx skillfed install vercel-labs/json-render/jotaiFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/jotai/SKILL.md