Get started

sandywp / plugins / wpgraphql-ide

WPGraphQL IDE

Modern GraphQL IDE for WPGraphQL — schema-aware editor, execution history, saved queries, and a public endpoint mode.

Launch a sandbox with this plugin → No signup.
Ready in seconds.

v5.5.0 1,000+ installs WP 6.1+ PHP 7.4+

By Joe Fusco · Read the readme on WordPress.org

your-sandbox.sandywp.com/wp-admin
WPGraphQL IDE running inside a SandyWP sandbox

What you get inside

3 screens

  • Schema-aware autocomplete with inline hover documentation as you build a query.

  • Browse the schema in the Docs explorer — search types and fields, and Cmd-click from the editor to jump straight to a type.

  • Per-user execution history alongside clear, inline error reporting, with tracing, query log, and response-header tabs.

screenshot 1 of 3
Schema-aware autocomplete with inline hover documentation as you build a query.

Schema-aware autocomplete with inline hover documentation as you build a query.

About this plugin

WPGraphQL IDE is a next-generation query editor for WPGraphQL, built on WordPress’s component library and CodeMirror 6. It replaces the bundled legacy GraphiQL interface with a faster, more extensible IDE that feels native to wp-admin.

Three ways to open the IDE:

  • Dedicated page at wp-admin/admin.php?page=graphql-ide
  • Drawer — slide-up panel triggered from the admin bar, available on every wp-admin and front-end page
  • Public endpoint mode (opt-in) — visiting the GraphQL endpoint URL in a browser renders the IDE shell instead of returning JSON. Anonymous visitors get a read-only schema browser; signed-in administrators get the full editor.

Editor features:

  • Multi-tab editor with auto-save and overflow tab dropdown
  • Schema-aware autocomplete, hover-doc tooltips, and inline lint warnings (powered by CodeMirror 6 + cm6-graphql)
  • Cmd-click navigation from any field, type, or argument straight to the Docs Explorer
  • Response panes: JSON viewer, table view, status code / duration / size / resolver-count badges, request tracing, query log, N+1 detection
  • Variables and headers editors with their own autocomplete
  • Per-document settings (description, alias names, max-age cache hint, allow/deny)
  • Execution history persisted to localStorage, scoped per WordPress user and IDE context — available to anonymous public-endpoint visitors too
  • Saved Queries panel with personal collections and share links (when WPGraphQL Smart Cache is also active)
  • Full keyboard support: Cmd+Enter to execute, Ctrl+Shift+P to prettify, arrow keys to switch tabs

What’s new in 5.0:

  • Rebuilt UI on @wordpress/components and @wordpress/data. The legacy GraphiQL wrapper is gone — see the Upgrade Notice if you have customizations.
  • Smart Cache integration. Saved documents now live in wp-graphql-smart-cache‘s graphql_document post type — one canonical primitive for the WPGraphQL ecosystem. The IDE works standalone when Smart Cache isn’t installed; Saved Queries / Document Settings / share links light up when it is.
  • Three render modes (above), each individually configurable.
  • Schema-typed data layer. Document and collection operations run through WPGraphQL itself instead of the WordPress REST API.
  • Full internationalization. Every UI string passes through @wordpress/i18n under the wpgraphql-ide text domain.
  • Auto-upgrade from 4.x. Open tabs and query history saved by the legacy GraphiQL UI migrate forward on first 5.0 load.

For the complete breaking-change list and 4.x → 5.0 migration guide, see UPGRADE-5.0.md in the plugin or the project’s GitHub releases.

Privacy Policy

WPGraphQL IDE uses Appsero SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster and make product improvements.

Appsero SDK does not gather any data by default. The SDK only starts gathering basic telemetry data when a user allows it via the admin notice.

When you opt in, each telemetry request is sent to Appsero and a duplicate is sent in a non-blocking request to WPGraphQL-operated infrastructure at https://telemetry.wpgraphql.com (the same categories of data as described for Appsero below).

Learn more about how Appsero collects and uses this data.

Questions

How do I open the IDE?

The plugin adds three entry points: a dedicated admin page under GraphQL → GraphQL IDE, a slide-up drawer triggered from the GraphQL IDE link in the admin bar (works on every wp-admin and front-end page), and an opt-in public endpoint mode that renders the IDE when you visit the GraphQL endpoint URL in a browser.

Do I need WPGraphQL Smart Cache?

No — the IDE works as a standalone GraphQL client without it. Smart Cache is optional but unlocks the saved-document features: the Saved Queries panel, personal collections, share links, and the Document Settings drawer. Install Smart Cache and the IDE detects it automatically; no configuration needed.

What changed in 5.0?

5.0 rebuilds the UI on @wordpress/components and CodeMirror 6, moves saved-document storage onto Smart Cache’s graphql_document post type, and ships full internationalization. Extension authors should consult UPGRADE-5.0.md (bundled with the plugin) — several legacy hooks were renamed, and a few were briefly removed and then restored with improved behavior. Open tabs and query history saved by 4.x are migrated forward automatically on first 5.0 load.

How do I enable the public endpoint?

Under GraphQL → IDE Settings, check Public IDE at GraphQL endpoint. Once enabled, browser visits to the GraphQL endpoint URL (with an HTML Accept header) render the IDE shell instead of returning JSON. API clients (curl, fetch with Content-Type: application/json, GraphQL clients in general) keep getting JSON as before. Optionally enable Allow sign-in on the public IDE to surface a sign-in prompt to anonymous visitors.

Where can I find the non-compressed JavaScript and CSS source code?

The non-compressed source code for the JavaScript and CSS files is available in the following directories:

You can view or download the source code directly from the GitHub repository.

What are the major dependencies?

  • CodeMirror 6 (codemirror.net) — the editor surface, with cm6-graphql for schema-aware GraphQL highlighting + autocomplete
  • @wordpress/components and @wordpress/data — UI primitives and state management
  • @graphiql/toolkit — fragment-merging utilities reused from the GraphiQL project
  • vaul (github.com/emilkowalski/vaul) — the slide-up drawer
  • graphql-js (github.com/graphql/graphql-js) — the underlying GraphQL parser

Where do I report bugs or request features?

Open an issue at github.com/wp-graphql/wp-graphql. For security issues, please follow the security policy instead of filing a public issue.

How does WPGraphQL IDE handle privacy and telemetry?

WPGraphQL IDE uses the Appsero SDK to collect telemetry data only after user consent. This helps improve the plugin while respecting user privacy. When telemetry is enabled, the same payloads are also mirrored to WPGraphQL-operated infrastructure at https://telemetry.wpgraphql.com.

sandywp / also on the shelf

Try another plugin

  • WPGraphQL

    4.9 · 30K+ installs

    WPGraphQL adds a flexible and powerful GraphQL API to WordPress, enabling efficient querying and interaction with your site's…

    Try demo

  • Faust.js

    5.0 · 1K+ installs

    Faust.js™ transforms your traditional WordPress installation into a flexible headless CMS.

    Try demo

  • CoCart – Headless REST API for WooCommerce

    4.9 · 900+ installs

    Ship your headless WooCommerce storefront faster. CoCart is the REST API built for Next.js, React, Vue, and any modern frontend —…

    Try demo

Spin up a real WordPress site in seconds.

Test plugins, build a demo, hand a client a link — then squash it and start again. No local setup, no Docker.

Create a site → See pricing