react-live-state-editor — catch missing UI states before you ship

A dev-only floating panel that lets you inspect, edit, simulate, and track UI states for React Query and Apollo Client — without touching your code.

Stop guessing how your UI behaves. Live State Editor shows you what you forgot.

Why?

When building UI (especially with AI), it's easy to miss:

• Empty states ([])
• Error states (500, null)
• Loading states
• Edge cases in real data

Live State Editor makes all of these visible and testable in seconds.

Features

🔍 Inspect & Edit

• View all active queries in real time
• Edit cache data live — UI rerenders instantly
• Reset to the original server response

📌 Pin & Persist States

• Pin a query to lock it — backend refetches won't overwrite it
• Pinned state persists across page reloads via localStorage
• Edit a pinned query and it auto-saves

⚠️ State Coverage

• Four states tracked per query: success · empty · error · loading
• Tick them off manually as you verify each one
• Coverage persists across reloads
• Queries with missing states show a warning badge in the list
• Green dot next to a query = all states verified

⚡ Simulate States

• Click Success / Empty / Error / Loading to preview each state instantly
• Copy a prompt to paste into your IDE — instructs the AI to fix missing states using your existing components

🖱️ Panel UX

• Drag the panel anywhere on screen
• Resize from any edge or corner
• Minimize to a dot to stay out of the way

Install

npm install @abtx/react-live-state-editor

Setup

Option 1 — Interactive installer (recommended)

Run this in your project root:

npx @abtx/react-live-state-editor init

It auto-detects React Query and/or Apollo Client, lets you confirm, and prints a ready-to-paste snippet.

Option 2 — Manual setup

React Query

import { LiveStateEditor } from '@abtx/react-live-state-editor'

// Wrap inside your QueryClientProvider:
<QueryClientProvider client={queryClient}>
  <LiveStateEditor>
    <App />
  </LiveStateEditor>
</QueryClientProvider>

Apollo Client

import { LiveStateEditor, ApolloAdapter } from '@abtx/react-live-state-editor'
import { useApolloClient } from '@apollo/client'

function Providers({ children }) {
  const apolloClient = useApolloClient()
  return (
    <LiveStateEditor adapters={[new ApolloAdapter(apolloClient)]}>
      {children}
    </LiveStateEditor>
  )
}

Both React Query + Apollo

import { LiveStateEditor, ReactQueryAdapter, ApolloAdapter } from '@abtx/react-live-state-editor'
import { useQueryClient } from '@tanstack/react-query'
import { useApolloClient } from '@apollo/client'

function Providers({ children }) {
  const queryClient  = useQueryClient()
  const apolloClient = useApolloClient()
  return (
    <LiveStateEditor adapters={[
      new ReactQueryAdapter(queryClient),
      new ApolloAdapter(apolloClient),
    ]}>
      {children}
    </LiveStateEditor>
  )
}

The panel appears automatically in development. In production, <LiveStateEditor> renders nothing but its children — zero overhead.

Peer dependencies

| Library | Required | |---|---| | react >=17 | ✅ | | react-dom >=17 | ✅ | | @tanstack/react-query >=4 | if using React Query | | @apollo/client >=3 | if using Apollo |

API

<LiveStateEditor>

| Prop | Type | Default | Description | |---|---|---|---| | adapters | CacheAdapter[] | auto-detects React Query | Explicit adapters. Omit to use React Query from context. |

ReactQueryAdapter

new ReactQueryAdapter(queryClient: QueryClient)

ApolloAdapter

new ApolloAdapter(apolloClient: ApolloClient<any>)

Supports: patch, reset, simulate loading (via refetch). Does not support: simulate error (no stable public Apollo API).

Custom adapters

Implement the CacheAdapter interface to connect any data-fetching layer:

import type { CacheAdapter, AdapterQuerySnapshot } from '@abtx/react-live-state-editor'

class MyAdapter implements CacheAdapter {
  readonly id = 'my-layer'
  snapshot() { /* return AdapterQuerySnapshot[] */ }
  subscribe(cb) { /* subscribe to cache changes, return unsubscribe fn */ }
  patch(state, data) { /* write new data */ }
  reset(state, originalData) { /* restore original */ }
}

useLiveStateEditor()

Access the editor context directly:

const { store, patchQuery, resetQuery, saveQuery, unsaveQuery } = useLiveStateEditor()

Production safety

• Panel only renders when NODE_ENV === 'development'
• <LiveStateEditor> in production is a transparent pass-through wrapper
• No production bundle impact — tree-shaken automatically

License

MIT