Version Packages (alpha)

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to graphiql-6, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

graphiql-6 is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on graphiql-6.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

graphiql@6.0.0-alpha.0

Major Changes

• #4290 bbe02de Thanks @trevor-scheer! - Replace the left-side plugin sidebar with ActivityRail. Plugins render as a flat list in registration order with a 2px blue left border on the active plugin. Settings gear at the bottom opens the settings dialog.

  The previous graphiql-sidebar DOM structure and CSS class names are removed. Custom CSS overrides targeting .graphiql-sidebar or its children will need updating. Only CSS variable names are part of the public API.

• #4227 58de626 Thanks @trevor-scheer! - Initial v6 alpha. Refs GraphiQL Modernization #4219.

Patch Changes

• #4288 82e5460 Thanks @trevor-scheer! - Add a new TopBar layout component with brand, endpoint URL display, command palette button, and primary Run button. Endpoint method/URL are placeholders until the transport API lands. TopBar is now mounted at the top of the GraphiQL layout.

• Updated dependencies [bbe02de, b73d951, eb46e2f, dabeb6d, d4f0268, c25bfd5, 76a5169, 72e8970, 1ce71e4, bd773d3, 1bcf3be, 92567d5, 7dd2111, f5968fe, a3db26e, 05ecaf0, 5fb2d64, 34695e8, e54b9c9, a0fe11a, 4fa53a8, 3f79ce9, 6627635, 82e5460]:

  • @graphiql/react@0.38.0-alpha.0
  • @graphiql/plugin-doc-explorer@0.5.0-alpha.0
  • @graphiql/plugin-history@0.4.3-alpha.0

@graphiql/plugin-doc-explorer@0.5.0-alpha.0

Minor Changes

• #4299 b73d951 Thanks @trevor-scheer! - Redesign the Schema Explorer panel: eyebrow header with filter and search icon buttons, dedicated breadcrumb row with color-coded depth segments, inline search row with keycap hint, type card with TYPE badge and implements list, and a mono field list with type colors and active-row accent border.

Patch Changes

• #4294 92567d5 Thanks @trevor-scheer! - Restyle to the v6 design. Uses the new PanelHeader chrome and OKLCH design tokens. Type names render in --accent-orange, field and enum names in --accent-green-light, argument names in --accent-purple.

• Updated dependencies [bbe02de, dabeb6d, d4f0268, c25bfd5, 76a5169, 72e8970, 1ce71e4, bd773d3, 1bcf3be, 7dd2111, f5968fe, 05ecaf0, 5fb2d64, 34695e8, e54b9c9, a0fe11a, 4fa53a8, 3f79ce9, 6627635, 82e5460]:

  • @graphiql/react@0.38.0-alpha.0

@graphiql/react@0.38.0-alpha.0

Minor Changes

• #4290 bbe02de Thanks @trevor-scheer! - Replace the left-side plugin sidebar with ActivityRail. Plugins render as a flat list in registration order with a 2px blue left border on the active plugin. Settings gear at the bottom opens the settings dialog.

  The previous graphiql-sidebar DOM structure and CSS class names are removed. Custom CSS overrides targeting .graphiql-sidebar or its children will need updating. Only CSS variable names are part of the public API.

• #4302 dabeb6d Thanks @trevor-scheer! - KeycapHint now takes semantic modifier names via the new MODIFIER constant. MODIFIER.Meta renders as ⌘ on macOS and Ctrl elsewhere; Ctrl/Alt/Shift render as Mac glyphs (⌃/⌥/⇧) on macOS and as plain text on other platforms. Enter renders as ⏎ on every platform.

• #4277 d4f0268 Thanks @trevor-scheer! - Add a KeycapHint primitive for displaying inline keyboard shortcuts (e.g. ⌘K, ⌘⏎). Used in the new top bar; available for general consumer use.

• #4285 c25bfd5 Thanks @trevor-scheer! - Add a MethodPill primitive: a small colored pill labeling an operation as QRY (query), MUT (mutation), or SUB (subscription).

• #4297 76a5169 Thanks @trevor-scheer! - Replace the Monaco editor theme with v6-aligned token colors. Both graphiql-DARK and graphiql-LIGHT now cover all GraphQL token types (keywords, type names, field identifiers, variables, annotations, strings, numbers, comments) using the v6 design's accent palette. UI chrome colors (suggest widget, hover widget, quick input) are updated to match.

• #4242 72e8970 Thanks @trevor-scheer! - Introduce the v6 OKLCH design-token system with both dark and light theme palettes. Tokens (--bg-canvas, --fg-default, --accent-blue, etc.) are stored as OKLCH triplets so opacity can be combined at the call site. Themes are keyed off data-theme (dark is the default; light activates explicitly or via prefers-color-scheme: light when no override is set). Existing v5 variables are unchanged; component styles continue to use them until they are migrated.

• #4284 1ce71e4 Thanks @trevor-scheer! - Add a PanelHeader primitive for side panels. Renders a title, optional subtitle, and optional action-icon row.

• #4292 f5968fe Thanks @trevor-scheer! - Restyle the editor tabs to the v6 design. Tabs now show a dirty-state dot when unsaved changes are present and a hover-only close affordance per tab. Adds a lastSavedQuery field to the tab store; the dirty state is computed from the diff against that snapshot. Adds a saveQuery action (keybind Ctrl-S / Cmd-S) that updates the snapshot. Adds prettify, copy, and save buttons to the right side of the tab strip.

• #4282 a0fe11a Thanks @trevor-scheer! - Add a SegmentedControl primitive for selecting one option from a small set inline. Used by the new top-bar response view toggle and several settings controls.

• #4291 4fa53a8 Thanks @trevor-scheer! - Add SidePanel component that hosts the active plugin's content next to the activity rail. Default width 340px, resizable.

• #4289 3f79ce9 Thanks @trevor-scheer! - Add a StatusBar layout component: a 24px-tall footer at the bottom of the app showing connection status, schema type count, active plugin count, cursor position, and document metadata (encoding, indent, language label).

• #4288 82e5460 Thanks @trevor-scheer! - Add a new TopBar layout component with brand, endpoint URL display, command palette button, and primary Run button. Endpoint method/URL are placeholders until the transport API lands. TopBar is now mounted at the top of the GraphiQL layout.

Patch Changes

• #4276 bd773d3 Thanks @trevor-scheer! - Restyle Button and ToolbarButton to the v6 OKLCH design tokens. Adds a primary variant to Button for the Run-button style. Storybook stories added for each variant. Props and behavior unchanged.

• #4279 1bcf3be Thanks @trevor-scheer! - Restyle Dialog to the v6 design: --bg-elevated surface, refined border, larger radius. Behavior and API unchanged.

• #4280 7dd2111 Thanks @trevor-scheer! - Restyle DropdownMenu to the v6 design. Behavior and API unchanged.

• #4283 05ecaf0 Thanks @trevor-scheer! - Restyle Spinner to the v6 design. Default stroke uses the muted foreground token.

• #4281 5fb2d64 Thanks @trevor-scheer! - Restyle Tabs primitive to the v6 design. Active state uses a top accent border bleeding into the strip's bottom border.

• #4278 34695e8 Thanks @trevor-scheer! - Restyle Tooltip to the v6 design: --bg-elevated surface, simplified border and shadow.

• #4287 e54b9c9 Thanks @trevor-scheer! - Rewrite SegmentedControl on top of native radio inputs. Public props are unchanged. Keyboard navigation (arrow keys, Home / End) and screen-reader semantics now come from the browser; the group is a single tab stop instead of one per option.

• #4293 6627635 Thanks @trevor-scheer! - setTheme now mirrors the chosen theme onto document.documentElement as a data-theme attribute. The v6 OKLCH token cascade in tokens.css is gated on [data-theme='light'] / [data-theme='dark'] selectors and was previously never matched, so v6 components fell back to the OS prefers-color-scheme regardless of the GraphiQL theme toggle. The existing body.graphiql-light / body.graphiql-dark classes are preserved for backwards compatibility with custom CSS.

• Updated dependencies [eb46e2f]:

  • @graphiql/toolkit@0.12.1-alpha.0

@graphiql/plugin-code-exporter@5.1.3-alpha.0

Patch Changes

• Updated dependencies [bbe02de, dabeb6d, d4f0268, c25bfd5, 76a5169, 72e8970, 1ce71e4, bd773d3, 1bcf3be, 7dd2111, f5968fe, 05ecaf0, 5fb2d64, 34695e8, e54b9c9, a0fe11a, 4fa53a8, 3f79ce9, 6627635, 82e5460]:
  • @graphiql/react@0.38.0-alpha.0

@graphiql/plugin-explorer@5.1.3-alpha.0

Patch Changes

• Updated dependencies [bbe02de, dabeb6d, d4f0268, c25bfd5, 76a5169, 72e8970, 1ce71e4, bd773d3, 1bcf3be, 7dd2111, f5968fe, 05ecaf0, 5fb2d64, 34695e8, e54b9c9, a0fe11a, 4fa53a8, 3f79ce9, 6627635, 82e5460]:
  • @graphiql/react@0.38.0-alpha.0

@graphiql/plugin-history@0.4.3-alpha.0

Patch Changes

• #4316 eb46e2f Thanks @trevor-scheer! - Show a MethodPill (QRY/MUT/SUB) on each History row in place of the green status dot. QueryStoreItem gains an optional operation field, populated at write time from the parsed query. The Clear button no longer flashes green on success.

• #4295 a3db26e Thanks @trevor-scheer! - Restyle to the v6 design. New row layout with status dot, mono name label, and inline variables snippet. Uses PanelHeader for the panel chrome.

• Updated dependencies [bbe02de, eb46e2f, dabeb6d, d4f0268, c25bfd5, 76a5169, 72e8970, 1ce71e4, bd773d3, 1bcf3be, 7dd2111, f5968fe, 05ecaf0, 5fb2d64, 34695e8, e54b9c9, a0fe11a, 4fa53a8, 3f79ce9, 6627635, 82e5460]:

  • @graphiql/react@0.38.0-alpha.0
  • @graphiql/toolkit@0.12.1-alpha.0

@graphiql/toolkit@0.12.1-alpha.0

Patch Changes

• #4316 eb46e2f Thanks @trevor-scheer! - Show a MethodPill (QRY/MUT/SUB) on each History row in place of the green status dot. QueryStoreItem gains an optional operation field, populated at write time from the parsed query. The Clear button no longer flashes green on success.