Jotai JSON Render
OfficialFreeIntegrate Jotai state management with json-render.
Free · Opens the source repo
What Jotai JSON Render does
The Jotai adapter for json-render's StateStore interface allows developers to seamlessly integrate Jotai state management into their applications that utilize json-render. This skill is particularly useful for projects where state management is crucial, enabling a more organized and reactive approach to handling application state. By using Jotai atoms, developers can create a centralized state that is easily accessible and modifiable throughout their components.
To get started, you simply install the required packages and create a Jotai atom that holds your application's state. The jotaiStateStore function is then used to create a StateStore adapter that links the Jotai atom with json-render. This integration allows json-render to read from and write to the Jotai atom, ensuring that your UI remains in sync with the underlying state. The skill also supports sharing a Jotai store across different components, which is beneficial for larger applications that require consistent state management across multiple parts of the UI.
This skill is aimed at developers who are already using Jotai for state management and want to enhance their applications with json-render's capabilities. It provides a straightforward way to connect the two libraries, making state management more efficient and less error-prone. Whether you are building a complex application or simply need to manage state effectively, this skill offers a reliable solution for integrating Jotai with json-render.
When to use it
Use this skill when you need to manage state in a React application that utilizes json-render for rendering JSON data.
When not to use it
This skill is not suitable if you are not using Jotai for state management or if your application does not involve json-render.
What you can build with it
Integrating with Existing Jotai Projects
If your application already uses Jotai for state management, this skill allows you to easily integrate json-render without significant changes to your architecture.
Building Reactive UIs
Use this skill to create UIs that react to state changes in real-time, leveraging the power of Jotai and json-render together.
Sharing State Across Components
This skill enables you to share a single Jotai store across multiple components, ensuring consistent state management throughout your application.
How to install Jotai JSON Render
View source1. Install with the skills CLI
npx skills add vercel-labs/json-render/jotai --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by vercel-labs@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:
import { atom, createStore } from "jotai";
import { Provider as JotaiProvider } from "jotai/react";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
const jStore = createStore();
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
const store = jotaiStateStore({ atom: uiAtom, store: jStore });
<JotaiProvider store={jStore}>
<StateProvider store={store}>
{/* Both json-render and useAtom() see the same state */}
</StateProvider>
</JotaiProvider>
API
jotaiStateStore(options)
Creates a StateStore backed by a Jotai atom.
| Option | Type | Required | Description |
|---|---|---|---|
atom | WritableAtom<StateModel, [StateModel], void> | Yes | A writable atom holding the state model |
store | Jotai Store | No | The Jotai store instance. Defaults to a new store. Pass your own to share state with <Provider>. |
Frequently asked questions about Jotai JSON Render
Similar skills
WinMD API Search
Easily find and explore Windows desktop APIs.
WebMCPify
Transform any web app into an agent-ready platform.
Phoenix Tracing
Instrument LLM applications with OpenInference tracing.
Foundry Hosted Agent CopilotKit
Guidance for developing agentic web apps on Azure.
Power Automate Foundation
Connect AI agents to Power Automate seamlessly.
Power Automate Flow Builder
Efficiently build and deploy Power Automate flows programmatically.