VS Code extension

Powerful GraphQL tools that live in your editor.

A full GraphQL playground in a tab. Point it at any endpoint, run operations, and read the response without leaving VS Code.
Autocomplete and error-checking in your files. Autocomplete and inline diagnostics in your .graphql files based on your schema.
Run straight from your source. A Run button sits above every operation in your files, so one click sends it to the playground.

Install from the Marketplace View source

MIT licensed· Works with any endpoint· No account, no telemetry

GraphQL Playground running a query against the countries API inside VS Code, showing the schema explorer, query editor, and response viewer side by side.

In the playground

Everything you need in the tab.

The playground itself is a complete GraphQL client, point it at an endpoint and go.

Rich query editor

CodeMirror 6 with syntax highlighting, bracket matching, folding, and schema-backed autocomplete.

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, and enums, and search the type map, GraphiQL-style.

Variables & headers

A JSON variables editor and a toggleable key/value headers table for auth tokens and tracing headers.

Environments

Named environments each with its own URL and headers, switchable from the toolbar, per-user or per-project.

Runs without CORS

Requests go through the extension host, so responses aren't blocked by the browser's CORS policy.

In-editor autocomplete

Schema-backed IntelliSense, everywhere.

.graphql / .gql files get the same completions as the playground's query editor: fields, types, arguments, and enum values driven by whichever schema is currently loaded.

country.graphql
query Country {
  country(code: "BR") {
    name
  }
}

repos.graphql
query Repos {
  viewer {
    login
    favouriteColor       # not on Viewer
    repositories(first: 10) {
      ...RepoList
    }
  }
}

Inline diagnostics

Errors, highlighted as you type.

.graphql / .gql files are validated against whichever schema is currently loaded in the playground. Unknown fields, types, and other schema errors are underlined the moment you write them.

Run from the source

A ▶ Run above every operation.

A Run CodeLens appears above every operation in .graphql / .gql files and in gql`` tagged templates inside your .ts, .tsx, .js, and .jsx. Click it and the operation is sent to the playground and executed immediately.

user-profile.graphqlRun in Playground
query profile($id: ID!) {
  user(id: $id) {
    name
    avatarUrl
    ...RepoList   // defined in another file
  }
}

Stop switching windows to run GraphQL.

Install from the Marketplace or view the source on GitHub →