1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[305],{7250:function(e,i,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/2025-07-17-graphiql-5",function(){return s(63966)}])},63966:function(e,i,s){"use strict";s.r(i),s.d(i,{default:function(){return k},useTOC:function(){return c}});var r=s(52676),n=s(92937),t=s(45043),l=s(79428),a={src:"/_next/static/media/custom-rules-example.bef2e348.png",height:1290,width:2796,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAABlBMVEUrNEUkLT7uaFMLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFElEQVR4nGNgYGSAAEYEA8qEMhgBANIADffv69kAAAAASUVORK5CYII=",blurWidth:8,blurHeight:4},h=s(67290),d=s(76184),o=s(41751);function c(e){return[{value:"Whatâs New",id:"whats-new",depth:2},{value:"Monaco Editor Migration",id:"monaco-editor-migration",depth:3},{value:"Support for Comments in Variables and Headers Editors",id:"support-for-comments-in-variables-and-headers-editors",depth:3},{value:"UMD Builds Are Removed",id:"umd-builds-are-removed",depth:3},{value:"Examples Update",id:"examples-update",depth:3},{value:"Customizable Default Plugins",id:"customizable-default-plugins",depth:3},{value:"Removing All Default Plugins",id:"removing-all-default-plugins",depth:4},{value:"Adding Plugins While Keeping Defaults",id:"adding-plugins-while-keeping-defaults",depth:4},{value:"Removed Props",id:"removed-props",depth:3},{value:"Additional Changes",id:"additional-changes",depth:3},{value:"How to Update",id:"how-to-update",depth:2},{value:"Setup Monaco Workers",id:"setup-monaco-workers",depth:3}]}function p(e,i){throw Error("Expected "+(i?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var k=(0,n.c)(function(e){let{toc:i=c(e)}=e,s={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",mark:"mark",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return h.m||p("$Tabs",!1),h.m.Tab||p("$Tabs.Tab",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsxs)(s.p,{children:["The GraphQL Foundation offers ",(0,r.jsx)(s.a,{href:"/foundation/community-grant",children:"Community Grants"}),"\nto help incentivize key technical and community initiatives. As part of the\ngrant, applicants commit to write a blog post report describing their work and\nits impact on the GraphQL community. The following report was written by grant\nrecipient Dimitri Postolov in June 2025, having completed his project to\nrelease Monaco support in GraphiQL. The effort to add Monaco support to\nGraphiQL was\n",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/issues/1445",children:"started over five years ago"}),"\nand we are beyond excited to see it finally reach fruition!"]}),"\n"]}),"\n",(0,r.jsxs)("figure",{className:"mt-6",children:[(0,r.jsxs)("video",{autoPlay:!0,muted:!0,loop:!0,playsInline:!0,style:{maxWidth:"100%",borderRadius:"0.5rem"},children:[(0,r.jsx)("source",{src:"/videos/graphiql5.webm",type:"video/webm"}),(0,r.jsx)(s.p,{children:"Your browser does not support the video tag."})]}),(0,r.jsx)("figcaption",{className:"mt-2 text-center",children:(0,r.jsx)(s.a,{href:"https://graphql.org/swapi-graphql/",children:"GraphiQL 5 with Monaco Editor"})})]}),"\n",(0,r.jsxs)(s.p,{children:["This post marks the completion of ",(0,r.jsx)(s.strong,{children:"8 weeks"})," of work on my GraphiQL grant,\nsponsored by the ",(0,r.jsx)(s.strong,{children:"GraphQL Foundation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["Iâm thrilled to announce the release of the all-new ",(0,r.jsx)(s.strong,{children:"GraphiQL 5"}),", powered by\nthe latest version of the ",(0,r.jsx)(s.a,{href:"https://github.com/microsoft/monaco-editor",children:"Monaco editor"}),"! \uD83C\uDF89"]}),"\n",(0,r.jsxs)(s.p,{children:["I also added support for comments in the ",(0,r.jsx)(s.strong,{children:"Variables"})," and ",(0,r.jsx)(s.strong,{children:"Headers"})," editors.\nThis release is a major step forward."]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/issues/2326",children:"The original issue for integrating the Monaco editor"}),"\nwas opened over ",(0,r.jsx)(s.strong,{children:"3 years ago"}),".",(0,r.jsx)("br",{})," And the\n",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/issues/780",children:"issue requesting comments support in the Variables editor"}),"\nwas opened over ",(0,r.jsx)(s.strong,{children:"6 years ago"}),"!"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["As a primary maintainer of the GraphiQL IDE, I previously led the releases of\nGraphiQL 3 and ",(0,r.jsx)(s.a,{href:"/blog/2025-05-31-graphiql-4",children:"GraphiQL 4"}
1),". This new version marks\nanother exciting milestone in the evolution of the project."]}),"\n",(0,r.jsx)(s.h2,{id:i[0].id,children:i[0].value}),"\n",(0,r.jsx)(s.h3,{id:i[1].id,children:i[1].value}),"\n",(0,r.jsxs)(s.p,{children:["GraphiQL 5 now uses ",(0,r.jsx)(s.a,{href:"https://github.com/microsoft/monaco-editor",children:"Monaco editor"})," as default editor, the same\neditor used in ",(0,r.jsx)(s.a,{href:"https://code.visualstudio.com",children:"VSCode"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["Monaco editor runs heavy language features (like syntax analysis, linting, and\nIntelliSense) in\n",(0,r.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers",children:"Web Workers"}),",\nkeeping the UI smooth and responsive."]}),"\n",(0,r.jsxs)(s.p,{children:["You can now delight your users with identical behavior to Visual Studio Code,\nmeaning intelligent autocompletion, hover tooltips, go to definition, find\nreferences. Iâve also added\n",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql",children:(0,r.jsx)(s.code,{children:"monaco-graphql"})}),"\nintegration in ",(0,r.jsx)(s.strong,{children:"Query"})," and ",(0,r.jsx)(s.strong,{children:"Variables"})," editor."]}),"\n",(0,r.jsx)(d.U,{type:"info",children:(0,r.jsxs)(s.p,{children:["Clicking on a reference in the Query editor now works by holding ",(0,r.jsx)(s.code,{children:"Cmd"})," on\nmacOS or ",(0,r.jsx)(s.code,{children:"Ctrl"})," on Windows/Linux."]})}),"\n",(0,r.jsx)(s.p,{children:"As in VSCode, you can press F1 to see the available commands including features\nsuch as multiple cursors!"}),"\n",(0,r.jsx)(s.h3,{id:i[2].id,children:i[2].value}),"\n",(0,r.jsxs)(s.p,{children:["Thanks to the migration to Monaco Editor, another long-awaited feature has been\nimplemented. The ",(0,r.jsx)(s.strong,{children:"Variables"})," and ",(0,r.jsx)(s.strong,{children:"Headers"})," editors now support comments and\nuse the ",(0,r.jsx)(s.strong,{children:"JSONC"})," language internally."]}),"\n",(0,r.jsxs)(s.p,{children:["In the ",(0,r.jsx)(s.strong,{children:"Variables"})," and ",(0,r.jsx)(s.strong,{children:"Headers"})," payloads, all comments are automatically\nstripped before the request is executed â the content in the editors ",(0,r.jsx)(s.strong,{children:"remains\nunchanged"}),"."]}),"\n",(0,r.jsx)(s.h3,{id:i[3].id,children:i[3].value}),"\n",(0,r.jsx)(s.p,{children:"Previously in GraphiQL 4 UMD builds were marked as deprecated, in GraphiQL 5\nthey were removed completely."}),"\n",(0,r.jsxs)(s.p,{children:["We suggest using ESM-based CDNs like ",(0,r.jsx)(s.a,{href:"https://esm.sh",children:"esm.sh"})," to import GraphiQL in your\nprojects."]}),"\n",(0,r.jsxs)(s.p,{children:["I updated ",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html",children:"GraphiQL CDN example"})," to show how to use GraphiQL with\n",(0,r.jsx)(s.a,{href:"https://esm.sh",children:"esm.sh"})," including how to import and setup workers."]}),"\n",(0,r.jsx)(s.h3,{id:i[4].id,children:i[4].value}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"GraphiQL with Parcel"})," and ",(0,r.jsx)(s.strong,{children:"GraphiQL with Create React App"})," examples were\nremoved."]}),"\n",(0,r.jsxs)(s.p,{children:["In addition to updated ",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html",children:"GraphiQL CDN example"}),", Iâve added 2 new\nexamples\n",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/tree/main/examples/graphiql-vite",children:"GraphiQL with Vite"}),"\nand\n",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/tree/main/examples/graphiql-nextjs",children:"GraphiQL with Next.js and App Router"}),"."]}),"\n",(0,r.jsx)(s.h3,{id:i[5].id,children:i[5].value}),"\n",(0,r.jsx)(s.p,{children:"GraphiQL 5 lets you take full control over the UI by allowing complete\ncustomization of its plugins."}),"\n",(0,r.jsx)(s.h4,{id:i[6].id,children:i[6].value}),"\n",(0,r.jsxs)(s.p,{children:["To remove all default plugins (currently ",(0,r.jsx)(s.strong,{children:"Doc Explorer"})," and ",(0,r.jsx)(s.strong,{children:"History"}),"), set\n",(0,r.jsx)(s.code,{children:"referencePlugin={null}"})," and pass an empty array to the ",(0,r.jsx)(s.code,{children:"plugins"})," prop:"]}),"\n",(0,r.jsx)(s.pre,{icon:o.Dr,tabIndex:"0","data-language":"jsx","data-word-wrap":"",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:"import"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" GraphiQL"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" }"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" from"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"graphiql"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'})]}),"\n",(0,r.jsx)(s.span,{children:" "}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:"const"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#79B8FF"},children:" myPlugins"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:" ="}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:" []"})]}),"\n",(0,r.jsx)(s.span,{children:" "}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:"function"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" App"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"}
1,children:"()"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" return"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:" ("})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" <"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#FF99E0"},children:"GraphiQL"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" referencePlugin"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:"="}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"{"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#F3F4F0"},children:"null"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#9FA88A","--shiki-light-font-style":"italic","--shiki-dark":"#737373","--shiki-dark-font-style":"inherit"},children:" // Removes Doc Explorer plugin"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" plugins"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:"="}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"{"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:"myPlugins"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#9FA88A","--shiki-light-font-style":"italic","--shiki-dark":"#737373","--shiki-dark-font-style":"inherit"},children:" // Removes History plugin"})]}),"\n",(0,r.jsx)(s.span,{children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" />"})}),"\n",(0,r.jsx)(s.span,{children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:" )"})}),"\n",(0,r.jsx)(s.span,{children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"})})]})}),"\n",(0,r.jsx)(d.U,{type:"info",children:(0,r.jsxs)(s.p,{children:["If youâre using a custom Doc Explorer, pass it to the ",(0,r.jsx)(s.code,{children:"referencePlugin"})," prop â\n",(0,r.jsx)(s.strong,{children:"not"})," the ",(0,r.jsx)(s.code,{children:"plugins"})," array. It will be automatically included and always\nrendered first."]})}),"\n",(0,r.jsx)(s.h4,{id:i[7].id,children:i[7].value}),"\n",(0,r.jsxs)(s.p,{children:["If youâre adding custom plugins (e.g. the ",(0,r.jsx)(s.strong,{children:"Explorer"})," plugin) and want to keep\nthe ",(0,r.jsx)(s.strong,{children:"History"})," plugin, you must explicitly include it in the ",(0,r.jsx)(s.code,{children:"plugins"})," array:"]}),"\n",(0,r.jsx)(s.pre,{icon:o.Dr,tabIndex:"0","data-language":"jsx","data-word-wrap":"",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:"import"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" GraphiQL"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" HISTORY_PLUGIN"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" }"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" from"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"graphiql"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:"import"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" explorerPlugin"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" }"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" from"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"@graphiql/plugin-explorer"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'})]}),"\n",(0,r.jsx)(s.span,{children:" "}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:"const"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#79B8FF"},children:" myPlugins"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:" ="}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:" ["}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#79B8FF"},children:"HISTORY_PLUGIN"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" explorerPlugin"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"}
1,children:"()]"})]}),"\n",(0,r.jsx)(s.span,{children:" "}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#F97583"},children:"function"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" App"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"()"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" return"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" <"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#FF99E0"},children:"GraphiQL"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" plugins"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:"="}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"{"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:"myPlugins"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" />"})]}),"\n",(0,r.jsx)(s.span,{children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"})})]})}),"\n",(0,r.jsx)(s.h3,{id:i[8].id,children:i[8].value}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"readOnly"})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"keyMap"})," - to use Vim or Emacs keybindings in Monaco, you can use community\nplugins such as ",(0,r.jsx)(s.a,{href:"https://github.com/brijeshb42/monaco-vim",children:"Monaco Vim"})," or\n",(0,r.jsx)(s.a,{href:"https://github.com/aioutecism/monaco-emacs",children:"Monaco Emacs"})]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"validationRules"})," - use custom GraphQL worker, see\n",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker",children:"Monaco GraphQL docs"})]}),"\n",(0,r.jsxs)("figure",{className:"mt-6",children:[(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.img,{alt:"Example of custom GraphQL validation rules",placeholder:"blur",src:a})}),(0,r.jsx)("figcaption",{className:"mt-2 text-center",children:"Example of custom GraphQL validation rules"})]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h3,{id:i[9].id,children:i[9].value}),"\n",(0,r.jsxs)(s.p,{children:["The shortcut to focus on the Doc Explorer search input is now ",(0,r.jsx)(s.code,{children:"Cmd/Ctrl+Alt+K"}),"\ninstead of the previous ",(0,r.jsx)(s.code,{children:"Cmd/Ctrl+K"}),". This was changed because monaco-editor has\na built-in ",(0,r.jsx)(s.code,{children:"Cmd/Ctrl+K"})," command."]}),"\n",(0,r.jsx)(s.h2,{id:i[10].id,children:i[10].value}),"\n",(0,r.jsxs)(s.p,{children:["Update ",(0,r.jsx)(s.code,{children:"graphiql"})," using your favorite package manager:"]}),"\n",(0,r.jsxs)(h.m,{items:["npm","pnpm","yarn","bun"],storageKey:"selectedPackageManager",children:[(0,r.jsx)(h.m.Tab,{children:(0,r.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"sh","data-word-wrap":"",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"npm"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" i"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" graphiql@latest"})]})})})}),(0,r.jsx)(h.m.Tab,{children:(0,r.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"sh","data-word-wrap":"",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" add"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" graphiql@latest"})]})})})}),(0,r.jsx)(h.m.Tab,{children:(0,r.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"sh","data-word-wrap":"",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"yarn"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" add"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" graphiql@latest"})]})})})}),(0,r.jsx)(h.m.Tab,{children:(0,r.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"sh","data-word-wrap":"",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:"bun"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" add"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#2B5581","--shiki-dark":"#9ECBFF"},children:" graphiql@latest"})]})})})})]}),"\n",(0,r.jsx)(s.h3,{id:i[11].id,children:i[11].value}),"\n",(0,r.jsx)(s.p,{children:"You need to set up Monaco workers in your project:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["For ",(0,r.jsx)(s.strong,{children:"Vite"})," projects you must import:"]}),"\n",(0,r.jsx)(s.pre,{icon:o.Dr,tabIndex:"0","data-language":"js","data-word-wrap":"",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:"import"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"graphiql/setup-workers/vite"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'})]})})}),"\n",(0,r.jsx)(d.U,{type:"info",children:(0,r.jsxs)(s.p,{children:["See ",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/blob/main/examples/graphiql-vite/src/App.jsx",children:"Vite\nexample"}),"."]})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["For Webpack projects such as ",(0,r.jsx)(s.strong,{children:"Next.js"})," you must import:"]}),"\n",(0,r.jsx)(s.pre,{icon:o.Dr,tabIndex:"0","data-language":"js","data-word-wrap":"",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:"import"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"graphiql/setup-workers/webpack"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'})]})})}),"\n",(0,r.jsx)(d.U,{type:"info",children:(0,r.jsxs)(s.p,{children:["See ",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/blob/main/examples/graphiql-nextjs/src/app/page.tsx",children:"Next.js\nexample"}),"."]})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["For ESM-based CDN usages, you must use\n",(0,r.jsxs)(s.a,{href:"https://esm.sh/#web-worker",children:[(0,r.jsx)(s.code,{children:"?worker"})," query"]})," to load the module as a web\nworker:"]}),"\n",(0,r.jsx)(s.pre,{icon:o.Dr,tabIndex:"0","data-language":"js","data-word-wrap":"",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:"import"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" createJSONWorker"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" from"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js"}),(0,r.jsx)(s.mark,{"data-highlighted-chars":"",children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"?worker"})}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:"import"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" createGraphQLWorker"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" from"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"https://esm.sh/monaco-graphql/esm/graphql.worker.js"}),(0,r.jsx)(s.mark,{"data-highlighted-chars":"",children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"?worker"})}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:"import"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:" createEditorWorker"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" from"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js"}),(0,r.jsx)(s.mark,{"data-highlighted-chars":"",children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"?worker"})}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'})]}),"\n",(0,r.jsx)(s.span,{children:" "}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#1976D2","--shiki-dark":"#E1E4E8"},children:"globalThis"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"."}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:"MonacoEnvironment"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#ECFAD1"},children:" ="}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" getWorker"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"("}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#DBF6A2"},children:"_workerId"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:","}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#DBF6A2"},children:" label"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:")"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" switch"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:" ("}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#E1E4E8"},children:"label"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:") "}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"{"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" case"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"json"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" return"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" createJSONWorker"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"}
1,children:"()"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" case"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:' "'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#609A06","--shiki-dark":"#9ECBFF"},children:"graphql"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#9ECBFF"},children:'"'}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:":"})]}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" return"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" createGraphQLWorker"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"()"})]}),"\n",(0,r.jsx)(s.span,{children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{children:[(0,r.jsx)(s.span,{style:{"--shiki-light":"#E10198","--shiki-dark":"#C2F653"},children:" return"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#0E0F0B","--shiki-dark":"#F3F4F0"},children:" createEditorWorker"}),(0,r.jsx)(s.span,{style:{"--shiki-light":"#24292EFF","--shiki-dark":"#CFD3C5"},children:"()"})]}),"\n",(0,r.jsx)(s.span,{children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:" }"})}),"\n",(0,r.jsx)(s.span,{children:(0,r.jsx)(s.span,{style:{"--shiki-light":"#6E7557","--shiki-dark":"#6E7557"},children:"}"})})]})}),"\n",(0,r.jsx)(d.U,{type:"info",children:(0,r.jsxs)(s.p,{children:["See ",(0,r.jsx)(s.a,{href:"https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html",children:"CDN\nexample"}),"."]})}),"\n"]}),"\n"]})]})},"/blog/2025-07-17-graphiql-5",{filePath:"src/pages/blog/2025-07-17-graphiql-5/index.mdx",timestamp:1789481543e3,pageMap:t.v,frontMatter:{title:"GraphiQL 5 Released; Press F1!",tags:["announcements","grants"],date:"2025-07-17",byline:"Dimitri Postolov"},title:"GraphiQL 5 Released; Press F1!"},"undefined"==typeof RemoteContent?c:RemoteContent.useTOC)},76184:function(e,i,s){"use strict";s.d(i,{U:function(){return h}});var r=s(52676),n=s(4814),t=s(41751);let l={default:"\uD83D\uDCA1",error:"\uD83D\uDEAB",info:(0,r.jsx)(t.AV,{className:"_mt-1"}),warning:"â ï¸"},a={default:(0,n.Z)("_border-orange-100 _bg-orange-50 _text-orange-800 dark:_border-orange-400/30 dark:_bg-orange-400/20 dark:_text-orange-300"),error:(0,n.Z)("_border-red-200 _bg-red-100 _text-red-900 dark:_border-red-200/30 dark:_bg-red-900/30 dark:_text-red-200"),info:(0,n.Z)("_border-blue-200 _bg-blue-100 _text-blue-900 dark:_border-blue-200/30 dark:_bg-blue-900/30 dark:_text-blue-200"),warning:(0,n.Z)("_border-yellow-100 _bg-yellow-50 _text-yellow-900 dark:_border-yellow-200/30 dark:_bg-yellow-700/30 dark:_text-yellow-200")};function h({children:e,type:i="default",emoji:s=l[i]}){return(0,r.jsxs)("div",{className:(0,n.Z)("nextra-callout _overflow-x-auto _mt-6 _flex _rounded-lg _border _py-2 ltr:_pr-4 rtl:_pl-4","contrast-more:_border-current contrast-more:dark:_border-current",a[i]),children:[(0,r.jsx)("div",{className:"_select-none _text-xl ltr:_pl-3 ltr:_pr-2 rtl:_pr-3 rtl:_pl-2",style:{fontFamily:'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'},children:s}),(0,r.jsx)("div",{className:"_w-full _min-w-0 _leading-7",children:e})]})}},67290:function(e,i,s){"use strict";let r,n,t;s.d(i,{m:function(){return H}});var l=s(52676),a=s(70517),h=s(14660),d=s(75271),o=s(58341),c=s(1638),p=s(79328),k=s(75264),u=s(5048),x=s(60014),g=s(27620),j=s(37639);function E({onFocus:e}){let i;let[s,r]=(0,d.useState)(!0),n=(i=(0,d.useRef)(!1),(0,p.e)(()=>(i.current=!0,()=>{i.current=!1}),[]),i);return s?d.createElement(j._,{as:"button",type:"button",features:j.x.Focusable,onFocus:i=>{i.preventDefault();let s,t=50;s=requestAnimationFrame(function i(){if(t--<=0){s&&cancelAnimationFrame(s);return}if(e()){if(cancelAnimationFrame(s),!n.current)return;r(!1);return}s=requestAnimationFrame(i)})}}):null}var m=s(67729),y=s(8064),F=s(45646),f=s(37569),b=s(54122);let w=d.createContext(null);function v({children:e}){let i=d.useRef({groups:new Map,get(e,i){var s;let r=this.groups.get(e);r||(r=new Map,this.groups.set(e,r));let n=null!=(s=r.get(i))?s:0;return r.set(i,n+1),[Array.from(r.keys()).indexOf(i),function(){let e=r.get(i);e>1?r.set(i,e-1):r.delete(i)}]}});return d.createElement(w.Provider,{value:i},e)}function C(e){let i=d.useContext(w);if(!i)throw Error("You must wrap your component in a <StableCollection>");let s=d.useId(),[r,n]=i.current.get(e,s);return d.useEffect(()=>n,[]),r}var A=s(68711),_=((r=_||{})[r.Forwards=0]="Forwards",r[r.Backwards=1]="Backwards",r),B=((n=B||{})[n.Less=-1]="Less",n[n.Equal=0]="Equal",n[n.Greater=1]="Greater",n),T=((t=T||{})[t.SetSelectedIndex=0]="SetSelectedIndex",t[t.RegisterTab=1]="RegisterTab",t[t.UnregisterTab=2]="UnregisterTab",t[t.RegisterPanel=3]="RegisterPanel",t[t.UnregisterPanel=4]="UnregisterPanel",t);let I={0(e,i){var s;let r=(0,m.z2)(e.tabs,e=>e.current),n=(0,m.z2)(e.panels,e=>e.current),t=r.filter(e=>{var i;return!(null!=(i=e.current)&&i.hasAttribute("disabled"))}),l={...e,tabs:r,panels:n};if(i.index<0||i.index>r.length-1){let s=(0,y.E)(Math.sign(i.index-e.selectedIndex),{[-1]:()=>1,0:()=>(0,y.E)(Math.sign(i.index),{[-1]:()=>0,0:()=>0,1:()=>1}),1:()=>0});if(0===t.length)return l;let n=(0,y.E)(s,{0:()=>r.indexOf(t[0]),1:()=>r.indexOf(t[t.length-1])});return{...l,selectedIndex:-1===n?e.selectedIndex:n}}let a=r.slice(0,i.index),h=[...r.slice(i.index),...a].find(e=>t.includes(e));if(!h)return l;let d=null!=(s=r.indexOf(h))?s:e.selectedIndex;return -1===d&&(d=e.selectedIndex),{...l,selectedIndex:d}},1(e,i){if(e.tabs.includes(i.tab))return e;let s=e.tabs[e.selectedIndex],r=(0,m.z2)([...e.tabs,i.tab],e=>e.current),n=e.selectedIndex;return e.info.current.isControlled||-1===(n=r.indexOf(s))&&(n=e.selectedIndex),{...e,tabs:r,selectedIndex:n}},2:(e,i)=>({...e,tabs:e.tabs.filter(e=>e!==i.tab)}),3:(e,i)=>e.panels.includes(i.panel)?e:{...e,panels:(0,m.z2)([...e.panels,i.panel],e=>e.current)},4:(e,i)=>({...e,panels:e.panels.filter(e=>e!==i.panel)})},q=(0,d.createContext)(null);function P(e){let i=(0,d.useContext)(q);
1if(null===i){let i=Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(i,P),i}return i}q.displayName="TabsDataContext";let D=(0,d.createContext)(null);function L(e){let i=(0,d.useContext)(D);if(null===i){let i=Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(i,L),i}return i}function G(e,i){return(0,y.E)(i.type,I,e,i)}D.displayName="TabsActionsContext";let S=b.VN.RenderStrategy|b.VN.Static,N=(0,b.yV)(function(e,i){var s,r;let n=(0,d.useId)(),{id:t=`headlessui-tabs-tab-${n}`,disabled:l=!1,autoFocus:k=!1,...j}=e,{orientation:E,activation:w,selectedIndex:v,tabs:_,panels:B}=P("Tab"),T=L("Tab"),I=P("Tab"),[q,D]=(0,d.useState)(null),G=(0,d.useRef)(null),S=(0,g.T)(G,i,D);(0,p.e)(()=>T.registerTab(G),[T,G]);let N=C("tabs"),R=_.indexOf(G);-1===R&&(R=N);let Q=R===v,M=(0,c.z)(e=>{let i=e();if(i===m.fE.Success&&"auto"===w){let e=(0,f.vY)(G.current),i=I.tabs.findIndex(i=>i.current===e);-1!==i&&T.change(i)}return i}),O=(0,c.z)(e=>{let i=_.map(e=>e.current).filter(Boolean);if(e.key===A.R.Space||e.key===A.R.Enter){e.preventDefault(),e.stopPropagation(),T.change(R);return}switch(e.key){case A.R.Home:case A.R.PageUp:return e.preventDefault(),e.stopPropagation(),M(()=>(0,m.jA)(i,m.TO.First));case A.R.End:case A.R.PageDown:return e.preventDefault(),e.stopPropagation(),M(()=>(0,m.jA)(i,m.TO.Last))}if(M(()=>(0,y.E)(E,{vertical:()=>e.key===A.R.ArrowUp?(0,m.jA)(i,m.TO.Previous|m.TO.WrapAround):e.key===A.R.ArrowDown?(0,m.jA)(i,m.TO.Next|m.TO.WrapAround):m.fE.Error,horizontal:()=>e.key===A.R.ArrowLeft?(0,m.jA)(i,m.TO.Previous|m.TO.WrapAround):e.key===A.R.ArrowRight?(0,m.jA)(i,m.TO.Next|m.TO.WrapAround):m.fE.Error}))===m.fE.Success)return e.preventDefault()}),U=(0,d.useRef)(!1),V=(0,c.z)(()=>{var e;U.current||(U.current=!0,null==(e=G.current)||e.focus({preventScroll:!0}),T.change(R),(0,F.Y)(()=>{U.current=!1}))}),W=(0,c.z)(e=>{e.preventDefault()}),{isFocusVisible:z,focusProps:H}=(0,a.F)({autoFocus:k}),{isHovered:Y,hoverProps:K}=(0,h.X)({isDisabled:l}),{pressed:Z,pressProps:$}=(0,o.x)({disabled:l}),X=(0,x.x)({selected:Q,hover:Y,active:Z,focus:z,autofocus:k,disabled:l}),J=(0,b.dG)({ref:S,onKeyDown:O,onMouseDown:W,onClick:V,id:t,role:"tab",type:(0,u.f)(e,q),"aria-controls":null==(r=null==(s=B[R])?void 0:s.current)?void 0:r.id,"aria-selected":Q,tabIndex:Q?0:-1,disabled:l||void 0,autoFocus:k},H,K,$);return(0,b.L6)()({ourProps:J,theirProps:j,slot:X,defaultTag:"button",name:"Tabs.Tab"})}),R=(0,b.yV)(function(e,i){let{defaultIndex:s=0,vertical:r=!1,manual:n=!1,onChange:t,selectedIndex:l=null,...a}=e,h=r?"vertical":"horizontal",o=n?"manual":"auto",u=null!==l,j=(0,k.E)({isControlled:u}),y=(0,g.T)(i),[F,f]=(0,d.useReducer)(G,{info:j,selectedIndex:null!=l?l:s,tabs:[],panels:[]}),w=(0,x.x)({selectedIndex:F.selectedIndex}),C=(0,k.E)(t||(()=>{})),A=(0,k.E)(F.tabs),_=(0,d.useMemo)(()=>({orientation:h,activation:o,...F}),[h,o,F]),B=(0,c.z)(e=>(f({type:1,tab:e}),()=>f({type:2,tab:e}))),T=(0,c.z)(e=>(f({type:3,panel:e}),()=>f({type:4,panel:e}))),I=(0,c.z)(e=>{P.current!==e&&C.current(e),u||f({type:0,index:e})}),P=(0,k.E)(u?e.selectedIndex:F.selectedIndex),L=(0,d.useMemo)(()=>({registerTab:B,registerPanel:T,change:I}),[]);(0,p.e)(()=>{f({type:0,index:null!=l?l:s})},[l]),(0,p.e)(()=>{if(void 0===P.current||F.tabs.length<=0)return;let e=(0,m.z2)(F.tabs,e=>e.current);e.some((e,i)=>F.tabs[i]!==e)&&I(e.indexOf(F.tabs[P.current]))});let S=(0,b.L6)();return d.createElement(v,null,d.createElement(D.Provider,{value:L},d.createElement(q.Provider,{value:_},_.tabs.length<=0&&d.createElement(E,{onFocus:()=>{var e,i;for(let s of A.current)if((null==(e=s.current)?void 0:e.tabIndex)===0)return null==(i=s.current)||i.focus(),!0;return!1}}),S({ourProps:{ref:y},theirProps:a,slot:w,defaultTag:"div",name:"Tabs"}))))}),Q=(0,b.yV)(function(e,i){let{orientation:s,selectedIndex:r}=P("Tab.List"),n=(0,g.T)(i),t=(0,x.x)({selectedIndex:r});return(0,b.L6)()({ourProps:{ref:n,role:"tablist","aria-orientation":s},theirProps:e,slot:t,defaultTag:"div",name:"Tabs.List"})}),M=(0,b.yV)(function(e,i){let{selectedIndex:s}=P("Tab.Panels"),r=(0,g.T)(i),n=(0,x.x)({selectedIndex:s});return(0,b.L6)()({ourProps:{ref:r},theirProps:e,slot:n,defaultTag:"div",name:"Tabs.Panels"})}),O=(0,b.yV)(function(e,i){var s,r,n,t;let l=(0,d.useId)(),{id:h=`headlessui-tabs-panel-${l}`,tabIndex:o=0,...c}=e,{selectedIndex:k,tabs:u,panels:E}=P("Tab.Panel"),m=L("Tab.Panel"),y=(0,d.useRef)(null),F=(0,g.T)(y,i);(0,p.e)(()=>m.registerPanel(y),[m,y]);let f=C("panels"),w=E.indexOf(y);-1===w&&(w=f);let v=w===k,{isFocusVisible:A,focusProps:_}
1=(0,a.F)(),B=(0,x.x)({selected:v,focus:A}),T=(0,b.dG)({ref:F,id:h,role:"tabpanel","aria-labelledby":null==(r=null==(s=u[w])?void 0:s.current)?void 0:r.id,tabIndex:v?o:-1},_),I=(0,b.L6)();return v||null!=(n=c.unmount)&&!n||null!=(t=c.static)&&t?I({ourProps:T,theirProps:c,slot:B,defaultTag:"div",features:S,visible:v,name:"Tabs.Panel"}):d.createElement(j._,{"aria-hidden":"true",...T})}),U=Object.assign(N,{Group:R,List:Q,Panels:M,Panel:O});var V=s(4814);function W(e){return!!e&&"object"==typeof e&&"label"in e}let z=({items:e,children:i,storageKey:s,defaultIndex:r=0,selectedIndex:n,onChange:t,className:a,tabClassName:h})=>{let[o,c]=(0,d.useState)(r);(0,d.useEffect)(()=>{void 0!==n&&c(n)},[n]),(0,d.useEffect)(()=>{if(!s)return;function e(e){e.key===s&&c(Number(e.newValue))}let i=Number(localStorage.getItem(s));return c(Number.isNaN(i)?0:i),window.addEventListener("storage",e),()=>{window.removeEventListener("storage",e)}},[]);let p=(0,d.useCallback)(e=>{if(s){let i=String(e);localStorage.setItem(s,i),window.dispatchEvent(new StorageEvent("storage",{key:s,newValue:i}));return}c(e),t?.(e)},[]);return(0,l.jsxs)(R,{selectedIndex:o,defaultIndex:r,onChange:p,tabIndex:-1,children:[(0,l.jsx)(Q,{className:e=>(0,V.Z)("nextra-scrollbar _overflow-x-auto _overscroll-x-contain _overflow-y-hidden","_mt-4 _flex _w-full _gap-2 _border-b _border-gray-200 _pb-px dark:_border-neutral-800","nextra-focus","function"==typeof a?a(e):a),children:e.map((e,i)=>(0,l.jsx)(U,{disabled:W(e)&&e.disabled,className:e=>{let{selected:i,disabled:s,hover:r,focus:n}=e;return(0,V.Z)(n&&"nextra-focusable _ring-inset",i&&"_outline-none","_whitespace-nowrap","_rounded-t _p-2 _font-medium _leading-5 _transition-colors","_-mb-0.5 _select-none _border-b-2",i?"_border-current":r?"_border-gray-200 dark:_border-neutral-800":"_border-transparent",i?"_text-primary-600":s?"_text-gray-400 dark:_text-neutral-600 _pointer-events-none":r?"_text-black dark:_text-white":"_text-gray-600 dark:_text-gray-200","function"==typeof h?h(e):h)},children:W(e)?e.label:e},i))}),(0,l.jsx)(M,{children:i})]})},H=Object.assign(e=>(0,l.jsx)(z,{...e}),{Tab:({children:e,unmount:i=!1,className:s,...r})=>(0,l.jsx)(O,{...r,unmount:i,className:e=>(0,V.Z)("_rounded _mt-6",e.focus&&"nextra-focusable","function"==typeof s?s(e):s),children:e})})}},function(e){e.O(0,[3556,5043,2888,9774,179],function(){return e(e.s=7250)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.