GraphQL Playground for VS Code

A 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.

Install from the VS Code Marketplace →

Features

• Rich query editor — CodeMirror 6 with GraphQL syntax highlighting, bracket matching, folding, and schema-backed autocomplete (Ctrl+Space, or Option+\`` / Option+Ion macOS since the OS reservesCtrl+Space` for input source switching).
• 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.).
• Environments — define named environments (e.g. Staging, Production), each with its own URL and headers, and switch between them from the toolbar. Store them per-user or scope them to the current project.
• Run from the source — a ▶ Run CodeLens appears above every operation in .graphql/.gql files and in gql...`` tagged templates inside .ts/.tsx/.js/.jsx, sending it to the playground and executing it immediately. Fragments spread from elsewhere in the workspace (or interpolated from another gql template via ${...}) are pulled in automatically so the query runs standalone.
• Inline diagnostics — .graphql/.gql files are validated against whichever schema is currently loaded in the playground, squiggling unknown fields, types, and other schema errors as you type. A workspace-wide index of fragment definitions (kept live as files change) resolves fragments spread from other files, so a query isn't flagged as broken just because its fragments live elsewhere.
• In-editor autocomplete — .graphql/.gql files get the same schema-backed IntelliSense as the playground's query editor: field, type, argument, and enum-value suggestions (Ctrl+Space), driven by whichever schema is currently loaded in the playground. Also suggests fragment spreads from elsewhere in the workspace, via the same fragment index used for diagnostics and the ▶ Run CodeLens.
• **.graphqlconfig / graphql-config discovery** — endpoints already defined in a project's .graphqlconfig, .graphqlrc, or graphql.config.js are picked up automatically and offered as environments, so you don't have to duplicate them into VS Code settings.
• Response viewer — pretty-printed JSON with HTTP status, timing, size, in-response search, and collapse/expand-all for deeply nested payloads.
• Requests run from the extension host, so CORS never gets in the way.
• Multiple tabs, history of the last 50 requests (filterable, with per-entry or bulk delete), and full state persistence across reloads.
• Collections — save queries into named collections from the Activity Bar sidebar, Postman-style. Saved queries keep their endpoint, variables, headers, and environment, and are scoped to the current workspace.
• Open .graphql/.gql files directly — right-click a file to load its contents into a new playground tab.
• Import from cURL — paste a cURL command (e.g. copied from Chrome DevTools' "Copy as cURL") via the Import cURL toolbar button, and it's parsed into a new tab: URL, method, headers, and the GraphQL query/variables pulled out of the JSON body or, for GET requests, the query/variables URL parameters.

Usage

1. Press Cmd/Ctrl+Alt+G, or run GraphQL: Open Playground from the Command Palette.
2. Enter a GraphQL endpoint (a public demo API is pre-filled). The schema is introspected automatically.
3. Write your operation and press **Cmd/Ctrl+Enter** to run it.
4. Toggle Variables / Headers below the editor; switch the right pane between Response, Docs, and History.
5. Right-click a .graphql/.gql file (in the editor or Explorer) and choose Open in GraphQL Playground to load its contents into a new tab.

Keyboard shortcuts

Cmd/Ctrl+Alt+G opens the playground from anywhere in VS Code. The rest work while the playground webview has focus:

| Shortcut | Action | | ------------------------------------------------ | --------------------------------------------------------------- | | Cmd/Ctrl+Enter | Run the current operation | | Cmd/Ctrl+1–9 | Switch to tab 1–9 | | Cmd/Ctrl+T | New tab | | Cmd/Ctrl+W | Close the active tab | | Cmd/Ctrl+S | Save the current query to a collection | | Shift+Alt+F | Prettify the query | | Cmd/Ctrl+Shift+D | Jump to the Docs pane | | Cmd/Ctrl+Shift+H | Jump to the History pane | | Ctrl+Space (Option+\`` / Option+Ion macOS) | Autocomplete (query/variables editor) | |Cmd/Ctrl+F | Search within the focused editor, including the response viewer | |Ctrl+Alt+[/Ctrl+Alt+]` | Collapse / expand all in the focused editor |

Collapse/expand-all and response search are also available as buttons above the response viewer, and every shortcut is echoed in its button's tooltip.

Environments

Pick ⚙ Manage Environments… from the environment dropdown in the toolbar (or the Environments tab in the right pane) to create named environments — e.g. Staging and Production — each with its own endpoint URL and headers. Choose This Project to scope an environment to the workspace you currently have open (written to .vscode/settings.json), or All Projects to make it available everywhere (written to User Settings). Both lists are combined in the picker.

Selecting an environment from the toolbar dropdown applies its URL and headers to the current tab immediately; it's a one-time copy, so editing the tab afterwards doesn't change the saved environment, and editing the saved environment later doesn't retroactively update tabs — reselect it to pick up changes. If a tab's URL or headers no longer match the environment it was last set to, a banner appears below the toolbar ("Modified from Env") with a Reset link to reapply the environment's original values.

GraphQL config file discovery

If your project already has a graphql-config file, its endpoints show up automatically in the environment picker — no need to duplicate them into graphqlPlayground.environments. Per workspace folder, the extension looks for the first of .graphqlrc, .graphqlrc.json, .graphqlconfig, .graphqlconfig.json, .graphqlrc.js, .graphqlrc.cjs, graphql.config.js, graphql.config.cjs, or a "graphql" field in package.json, and re-reads it whenever the file changes.

Two shapes are recognized:

Legacy .graphqlconfig (extensions.endpoints):

{
  "schema": "schema.graphql",
  "extensions": {
    "endpoints": {
      "default": "http://localhost:3000/graphql",
      "dev": {
        "url": "https://dev.example.com/graphql",
        "headers": { "Authorization": "Bearer ${env:DEV_TOKEN}" }
      }
    }
  }
}

Modern .graphqlrc.json / graphql.config.js (schema as a URL pointer):

{
  "schema": {
    "https://api.example.com/graphql": {
      "headers": { "Authorization": "Bearer ${env:API_TOKEN}" }
    }
  }
}

A plain URL string also works for schema ("schema": "https://api.example.com/graphql"), and multi-project configs (a top-level projects map) are flattened into project/endpointName entries.

Discovered endpoints appear in the environment picker and the Environments tab tagged with their source filename instead of settings.json — they're read-only from the playground UI, so edit the config file itself to change them. URL/header values support the same ${env:VAR_NAME}, ${secret:NAME}, and ${workspaceFolder} substitution as hand-written environments (see Secrets & variable substitution).

.js/.cjs config files are loaded with Node's require() in the extension host — the same trust model VS Code already extends to webpack.config.js, jest.config.js, etc. in an opened workspace. YAML config files (.graphqlrc.yml/.yaml) aren't supported yet; use a JSON or JS config instead.

Secrets & variable substitution

URL and header values (in defaultEndpoint/defaultHeaders and in each environment) are resolved at request time and support:

• ${env:VAR_NAME} — an environment variable from the process VS Code is running in.
• ${workspaceFolder} — the path of the first workspace folder.
• ${secret:NAME} — a token stored in VS Code's encrypted SecretStorage, set via GraphQL: Set Environment Token from the Command Palette (use GraphQL: Delete Environment Token to remove one).

This means a token can be Authorization: Bearer ${env:PROD_TOKEN} or Bearer ${secret:PROD_TOKEN} instead of a literal secret sitting in .vscode/settings.json. The webview only ever sees the unresolved ${...} placeholder — substitution happens in the extension host right before the request is sent.

Configuration

Each setting can be set in User Settings for a global default across all projects, or in Workspace Settings (.vscode/settings.json) to scope it to the project you currently have open — the workspace value wins for defaultEndpoint/defaultHeaders/requestTimeoutMs, while environments lists from both scopes are merged. New tabs pick up the current values; tabs already open are unaffected.

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. Alternatively, from the command line:

npm run dev           # builds, then launches an Extension Development Host (needs the `code` CLI)
npm run dev -- <path> # same, but opens <path> as the workspace instead of this repo

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