{"_id":"@animaru/graphiplay","_rev":"3-dca63d9593cc7fb0f336a46a0fed41f8","name":"@animaru/graphiplay","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@animaru/graphiplay","version":"0.1.0","keywords":["graphql","playground","graphiql","ide","codemirror","react"],"license":"MIT","_id":"@animaru/graphiplay@0.1.0","maintainers":[{"name":"localhostov","email":"localhostov@gmail.com"}],"dist":{"shasum":"eb95780010e37977d78570b9ee4aa963a2bbbcb1","tarball":"https://registry.npmjs.org/@animaru/graphiplay/-/graphiplay-0.1.0.tgz","fileCount":73,"integrity":"sha512-PH9TBAT/wtkZzlv0ibRKqcfHmWBYWgSO8UUjZ5z0Qw8DNa7tsoxm/bPceGDOb75SYvmDwCuCSRb0HjveXiny7w==","signatures":[{"sig":"MEYCIQDuYCU90Gt1N2nUQqMxHWv5ZkZUkDq/ojrbgCDkqv/zWQIhAOLsYbYM6Qdmcd0DdgL+dQ4KCZF7J9K3X2kQag+GbYQ4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14084923},"main":"./dist/graphiplay.js","type":"module","types":"./dist/lib.d.ts","unpkg":"./dist/graphiplay.min.js","module":"./dist/graphiplay.js","exports":{".":{"types":"./dist/lib.d.ts","import":"./dist/graphiplay.js","default":"./dist/graphiplay.js"},"./dist/*":"./dist/*","./package.json":"./package.json","./graphiplay.css":"./dist/graphiplay.css"},"scripts":{"dev":"vite","build":"pnpm typecheck && pnpm build:lib && pnpm build:cdn","format":"prettier --write \"src/**/*.{ts,tsx,css}\" \"*.{ts,json,md,html}\"","preview":"vite preview","build:cdn":"LIB_FORMAT=iife vite build -c vite.lib.config.ts","build:lib":"vite build -c vite.lib.config.ts","typecheck":"tsc -b","build:site":"vite build","format:check":"prettier --check \"src/**/*.{ts,tsx,css}\" \"*.{ts,json,md,html}\""},"_npmUser":{"name":"localhostov","email":"localhostov@gmail.com"},"jsdelivr":"./dist/graphiplay.min.js","prettier":"./prettier.json","description":"Embeddable GraphQL playground — schema explorer, CodeMirror editor, collections, history. Drop into any page via CDN or use as a React component.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"26.0.0","dependencies":{"dexie":"^4.4.5","motion":"^12.23.0","nanoid":"^5.1.0","graphql":"^16.11.0","effector":"^23.4.4","graphql-ws":"^6.2.1","cm6-graphql":"^0.2.2","lucide-react":"^0.539.0","effector-react":"^23.3.0","@codemirror/lint":"^6.8.0","@codemirror/view":"^6.36.0","@lezer/highlight":"^1.2.0","@codemirror/state":"^6.5.0","@codemirror/search":"^6.5.0","@codemirror/commands":"^6.8.0","@codemirror/language":"^6.11.0","@codemirror/lang-json":"^6.0.2","@codemirror/autocomplete":"^6.18.0","graphql-language-service":"5.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.0","react":"^19.1.0","prettier":"^3.9.6","react-dom":"^19.1.0","typescript":"^5.8.0","@types/react":"^19.1.0","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.1.0","@vitejs/plugin-react":"^4.7.0","@trivago/prettier-plugin-sort-imports":"^6.0.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/graphiplay_0.1.0_1788310312898_0.16449323568741292","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@animaru/graphiplay","version":"0.1.1","keywords":["graphql","playground","graphiql","ide","codemirror","react"],"author":"Animaru","license":"MIT","_id":"@animaru/graphiplay@0.1.1","maintainers":[{"name":"localhostov","email":"localhostov@gmail.com"}],"homepage":"https://github.com/AnimaruTeam/graphiplay#readme","bugs":{"url":"https://github.com/AnimaruTeam/graphiplay/issues"},"dist":{"shasum":"6b2e1f2a40c81698324232f98f06bc2f5a8f1ddd","tarball":"https://registry.npmjs.org/@animaru/graphiplay/-/graphiplay-0.1.1.tgz","fileCount":73,"integrity":"sha512-EFhmyQvJvHLLq5AyPrmJuZ4Fz9qOnD2x/QJLQyHj0OUj3waTrWv5CLQli3bFmYdxtA5EnwupowNp+ScL0iWDRg==","signatures":[{"sig":"MEYCIQCafDibiij53r8AjLa9T9JiJM1iQzLosIwnub/c5Ho9zgIhAMYLxw22d4LxMGJvZYPuMtZPARKfYy6rnJ/xYl+lVuCQ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14082819},"main":"./dist/graphiplay.js","type":"module","types":"./dist/lib.d.ts","unpkg":"./dist/graphiplay.min.js","module":"./dist/graphiplay.js","exports":{".":{"types":"./dist/lib.d.ts","import":"./dist/graphiplay.js","default":"./dist/graphiplay.js"},"./dist/*":"./dist/*","./package.json":"./package.json","./graphiplay.css":"./dist/graphiplay.css"},"scripts":{"dev":"vite","build":"pnpm typecheck && pnpm build:lib && pnpm build:cdn","format":"prettier --write \"src/**/*.{ts,tsx,css}\" \"*.{ts,json,md,html}\"","preview":"vite preview","build:cdn":"LIB_FORMAT=iife vite build -c vite.lib.config.ts","build:lib":"vite build -c vite.lib.config.ts","typecheck":"tsc -b","build:site":"vite build","format:check":"prettier --check \"src/**/*.{ts,tsx,css}\" \"*.{ts,json,md,html}\""},"_npmUser":{"name":"localhostov","email":"localhostov@gmail.com"},"jsdelivr":"./dist/graphiplay.min.js","prettier":"./prettier.json","repository":{"url":"git+https://github.com/AnimaruTeam/graphiplay.git","type":"git"},"description":"Embeddable GraphQL playground — schema explorer, CodeMirror editor, collections, history. Drop into any page via CDN or use as a React component.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"26.0.0","dependencies":{"dexie":"^4.4.5","motion":"^12.23.0","nanoid":"^5.1.0","graphql":"^16.11.0","effector":"^23.4.4","graphql-ws":"^6.2.1","cm6-graphql":"^0.2.2","lucide-react":"^0.539.0","effector-react":"^23.3.0","@codemirror/lint":"^6.8.0","@codemirror/view":"^6.36.0","@lezer/highlight":"^1.2.0","@codemirror/state":"^6.5.0","@codemirror/search":"^6.5.0","@codemirror/commands":"^6.8.0","@codemirror/language":"^6.11.0","@codemirror/lang-json":"^6.0.2","@codemirror/autocomplete":"^6.18.0","graphql-language-service":"5.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.0","react":"^19.1.0","prettier":"^3.9.6","react-dom":"^19.1.0","typescript":"^5.8.0","@types/react":"^19.1.0","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.1.0","@vitejs/plugin-react":"^4.7.0","@trivago/prettier-plugin-sort-imports":"^6.0.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/graphiplay_0.1.1_1788311572536_0.001196133781410369","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@animaru/graphiplay","version":"0.2.0","description":"Embeddable GraphQL playground — schema explorer, CodeMirror editor, collections, history. Drop into any page via CDN or use as a React component.","license":"MIT","author":"Animaru","repository":{"type":"git","url":"git+https://github.com/AnimaruTeam/graphiplay.git"},"homepage":"https://github.com/AnimaruTeam/graphiplay#readme","bugs":{"url":"https://github.com/AnimaruTeam/graphiplay/issues"},"publishConfig":{"access":"public"},"type":"module","keywords":["graphql","playground","graphiql","ide","codemirror","react"],"main":"./dist/graphiplay.js","module":"./dist/graphiplay.js","types":"./dist/lib.d.ts","unpkg":"./dist/graphiplay.min.js","jsdelivr":"./dist/graphiplay.min.js","exports":{".":{"types":"./dist/lib.d.ts","import":"./dist/graphiplay.js","default":"./dist/graphiplay.js"},"./graphiplay.css":"./dist/graphiplay.css","./dist/*":"./dist/*","./package.json":"./package.json"},"sideEffects":["**/*.css"],"prettier":"./prettier.json","peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@codemirror/autocomplete":"^6.18.0","@codemirror/commands":"^6.8.0","@codemirror/lang-json":"^6.0.2","@codemirror/language":"^6.11.0","@codemirror/lint":"^6.8.0","@codemirror/search":"^6.5.0","@codemirror/state":"^6.5.0","@codemirror/view":"^6.36.0","@lezer/highlight":"^1.2.0","cm6-graphql":"^0.2.2","dexie":"^4.4.5","effector":"^23.4.4","effector-react":"^23.3.0","graphql":"^16.11.0","graphql-language-service":"5.7.0","graphql-ws":"^6.2.1","lucide-react":"^0.539.0","motion":"^12.23.0","nanoid":"^5.1.0"},"devDependencies":{"@trivago/prettier-plugin-sort-imports":"^6.0.2","@types/react":"^19.1.0","@types/react-dom":"^19.1.0","@vitejs/plugin-react":"^4.7.0","prettier":"^3.9.6","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.0","vite":"^7.1.0","vite-plugin-dts":"^5.0.3"},"scripts":{"dev":"vite","build":"pnpm typecheck && pnpm build:lib && pnpm build:cdn","build:lib":"vite build -c vite.lib.config.ts","build:cdn":"LIB_FORMAT=iife vite build -c vite.lib.config.ts","build:site":"vite build","preview":"vite preview","typecheck":"tsc -b","format":"prettier --write \"src/**/*.{ts,tsx,css}\" \"*.{ts,json,md,html}\"","format:check":"prettier --check \"src/**/*.{ts,tsx,css}\" \"*.{ts,json,md,html}\""},"_nodeVersion":"26.0.0","_id":"@animaru/graphiplay@0.2.0","dist":{"integrity":"sha512-9jbCD+VYvB3G2TgUBFnBAAIfsRoN8kRBuoB7234brEnClZ21O2ZwwfYJvzvEesCWTnrG2+9pG09dQ/+ydw86hg==","shasum":"70f5cc5ec5cd3a77ae0c751351c5e653c3c79e1d","tarball":"https://registry.npmjs.org/@animaru/graphiplay/-/graphiplay-0.2.0.tgz","fileCount":77,"unpackedSize":14174674,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC0p6hcaKJg6hlQ/t+G8GY0g6+PflJPY04AThZusFQHbgIhALYh9ROSXrLSjE2vXAqkVdWDu//2nt+vOyD8eNNr9MxF"}]},"_npmUser":{"name":"localhostov","email":"localhostov@gmail.com"},"directories":{},"maintainers":[{"name":"localhostov","email":"localhostov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/graphiplay_0.2.0_1788480437666_0.8068140163497308"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T00:51:52.676Z","modified":"2026-09-04T00:07:18.279Z","0.1.0":"2026-09-02T00:51:53.149Z","0.1.1":"2026-09-02T01:12:52.768Z","0.2.0":"2026-09-04T00:07:18.090Z"},"bugs":{"url":"https://github.com/AnimaruTeam/graphiplay/issues"},"author":"Animaru","license":"MIT","homepage":"https://github.com/AnimaruTeam/graphiplay#readme","keywords":["graphql","playground","graphiql","ide","codemirror","react"],"repository":{"type":"git","url":"git+https://github.com/AnimaruTeam/graphiplay.git"},"description":"Embeddable GraphQL playground — schema explorer, CodeMirror editor, collections, history. Drop into any page via CDN or use as a React component.","maintainers":[{"name":"localhostov","email":"localhostov@gmail.com"}],"readme":"# Graphiplay\n\nAn embeddable GraphQL playground. Schema explorer, editor with autocompletion, collections, history,\nsubscriptions — everything stored locally in the browser. Light and dark themes, follows the system\nby default.\n\nDrop it into any page with two CDN tags, or use it as a React component.\n\n**[Live demo](https://animaruteam.github.io/graphiplay/)** — the standalone page, opened on the\nAnimaru API. Point it at your own URL from the endpoint bar.\n\n## CDN\n\n```html\n\n
\n\n\n\n```\n\nThe script is self-contained (React included) and exposes a global `Graphiplay`. `mount()` returns\n`{ unmount() }`. The playground fills whatever box you give it — set a height on the container.\n\n## npm / React\n\n```sh\nnpm i @animaru/graphiplay\n```\n\n```tsx\nimport { Graphiplay } from \"@animaru/graphiplay\"\nimport \"@animaru/graphiplay/graphiplay.css\"\n\n;
\n \n
\n```\n\n`react` / `react-dom` 18 or 19 are peer dependencies. `mount()` is exported here too for apps\nwithout React.\n\n## Options\n\nAll optional. Anything not given comes from what the user persisted last time.\n\n| Option | Type | Meaning |\n| ------------------ | ------------------------------- | ------------------------------------------------------------------------------------ |\n| `endpoint` | `string` | GraphQL URL to open. Overrides the last used one. |\n| `headers` | `Record` | Persistent headers for that endpoint — sent with every request and introspection. |\n| `wsUrl` | `string` | WebSocket URL for subscriptions (defaults to the endpoint with a `ws(s)://` scheme). |\n| `theme` | `\"light\" \\| \"dark\" \\| \"system\"` | Overrides the persisted theme choice. |\n| `defaultQuery` | `string` | Opened in a tab when the workspace has no operations yet. |\n| `defaultVariables` | `string` | JSON for `defaultQuery`. |\n| `globalShortcuts` | `boolean` | Fire ⌘K / ⌘↵ / ⌘B anywhere on the page. Off by default: only while focus is inside. |\n\nGood to know:\n\n- **One playground per page.** Two instances would share state.\n- **Nothing leaks into the host page.** Styles, theme and overlays stay inside the playground's\n container.\n- **Fonts.** Designed for Inter + JetBrains Mono, falls back to system fonts. Add a Google Fonts\n link for the intended look.\n- **Storage is per origin.** Tabs, collections and history for an endpoint are shared between every\n page on the same origin that embeds the playground.\n\n## Features\n\n- **Endpoint bar** — URL with live schema status, saved endpoints, one‑click re‑introspection.\n- **Workspaces per URL** — tabs, collections, headers, subscription settings and the cached schema\n belong to the endpoint URL. Switching URL swaps the whole workspace; switching back restores it.\n- **Headers** — persistent per endpoint, sent with every request and introspection; per‑tab headers\n override them for a single request. Both support bulk JSON editing.\n- **Schema explorer** — browse root types, objects, inputs, enums, interfaces, unions, scalars;\n drill into fields and arguments, search across the schema, view the whole SDL.\n- **Operations panel** — every query / mutation / subscription with a generated preview; insert into\n the editor or open in a new tab.\n- **Editor** — GraphQL autocompletion, linting, folding, hover docs (`Esc` dismisses them),\n prettify, multi‑operation picker. Operation keywords and type names are colour‑coded by kind.\n Variables are type‑checked against the query: keys the running operation doesn't declare are\n greyed out, missing or invalid values flagged with quick fixes.\n- **Tabs** — drag to reorder, drag onto a collection to save, right‑click for run / rename /\n duplicate / save / close.\n- **Response** — highlighted JSON, HTTP status, duration, size, and a Headers tab with everything\n the server sent back. Subscriptions stream live over WebSocket or SSE.\n- **Collections** — save operations (query + variables + headers) into color‑coded collections; tabs\n stay linked so `⌘S` updates the saved item.\n- **History** — the last 200 requests, grouped by day, one click to replay.\n- **Command palette** (`⌘K`) — jump to operations, types, collections, tabs and actions.\n- **Responsive** — editor and response stack when the workspace is narrow; on phones panels move to\n a bottom bar, modals become bottom sheets.\n\n## Shortcuts\n\n| Keys | Action |\n| ----------------- | --------------------------------------- |\n| `⌘/Ctrl ↵` | Run / stop |\n| `⌘/Ctrl S` | Save to collection / update linked item |\n| `⌘/Ctrl K` | Command palette |\n| `⌘/Ctrl B` | Toggle sidebar |\n| `Shift Alt F` | Prettify |\n| `Alt T` / `Alt W` | New / close tab |\n| `Alt Space` | Suggest fields & types at the cursor |\n","readmeFilename":""}