xstate

Connect json-render state handling to an @xstate/store atom.

Updated Jun 24, 2026
One-click install
npx skills add https://github.com/hasnaxyz/open-render --skill xstate-hasnaxyz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: xstate
Source: https://github.com/hasnaxyz/open-render/tree/main/skills/xstate
Command: npx skills add https://github.com/hasnaxyz/open-render --skill xstate-hasnaxyz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It lets json-render read and write application state through an @xstate/store atom, so generated UI stays synchronized with a predictable state backend.

Core Features & Use Cases

  • State backend adapter: Bridges json-render's StateStore interface to XState Store.
  • Simple integration: Create an atom, wrap it with the adapter, and provide it to json-render React apps.
  • Use case: Useful when you already model UI state in XState and want generated interfaces to share the same source of truth.

Quick Start

Use the xstate skill to connect an @xstate/store atom to json-render by creating the adapter and passing it into StateProvider.

Frequently Asked Questions about xstate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect json-render to XState for shared UI state?▼

To connect json-render to XState, use the xstateStoreStateStore adapter to bridge an @xstate/store atom to json-render's StateProvider, enabling generated UI to read and write shared application state.

What is an XState Store atom used for in React generated UI?▼

An XState Store atom serves as a predictable state backend in React applications. When wrapped with an adapter, it synchronizes json-render generated interfaces with your application's single source of truth.

Do I need a specific version of XState Store to use the state backend adapter?▼

Yes, the state backend adapter requires an XState Store v3+ atom to properly satisfy the StateStore interface used by StateProvider in json-render React applications.

Can I use json-render with my existing XState UI state models?▼

Yes, if you already model UI state in XState, create an atom, wrap it with the xstateStoreStateStore adapter, and provide it to json-render so generated interfaces share the same state backend.

How do I integrate an XState atom into json-render StateProvider?▼

Create an @xstate/store atom, wrap it with the xstateStoreStateStore adapter to satisfy the StateStore interface, and pass the adapted store into the json-render StateProvider for your React app.