{"_id":"@abtx/react-live-state-editor","_rev":"2-6bdf2cc73c7c2a3855c0a9e4e1bfd7bf","name":"@abtx/react-live-state-editor","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@abtx/react-live-state-editor","version":"0.1.0","keywords":["react","react-query","tanstack-query","devtools","state-editor","development"],"author":{"name":"artur.abato.janas@gmail.com"},"license":"MIT","_id":"@abtx/react-live-state-editor@0.1.0","maintainers":[{"name":"abtx","email":"artur.abato.janas@gmail.com"}],"homepage":"https://github.com/abtx/zenstate-npm#readme","bugs":{"url":"https://github.com/abtx/zenstate-npm/issues"},"dist":{"shasum":"ab5d5e7676395b8381726099d770c8f945c96223","tarball":"https://registry.npmjs.org/@abtx/react-live-state-editor/-/react-live-state-editor-0.1.0.tgz","fileCount":8,"integrity":"sha512-O8OuOYVzft1JxLOYBabnOEvEmHMJUI+9w2r1PAGxBuARVDNYMlUaJm/KoAGXz3Bly390OXAN0+EdMIrj582INw==","signatures":[{"sig":"MEUCIDN+t+K7M5Y5lBpODHU0PVSaoCD8TOWudwZPEzYaTsEIAiEA5xdVBcM+CA1cAR1mt5dij5/S1QvxXID7FXPnYG4MLNE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":314841},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"75810bb15fc12fe7f53e841fd5f3f128652f3ce9","scripts":{"dev":"tsup --watch","build":"tsup","type-check":"tsc --noEmit"},"_npmUser":{"name":"abtx","email":"artur.abato.janas@gmail.com"},"repository":{"url":"git+https://github.com/abtx/zenstate-npm.git","type":"git"},"_npmVersion":"10.9.2","description":"A dev-only floating panel to inspect and live-edit React Query cache data","directories":{},"_nodeVersion":"23.6.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.0.0","@types/node":"^20.19.37","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@tanstack/react-query":"^5.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0","@tanstack/react-query":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-live-state-editor_0.1.0_1773932034657_0.003964060647586809","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@abtx/react-live-state-editor","version":"0.1.1","description":"A dev-only floating panel to inspect and live-edit React Query cache data","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"bin":{"react-live-state-editor":"dist/cli.js"},"scripts":{"build":"tsup","dev":"tsup --watch","type-check":"tsc --noEmit"},"keywords":["react","react-query","tanstack-query","apollo","graphql","devtools","state-editor","development"],"author":{"name":"artur.abato.janas@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/abtx/zenstate-npm.git"},"homepage":"https://github.com/abtx/zenstate-npm#readme","bugs":{"url":"https://github.com/abtx/zenstate-npm/issues"},"peerDependencies":{"@apollo/client":">=3.0.0","@tanstack/react-query":">=4.0.0","react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"@apollo/client":{"optional":true}},"devDependencies":{"@apollo/client":"^3.13.4","@tanstack/react-query":"^5.0.0","@types/node":"^20.19.37","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","graphql":"^16.0.0","react":"^18.0.0","react-dom":"^18.0.0","tsup":"^8.0.0","typescript":"^5.0.0"},"_id":"@abtx/react-live-state-editor@0.1.1","gitHead":"121e8243689238a887d665853b4b5a73ad27a368","_nodeVersion":"23.6.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-F8VIZBJNtynx7PQUsJV4bGs21EUh/4S34pQe6UMPTIFkZjUhp+fQAB67+NbsvWvA/RxhS8RM/nhvCzgxLnR+RQ==","shasum":"1d877c623108004195e4b0f87549954d23b86712","tarball":"https://registry.npmjs.org/@abtx/react-live-state-editor/-/react-live-state-editor-0.1.1.tgz","fileCount":9,"unpackedSize":358030,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFaLKId7EODZGWcel5EmSsvcnAFCRczel00/a/08lMfaAiBlN1LToiutnSqjyZreFXVGlAm4j/Gga8BfAp79Y3zN7Q=="}]},"_npmUser":{"name":"abtx","email":"artur.abato.janas@gmail.com"},"directories":{},"maintainers":[{"name":"abtx","email":"artur.abato.janas@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-live-state-editor_0.1.1_1773934794097_0.25052832582331264"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-19T14:53:54.592Z","modified":"2026-03-19T15:39:54.355Z","0.1.0":"2026-03-19T14:53:54.811Z","0.1.1":"2026-03-19T15:39:54.240Z"},"bugs":{"url":"https://github.com/abtx/zenstate-npm/issues"},"author":{"name":"artur.abato.janas@gmail.com"},"license":"MIT","homepage":"https://github.com/abtx/zenstate-npm#readme","keywords":["react","react-query","tanstack-query","apollo","graphql","devtools","state-editor","development"],"repository":{"type":"git","url":"git+https://github.com/abtx/zenstate-npm.git"},"description":"A dev-only floating panel to inspect and live-edit React Query cache data","maintainers":[{"name":"abtx","email":"artur.abato.janas@gmail.com"}],"readme":"# react-live-state-editor — catch missing UI states before you ship\n\nA dev-only floating panel that lets you **inspect, edit, simulate, and track UI states** for React Query and Apollo Client — without touching your code.\n\nStop guessing how your UI behaves. Live State Editor shows you what you forgot.\n\n---\n\n## Why?\n\nWhen building UI (especially with AI), it's easy to miss:\n\n- Empty states (`[]`)\n- Error states (`500`, `null`)\n- Loading states\n- Edge cases in real data\n\nLive State Editor makes all of these visible and testable **in seconds**.\n\n---\n\n## Features\n\n### 🔍 Inspect & Edit\n- View all active queries in real time\n- Edit cache data live — UI rerenders instantly\n- Reset to the original server response\n\n### 📌 Pin & Persist States\n- Pin a query to lock it — backend refetches won't overwrite it\n- Pinned state persists across page reloads via `localStorage`\n- Edit a pinned query and it auto-saves\n\n### ⚠️ State Coverage\n- Four states tracked per query: **success · empty · error · loading**\n- Tick them off manually as you verify each one\n- Coverage persists across reloads\n- Queries with missing states show a warning badge in the list\n- Green dot next to a query = all states verified\n\n### ⚡ Simulate States\n- Click **Success / Empty / Error / Loading** to preview each state instantly\n- Copy a prompt to paste into your IDE — instructs the AI to fix missing states using your existing components\n\n### 🖱️ Panel UX\n- Drag the panel anywhere on screen\n- Resize from any edge or corner\n- Minimize to a dot to stay out of the way\n\n---\n\n## Install\n\n```bash\nnpm install @abtx/react-live-state-editor\n```\n\n---\n\n## Setup\n\n### Option 1 — Interactive installer (recommended)\n\nRun this in your project root:\n\n```bash\nnpx @abtx/react-live-state-editor init\n```\n\nIt auto-detects React Query and/or Apollo Client, lets you confirm, and prints a ready-to-paste snippet.\n\n---\n\n### Option 2 — Manual setup\n\n**React Query**\n\n```tsx\nimport { LiveStateEditor } from '@abtx/react-live-state-editor'\n\n// Wrap inside your QueryClientProvider:\n<QueryClientProvider client={queryClient}>\n  <LiveStateEditor>\n    <App />\n  </LiveStateEditor>\n</QueryClientProvider>\n```\n\n**Apollo Client**\n\n```tsx\nimport { LiveStateEditor, ApolloAdapter } from '@abtx/react-live-state-editor'\nimport { useApolloClient } from '@apollo/client'\n\nfunction Providers({ children }) {\n  const apolloClient = useApolloClient()\n  return (\n    <LiveStateEditor adapters={[new ApolloAdapter(apolloClient)]}>\n      {children}\n    </LiveStateEditor>\n  )\n}\n```\n\n**Both React Query + Apollo**\n\n```tsx\nimport { LiveStateEditor, ReactQueryAdapter, ApolloAdapter } from '@abtx/react-live-state-editor'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { useApolloClient } from '@apollo/client'\n\nfunction Providers({ children }) {\n  const queryClient  = useQueryClient()\n  const apolloClient = useApolloClient()\n  return (\n    <LiveStateEditor adapters={[\n      new ReactQueryAdapter(queryClient),\n      new ApolloAdapter(apolloClient),\n    ]}>\n      {children}\n    </LiveStateEditor>\n  )\n}\n```\n\nThe panel appears automatically in development. In production, `<LiveStateEditor>` renders nothing but its children — zero overhead.\n\n---\n\n## Peer dependencies\n\n| Library | Required |\n|---|---|\n| `react` >=17 | ✅ |\n| `react-dom` >=17 | ✅ |\n| `@tanstack/react-query` >=4 | if using React Query |\n| `@apollo/client` >=3 | if using Apollo |\n\n---\n\n## API\n\n### `<LiveStateEditor>`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `adapters` | `CacheAdapter[]` | auto-detects React Query | Explicit adapters. Omit to use React Query from context. |\n\n### `ReactQueryAdapter`\n\n```ts\nnew ReactQueryAdapter(queryClient: QueryClient)\n```\n\n### `ApolloAdapter`\n\n```ts\nnew ApolloAdapter(apolloClient: ApolloClient<any>)\n```\n\nSupports: patch, reset, simulate loading (via refetch).\nDoes not support: simulate error (no stable public Apollo API).\n\n### Custom adapters\n\nImplement the `CacheAdapter` interface to connect any data-fetching layer:\n\n```ts\nimport type { CacheAdapter, AdapterQuerySnapshot } from '@abtx/react-live-state-editor'\n\nclass MyAdapter implements CacheAdapter {\n  readonly id = 'my-layer'\n  snapshot() { /* return AdapterQuerySnapshot[] */ }\n  subscribe(cb) { /* subscribe to cache changes, return unsubscribe fn */ }\n  patch(state, data) { /* write new data */ }\n  reset(state, originalData) { /* restore original */ }\n}\n```\n\n### `useLiveStateEditor()`\n\nAccess the editor context directly:\n\n```ts\nconst { store, patchQuery, resetQuery, saveQuery, unsaveQuery } = useLiveStateEditor()\n```\n\n---\n\n## Production safety\n\n- Panel only renders when `NODE_ENV === 'development'`\n- `<LiveStateEditor>` in production is a transparent pass-through wrapper\n- No production bundle impact — tree-shaken automatically\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}