xstate
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.
xstate integrates XState Store atoms with json-render's state management layer.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-08
xstate integrates XState Store atoms with json-render's state management layer. 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.
Use it when
- The XState adapter connects atomic state from @xstate/store to json-render components by implementing json-render's StateStore interface.
- XState's StateStore adapter accepts an @xstate/store atom as its input.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
vercel-labs/json-render/xstate · 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 you integrate XState Store with json-render?
XState's adapter bridges @xstate/store atoms into json-render's StateStore interface. Create an atom using @xstate/store, pass it to the XState adapter, and wrap your json-render components with the resulting store provider. This lets you manage application state through XState while rendering with json-render.
What is the xstate store adapter json-render connection?
The XState adapter connects atomic state from @xstate/store to json-render components by implementing json-render's StateStore interface. You instantiate an atom, feed it to the adapter, and the adapter returns a provider that injects state into your json-render component tree.
How do you set up StateStore adapter using @xstate/store atom?
XState's StateStore adapter accepts an @xstate/store atom as its input. Once configured with your atom, the adapter exposes a provider component that you wrap around json-render components. This setup connects XState's atomic state management to json-render's rendering system.
What does the XState adapter enable for json-render?
XState adapter enables state management integration by letting json-render components consume state from @xstate/store atoms. Instead of managing state separately, you define atoms in XState, pass them through the adapter, and json-render accesses that state via the provider.
Can you wire XState atom directly to json-render?
XState atoms connect to json-render through the dedicated adapter, not directly. The adapter translates @xstate/store's atom interface into json-render's StateStore contract, ensuring compatibility and proper state flow to your components.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
@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 |
(truncated - see the full file via the links below)
File tree — 1 file
skills/xstate/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 XState Store with json-render for state management”
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 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.
XState Store guides you through building typed, event-driven state with createStore or createStoreLogic, adding persistence and undo-redo via extensions, and wiring stores into React. Learn when to reach for atoms, how to enqueue effects and emit events, declare runtime schemas, and migrate from v3.
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.
Build and refine state machines and statecharts using XState v5 patterns in TypeScript. This skill handles machine design from fuzzy requirements, code implementation and review, v4-to-v5 migration, and integration with React, Vue, Svelte, or Solid frameworks. It also helps you choose between XState and @xstate/store based on your domain's complexity.
More skills react-three-fiber (Apache-2.0)