graphiql 4.1 blog

Author: dimaMachina

.prettierignore

@@ -4,4 +4,5 @@ pnpm-lock.yaml
 !src/pages/blog/2024-04-11-announcing-new-graphql-website/index.mdx
 !src/pages/blog/2024-08-15-graphql-local-initiative.mdx
 !src/pages/community/foundation/community-grant.mdx
+!src/pages/blog/2025-06-01-graphiql-4/index.mdx
 *.jpg

src/pages/blog/2025-06-01-graphiql-4/index.mdx

@@ -0,0 +1,75 @@
+---
+title: GraphiQL 4.1 is Released
+tags: [announcements, grants]
+date: 2025-06-01
+byline: Dimitri Postolov
+---
+
+import { Callout } from "nextra/components"
+
+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](https://github.com/graphql/graphiql/issues/2326)
+> 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](https://react.dev/learn/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](https://zustand-demo.pmnd.rs)
+
+### GraphiQL 5 _(Coming Soon)_
+
+- Migration from Codemirror to
+  [Monaco Editor](https://github.com/microsoft/monaco-editor)
+- Replacing `codemirror-graphql` with
+  [`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)
+- Support for comments in **Variables** and **Headers** editors
+- New examples: **GraphiQL x Vite** and **GraphiQL x Next.js**
+
+<Callout type="info">
+  For the full roadmap, check out the [tracking issue on
+  GitHub](https://github.com/graphql/graphiql/issues/3874).
+</Callout>
+
+## How to Update
+
+Follow the step-by-step guide in our
+[GraphiQL 4 migration documentation](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md).
+
+## What's Next?
+
+The development of **GraphiQL 5** is already complete! You can checkout the last
+[Live Preview](https://deploy-preview-3234--graphiql-test.netlify.app).
+
+The official release is just around the corner — arriving later **this month**!
+
+## Stay Connected
+
+Follow me, **Dima Machina**, on [𝕏](https://x.com/dimaMachina_) and
+[GitHub](https://github.com/dimaMachina) to stay up to date with the latest
+updates!