GraphQL Playground for VS Code
An Altair-style GraphQL client that lives inside a
VS Code editor tab. Write queries with schema-aware autocomplete, run them, and
inspect responses — without leaving your editor.
Features
- Rich query editor — CodeMirror 6 with GraphQL syntax highlighting,
bracket matching, folding, and schema-backed autocomplete (
Ctrl+Space).
- Schema introspection — point at any endpoint and the extension pulls the
schema for autocomplete and the docs explorer.
- Docs explorer — browse root types, drill into fields/arguments/enums, and
search the type map, GraphiQL-style.
- Variables & headers — JSON variables editor and a toggleable key/value
headers table (auth tokens, tracing headers, etc.).
- Response viewer — pretty-printed JSON with HTTP status, timing, and size.
- Requests run from the extension host, so CORS never gets in the way.
- Multiple tabs, history of the last 50 requests, and full state
persistence across reloads.
Usage
- Press
Cmd/Ctrl+Alt+G, or run GraphQL: Open Playground from the Command
Palette.
- Enter a GraphQL endpoint (a public demo API is pre-filled). The schema is
introspected automatically.
- Write your operation and press
Cmd/Ctrl+Enter to run it.
- Toggle Variables / Headers below the editor; switch the right pane
between Response, Docs, and History.
Configuration
| Setting |
Default |
Description |
graphqlPlayground.defaultEndpoint |
https://countries.trevorblades.com/ |
Endpoint pre-filled in new tabs. |
graphqlPlayground.requestTimeoutMs |
30000 |
Abort a request after this many ms. |
Development
npm install # install deps (approve esbuild's build script if prompted)
npm run build # bundle extension + webview into out/
npm run watch # rebuild on change
Then press F5 in VS Code to launch an Extension Development Host, and run
GraphQL: Open Playground.
Packaging
npm run vsix # produces graphql-playground-<version>.vsix (needs @vscode/vsce)
Architecture
src/extension.ts Extension host: command + webview panel, performs HTTP
requests (fetch) so responses aren't blocked by CORS,
persists state in globalState.
webview/main.ts The UI app: tabs, toolbar, editors, response/docs/history.
webview/editors.ts CodeMirror 6 setup (GraphQL + JSON) themed from VS Code vars.
webview/docs.ts Schema documentation explorer.
The webview and host communicate over postMessage. The webview never makes
network calls itself — it asks the host to execute / introspect.
License
MIT
