Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>GraphQL EditorNew to Visual Studio Code? Get it now.
GraphQL Editor

GraphQL Editor

Aexol

|
56 installs
| (1) | Free
The best GraphQL editor for VSCode
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

GraphQL Editor for VS Code

A powerful VS Code extension that brings the GraphQL Visual Editor into your editor. Turn your GraphQL schemas into interactive graph diagrams while editing code.

Gif Demo

Features

  • Interactive graph: Visualize types, fields, and relationships.
  • Click-to-navigate: Click schema code to focus the matching node/edge in the graph (and vice versa).
  • In‑editor editing: Modify schemas and queries directly in VS Code.
  • Smart tooling: Auto‑complete and schema validation while you type.
  • Auto‑generated docs: Create basic documentation stubs from your schema; easy to fill out, including with AI assistance.
  • Live preview: Real‑time, interactive diagrams while you edit.
  • Seamless integration: Works with existing GraphQL projects.

Usage

  • Open a .graphql or .gql file in VS Code.
  • Explore the visual graph and edit your schema/queries in real time.
  • Click in the code view to highlight and jump to the corresponding element in the graph (and vice versa).
  • Generate basic docs from your schema and fill them in; optionally use your AI assistant to complete descriptions.

License

This extension is licensed under the MIT License.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft