📣 GraphQLConf 2025 • Sept 08-10 • Amsterdam • Early bird tickets available & sponsorship opportunities open • Learn more
Blog
2025-06-01-graphiql-4

GraphiQL 4.1 is Released

by Dimitri Postolov
announcementsgrants

I’m thrilled to announce the release of GraphiQL 4.1! 🎉

Thanks to funding from the GraphQL Foundation, I’m working on migrating GraphiQL to the Monaco code editor — a long-awaited update that’s been on our roadmap for years.

In fact, the original issue was opened over three years ago!

Roadmap

Migrating to the Monaco editor is a major milestone, and to ensure a smooth transition for everyone, I’ve broken it down into several incremental releases:

GraphiQL 3.9

  • Switched build system from Webpack to Vite
  • Compiled the codebase using the new React Compiler

GraphiQL 4

  • Dropped support for React 16/17
  • Added support for React 19
  • Introduced a refreshed tabs UI
  • New ESM-based CDN examples
  • Deprecated the legacy UMD CDN build

GraphiQL 4.1 (This release)

  • Standalone Doc Explorer plugin
  • Standalone History plugin
  • Migrated state management from React context to zustand

GraphiQL 5 (Coming Soon)

  • Migration from Codemirror to Monaco Editor
  • Replacing codemirror-graphql with monaco-graphql
  • Support for comments in Variables and Headers editors
  • New examples: GraphiQL x Vite and GraphiQL x Next.js

For the full roadmap, check out the tracking issue on GitHub.

What’s New

GraphiQL 4 serves as a gateway to the upcoming GraphiQL 5, which will be powered by the Monaco editor, the same editor used in VSCode. Upgrading to GraphiQL 4 is an essential step if you’re already using React 19.

We’ve extracted Doc Explorer and History into standalone plugins, allowing full customization of GraphiQL’s built-in plugins in the GraphiQL 5.

Under the hood, we’ve replaced React context with zustand, making the internal state management simpler and more maintainable, and enabling faster iteration on new features.

Time to Say Goodbye to UMD Builds!

With React 19, UMD builds have been removed. The React team now recommends using ESM-based CDNs like esm.sh.

We’ve updated the CDN example to show how to use GraphiQL with esm.sh.

How to Update

Follow the step-by-step guide in our GraphiQL 4 migration documentation.

What’s Next?

The development of GraphiQL 5 is almost complete! You can checkout the last Live Preview.

The official release is just around the corner — arriving later this month!

Stay Connected

Follow me, Dima Machina, on 𝕏 and GitHub to stay up to date with the latest updates!