How to install xstate
npx skills add https://github.com/vercel-labs/json-render --skill xstateFull instructions (SKILL.md)
Source of truth, from vercel-labs/json-render.
name: xstate description: XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.
@json-render/xstate
XState Store adapter for json-render's StateStore interface. Wire an @xstate/store atom as the state backend for json-render.
Installation
npm install @json-render/xstate @json-render/core @json-render/react @xstate/store
Requires @xstate/store v3+.
Usage
import { createAtom } from "@xstate/store";
import { xstateStoreStateStore } from "@json-render/xstate";
import { StateProvider } from "@json-render/react";
// 1. Create an atom
const uiAtom = createAtom({ count: 0 });
// 2. Create the json-render StateStore adapter
const store = xstateStoreStateStore({ atom: uiAtom });
// 3. Use it
<StateProvider store={store}>
{/* json-render reads/writes go through @xstate/store */}
</StateProvider>
API
xstateStoreStateStore(options)
Creates a StateStore backed by an @xstate/store atom.
| Option | Type | Required | Description |
|---|---|---|---|
atom | Atom<StateModel> | Yes | An @xstate/store atom (from createAtom) holding the json-render state model |
Related skills
More from vercel-labs/json-render and the wider catalog.
react
React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.
core
Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.
react-pdf
React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.
shadcn
Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.
react-three-fiber
React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.
codegen
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.