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.