diff --git a/.changeset/collections-plugin.md b/.changeset/collections-plugin.md
new file mode 100644
index 0000000000..6df54688d0
--- /dev/null
+++ b/.changeset/collections-plugin.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-collections': minor
+---
+
+New `@graphiql/plugin-collections` plugin. Save and organize named operations into folder collections. Includes a collapsible tree UI, save-current-operation dialog, open-into-new-tab, drag-and-drop reorder with keyboard fallback, and JSON import/export. Persistence is pluggable via the `storage` option (defaults to `localStorage`).
diff --git a/.changeset/graphiql-collections-default-install.md b/.changeset/graphiql-collections-default-install.md
new file mode 100644
index 0000000000..6bd37240cc
--- /dev/null
+++ b/.changeset/graphiql-collections-default-install.md
@@ -0,0 +1,5 @@
+---
+'graphiql': minor
+---
+
+The collections plugin (`@graphiql/plugin-collections`) is now included by default. A new "Collections" rail icon appears out of the box for saving and organizing operations. Passing the `plugins` prop opts out of the default set as before.
diff --git a/packages/graphiql-plugin-collections/README.md b/packages/graphiql-plugin-collections/README.md
new file mode 100644
index 0000000000..6a376a3a62
--- /dev/null
+++ b/packages/graphiql-plugin-collections/README.md
@@ -0,0 +1,9 @@
+# @graphiql/plugin-collections
+
+A first-party operation collections plugin for GraphiQL. Save, organize, and reuse named GraphQL operations in named collections with support for drag-and-drop reorder and JSON import/export.
+
+## Installation
+
+```sh
+npm install @graphiql/plugin-collections
+```
diff --git a/packages/graphiql-plugin-collections/package.json b/packages/graphiql-plugin-collections/package.json
new file mode 100644
index 0000000000..c0491f3d50
--- /dev/null
+++ b/packages/graphiql-plugin-collections/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@graphiql/plugin-collections",
+  "version": "0.1.0-alpha.0",
+  "sideEffects": [
+    "*.css"
+  ],
+  "description": "A first-party operation collections plugin for GraphiQL.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/graphql/graphiql",
+    "directory": "packages/graphiql-plugin-collections"
+  },
+  "homepage": "https://github.com/graphql/graphiql/tree/master/packages/graphiql-plugin-collections#readme",
+  "bugs": {
+    "url": "https://github.com/graphql/graphiql/issues?q=issue+label:@graphiql/plugin-collections"
+  },
+  "license": "MIT",
+  "exports": {
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    ".": "./dist/index.js"
+  },
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react",
+    "graphql",
+    "graphiql",
+    "plugin",
+    "collections"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "types:check": "tsgo --noEmit",
+    "dev": "vite build --watch --emptyOutDir=false",
+    "build": "vite build",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "zustand": "^5"
+  },
+  "peerDependencies": {
+    "@graphiql/react": "^0.37.0",
+    "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@graphiql/react": "^0.37.4",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "graphql": "^16.9.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vite": "^6.3.4",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-svgr": "^4.3.0"
+  }
+}
diff --git a/packages/graphiql-plugin-collections/src/__mocks__/@graphiql/react.ts b/packages/graphiql-plugin-collections/src/__mocks__/@graphiql/react.ts
new file mode 100644
index 0000000000..9a0def3a48
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/__mocks__/@graphiql/react.ts
@@ -0,0 +1,107 @@
+// Minimal stub of @graphiql/react for unit/integration tests.
+import type { ReactNode } from 'react';
+
+export type Operation = 'query' | 'mutation' | 'subscription';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+import type { StoreApi, ExtractState } from 'zustand';
+
+type GraphiQLState = {
+  schema: unknown;
+  queryEditor: null;
+  activeTabIndex: number;
+  tabs: { query: string; variables?: string; headers?: string }[];
+};
+
+type Selector<T> = (state: GraphiQLState) => T;
+
+// Mutable state that tests can override.
+export const __state = {
+  schema: null as unknown,
+  queryText: '{ __typename }',
+  addTab() {},
+  updateActiveTabValues(_values: {
+    query?: string;
+    variables?: string;
+    headers?: string;
+  }) {},
+};
+
+export function useGraphiQL<T>(selector: Selector<T>): T {
+  return selector({
+    schema: __state.schema,
+    queryEditor: null,
+    activeTabIndex: 0,
+    tabs: [{ query: __state.queryText }],
+  });
+}
+
+export const useGraphiQLActions = () => ({
+  addTab: __state.addTab,
+  updateActiveTabValues: __state.updateActiveTabValues,
+});
+
+export const createBoundedUseStore = ((store: StoreApi<unknown>) =>
+  (selector?: (state: unknown) => unknown) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useStore(store, selector ? useShallow(selector) : (s: unknown) => s);
+  }) as <S extends StoreApi<unknown>>(
+  store: S,
+) => {
+  (): ExtractState<S>;
+  <T>(selector: (state: ExtractState<S>) => T): T;
+};
+
+export const GraphiQLProvider = ({ children }: { children: ReactNode }) =>
+  children;
+
+export const PanelHeader = ({
+  title: _title,
+  subtitle: _subtitle,
+  actions: _actions,
+}: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+}) => null;
+
+export const MethodPill = ({ operation: _operation }: { operation: string }) =>
+  null;
+
+export const Dialog = Object.assign(
+  ({
+    children,
+    open: _open,
+    onOpenChange: _onOpenChange,
+  }: {
+    children?: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }) => children ?? null,
+  {
+    Title: ({ children }: { children: ReactNode }) => children,
+    Close: ({ children }: { children: ReactNode }) => children,
+    Description: ({ children }: { children: ReactNode }) => children,
+    Trigger: ({ children }: { children: ReactNode }) => children,
+  },
+);
+
+export const DropdownMenu = Object.assign(
+  ({ children }: { children?: ReactNode }) => children ?? null,
+  {
+    Button: ({ children }: { children: ReactNode }) => children,
+    Content: ({ children }: { children: ReactNode }) => children,
+    Item: ({
+      children,
+      onSelect: _onSelect,
+    }: {
+      children: ReactNode;
+      onSelect?: () => void;
+    }) => children,
+    Separator: () => null,
+  },
+);
+
+export const ChevronDownIcon = () => null;
+export const ChevronUpIcon = () => null;
+export const MagnifyingGlassIcon = () => null;
diff --git a/packages/graphiql-plugin-collections/src/components/collection-item-row.tsx b/packages/graphiql-plugin-collections/src/components/collection-item-row.tsx
new file mode 100644
index 0000000000..3bcd03a0b6
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/components/collection-item-row.tsx
@@ -0,0 +1,141 @@
+import { FC, useState } from 'react';
+import { DropdownMenu, MethodPill } from '@graphiql/react';
+import type { Operation } from '@graphiql/react';
+import type { Collection, CollectionItem } from '../types';
+
+function inferOperationType(query: string): Operation {
+  const match = /^\s*(query|mutation|subscription)/i.exec(query);
+  const keyword = match?.[1]?.toLowerCase();
+  if (keyword === 'mutation' || keyword === 'subscription') {
+    return keyword;
+  }
+  return 'query';
+}
+
+type CollectionItemRowProps = {
+  item: CollectionItem;
+  collectionId: string;
+  index: number;
+  totalItems: number;
+  allCollections: Collection[];
+  onOpen(item: CollectionItem): void;
+  onDelete(collectionId: string, itemId: string): void;
+  onMove(
+    fromCollectionId: string,
+    fromIndex: number,
+    toCollectionId: string,
+    toIndex: number,
+  ): void;
+};
+
+export const CollectionItemRow: FC<CollectionItemRowProps> = ({
+  item,
+  collectionId,
+  index,
+  totalItems,
+  allCollections,
+  onOpen,
+  onDelete,
+  onMove,
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const operationType = inferOperationType(item.query);
+
+  return (
+    <div
+      className={`graphiql-collection-item-row${isDragOver ? ' graphiql-collection-drop-target' : ''}`}
+      aria-grabbed={isDragging || undefined}
+      draggable
+      onDragStart={e => {
+        setIsDragging(true);
+        e.dataTransfer.setData(
+          'application/x-graphiql-item',
+          JSON.stringify({ collectionId, index }),
+        );
+        e.dataTransfer.effectAllowed = 'move';
+      }}
+      onDragEnd={() => setIsDragging(false)}
+      onDragOver={e => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setIsDragOver(true);
+      }}
+      onDragLeave={() => setIsDragOver(false)}
+      onDrop={e => {
+        e.preventDefault();
+        setIsDragOver(false);
+        try {
+          const data = JSON.parse(
+            e.dataTransfer.getData('application/x-graphiql-item'),
+          );
+          onMove(data.collectionId, data.index, collectionId, index);
+        } catch {
+          // malformed drag data
+        }
+      }}
+      onClick={() => onOpen(item)}
+    >
+      <span className="graphiql-collection-drag-handle" aria-hidden="true">
+        ⠿
+      </span>
+      <MethodPill operation={operationType} aria-hidden />
+      <span className="graphiql-collection-item-name" title={item.name}>
+        {item.name}
+      </span>
+      <DropdownMenu>
+        <DropdownMenu.Button
+          className="graphiql-collection-item-menu"
+          aria-label={`Actions for ${item.name}`}
+          onClick={e => e.stopPropagation()}
+        >
+          ···
+        </DropdownMenu.Button>
+        <DropdownMenu.Content>
+          <DropdownMenu.Item onSelect={() => onOpen(item)}>
+            Open
+          </DropdownMenu.Item>
+          {index > 0 && (
+            <DropdownMenu.Item
+              onSelect={() =>
+                onMove(collectionId, index, collectionId, index - 1)
+              }
+            >
+              Move up
+            </DropdownMenu.Item>
+          )}
+          {index < totalItems - 1 && (
+            <DropdownMenu.Item
+              onSelect={() =>
+                onMove(collectionId, index, collectionId, index + 1)
+              }
+            >
+              Move down
+            </DropdownMenu.Item>
+          )}
+          {allCollections.some(c => c.id !== collectionId) && (
+            <>
+              <DropdownMenu.Separator />
+              {allCollections
+                .filter(c => c.id !== collectionId)
+                .map(c => (
+                  <DropdownMenu.Item
+                    key={c.id}
+                    onSelect={() =>
+                      onMove(collectionId, index, c.id, c.items.length)
+                    }
+                  >
+                    Move to: {c.name}
+                  </DropdownMenu.Item>
+                ))}
+            </>
+          )}
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item onSelect={() => onDelete(collectionId, item.id)}>
+            Delete
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
+  );
+};
diff --git a/packages/graphiql-plugin-collections/src/components/collection-row.tsx b/packages/graphiql-plugin-collections/src/components/collection-row.tsx
new file mode 100644
index 0000000000..bf4a4a41a5
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/components/collection-row.tsx
@@ -0,0 +1,130 @@
+import { FC, useState } from 'react';
+import { DropdownMenu } from '@graphiql/react';
+import type { Collection, CollectionItem } from '../types';
+import { CollectionItemRow } from './collection-item-row';
+
+type CollectionRowProps = {
+  collection: Collection;
+  allCollections: Collection[];
+  onRename(id: string, name: string): void;
+  onDelete(id: string): void;
+  onOpenItem(item: CollectionItem): void;
+  onDeleteItem(collectionId: string, itemId: string): void;
+  onMoveItem(
+    fromCollectionId: string,
+    fromIndex: number,
+    toCollectionId: string,
+    toIndex: number,
+  ): void;
+  onAddItem(
+    collectionId: string,
+    item: Omit<CollectionItem, 'id' | 'createdAt' | 'updatedAt'>,
+  ): CollectionItem;
+};
+
+export const CollectionRow: FC<CollectionRowProps> = ({
+  collection,
+  allCollections,
+  onRename,
+  onDelete,
+  onOpenItem,
+  onDeleteItem,
+  onMoveItem,
+}) => {
+  const [expanded, setExpanded] = useState(true);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(collection.name);
+
+  const commitRename = () => {
+    if (renameValue.trim()) {
+      onRename(collection.id, renameValue.trim());
+    }
+    setIsRenaming(false);
+  };
+
+  return (
+    <div className="graphiql-collection-row">
+      <div
+        className="graphiql-collection-header"
+        onClick={() => !isRenaming && setExpanded(e => !e)}
+        role="button"
+        aria-expanded={expanded}
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            setExpanded(ex => !ex);
+          }
+        }}
+      >
+        <span className="graphiql-collection-chevron" aria-hidden="true">
+          {expanded ? '▾' : '▸'}
+        </span>
+        {isRenaming ? (
+          <input
+            className="graphiql-collection-rename-input"
+            value={renameValue}
+            autoFocus
+            onChange={e => setRenameValue(e.target.value)}
+            onBlur={commitRename}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                commitRename();
+              }
+              if (e.key === 'Escape') {
+                setRenameValue(collection.name);
+                setIsRenaming(false);
+              }
+              e.stopPropagation();
+            }}
+            onClick={e => e.stopPropagation()}
+          />
+        ) : (
+          <span className="graphiql-collection-name">{collection.name}</span>
+        )}
+        <span className="graphiql-collection-badge">
+          {collection.items.length}
+        </span>
+        <DropdownMenu>
+          <DropdownMenu.Button
+            className="graphiql-collection-menu"
+            aria-label={`Actions for ${collection.name}`}
+            onClick={e => e.stopPropagation()}
+          >
+            ···
+          </DropdownMenu.Button>
+          <DropdownMenu.Content>
+            <DropdownMenu.Item
+              onSelect={() => {
+                setRenameValue(collection.name);
+                setIsRenaming(true);
+              }}
+            >
+              Rename
+            </DropdownMenu.Item>
+            <DropdownMenu.Separator />
+            <DropdownMenu.Item onSelect={() => onDelete(collection.id)}>
+              Delete
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </div>
+      {expanded && collection.items.length > 0 && (
+        <div className="graphiql-collection-items">
+          {collection.items.map((item, i) => (
+            <CollectionItemRow
+              key={item.id}
+              item={item}
+              collectionId={collection.id}
+              index={i}
+              totalItems={collection.items.length}
+              allCollections={allCollections}
+              onOpen={onOpenItem}
+              onDelete={onDeleteItem}
+              onMove={onMoveItem}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/graphiql-plugin-collections/src/components/collections-panel.tsx b/packages/graphiql-plugin-collections/src/components/collections-panel.tsx
new file mode 100644
index 0000000000..6688104222
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/components/collections-panel.tsx
@@ -0,0 +1,108 @@
+import { FC, useEffect, useState } from 'react';
+import { PanelHeader, useGraphiQLActions } from '@graphiql/react';
+import { useCollectionsStore, collectionsStore } from '../store';
+import { CollectionRow } from './collection-row';
+import { SaveDialog } from './save-dialog';
+import { ImportExportDialog } from './import-export-dialog';
+import { localStorageAdapter } from '../storage/local-storage';
+import type { CollectionItem, CollectionsStorage } from '../types';
+
+type CollectionsPanelProps = {
+  storage?: CollectionsStorage;
+};
+
+export const CollectionsPanel: FC<CollectionsPanelProps> = ({ storage }) => {
+  const actions = useCollectionsStore(s => s.actions);
+  const collections = useCollectionsStore(s => s.collections);
+  const loaded = useCollectionsStore(s => s.loaded);
+  const [showImportExport, setShowImportExport] = useState(false);
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+
+  useEffect(() => {
+    void actions.init(storage ?? localStorageAdapter);
+    // storage is intentionally only read on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { addTab, updateActiveTabValues } = useGraphiQLActions();
+
+  const handleOpen = (item: CollectionItem) => {
+    addTab();
+    updateActiveTabValues({
+      query: item.query,
+      variables: item.variables ?? '',
+      headers: item.headers ?? '',
+    });
+  };
+
+  const handleRename = actions.renameCollection;
+  const handleDelete = actions.deleteCollection;
+  const handleDeleteItem = actions.deleteItem;
+  const handleMoveItem = actions.moveItem;
+  const handleAddItem = actions.addItem;
+
+  return (
+    <div className="graphiql-collections-panel">
+      <PanelHeader
+        title="Collections"
+        actions={
+          <>
+            <button
+              type="button"
+              className="graphiql-collections-action"
+              onClick={() =>
+                collectionsStore
+                  .getState()
+                  .actions.createCollection('New Collection')
+              }
+              aria-label="New collection"
+              title="New collection"
+            >
+              + New
+            </button>
+            <button
+              type="button"
+              className="graphiql-collections-action"
+              onClick={() => setShowImportExport(true)}
+              aria-label="Import / Export"
+              title="Import / Export"
+            >
+              ↑↓
+            </button>
+          </>
+        }
+      />
+      {!loaded && <div className="graphiql-collections-loading">Loading…</div>}
+      {loaded && collections.length === 0 && (
+        <div className="graphiql-collections-empty">
+          No collections yet. Save an operation to get started.
+        </div>
+      )}
+      <div className="graphiql-collections-list">
+        {collections.map(collection => (
+          <CollectionRow
+            key={collection.id}
+            collection={collection}
+            allCollections={collections}
+            onRename={handleRename}
+            onDelete={handleDelete}
+            onOpenItem={handleOpen}
+            onDeleteItem={handleDeleteItem}
+            onMoveItem={handleMoveItem}
+            onAddItem={handleAddItem}
+          />
+        ))}
+      </div>
+      <SaveDialog
+        open={showSaveDialog}
+        onClose={() => setShowSaveDialog(false)}
+        initialQuery=""
+        initialName="Unnamed operation"
+      />
+      <ImportExportDialog
+        open={showImportExport}
+        onClose={() => setShowImportExport(false)}
+      />
+    </div>
+  );
+};
diff --git a/packages/graphiql-plugin-collections/src/components/import-export-dialog.tsx b/packages/graphiql-plugin-collections/src/components/import-export-dialog.tsx
new file mode 100644
index 0000000000..cf62487ea9
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/components/import-export-dialog.tsx
@@ -0,0 +1,135 @@
+import { FC, useRef, useState } from 'react';
+import { Dialog } from '@graphiql/react';
+import { collectionsStore } from '../store';
+
+type ImportExportDialogProps = {
+  open: boolean;
+  onClose(): void;
+};
+
+export const ImportExportDialog: FC<ImportExportDialogProps> = ({
+  open,
+  onClose,
+}) => {
+  const [mode, setMode] = useState<'export' | 'import'>('export');
+  const [importMode, setImportMode] = useState<'merge' | 'replace'>('merge');
+  const [importError, setImportError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const exported = collectionsStore.getState().actions.exportCollections();
+
+  const handleDownload = () => {
+    const blob = new Blob([exported], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'graphiql-collections.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImport = () => {
+    const file = fileInputRef.current?.files?.[0];
+    if (!file) {
+      setImportError('Please select a file.');
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = e => {
+      const text = e.target?.result as string;
+      try {
+        JSON.parse(text);
+        collectionsStore.getState().actions.importCollections(text, importMode);
+        onClose();
+      } catch {
+        setImportError(
+          'Invalid JSON file. Please select a valid collections export.',
+        );
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={o => !o && onClose()}>
+      <Dialog.Title>Import / Export Collections</Dialog.Title>
+      <div className="graphiql-import-export-tabs">
+        <button
+          type="button"
+          className={`graphiql-import-export-tab${mode === 'export' ? ' active' : ''}`}
+          onClick={() => setMode('export')}
+        >
+          Export
+        </button>
+        <button
+          type="button"
+          className={`graphiql-import-export-tab${mode === 'import' ? ' active' : ''}`}
+          onClick={() => setMode('import')}
+        >
+          Import
+        </button>
+      </div>
+      {mode === 'export' && (
+        <div className="graphiql-import-export-body">
+          <textarea
+            readOnly
+            className="graphiql-import-export-textarea"
+            value={exported}
+            rows={12}
+          />
+          <button
+            type="button"
+            onClick={handleDownload}
+            className="graphiql-import-export-download"
+          >
+            Download JSON
+          </button>
+        </div>
+      )}
+      {mode === 'import' && (
+        <div className="graphiql-import-export-body">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".json,application/json"
+            onChange={() => setImportError(null)}
+          />
+          <fieldset className="graphiql-import-export-mode">
+            <legend>Import mode</legend>
+            <label>
+              <input
+                type="radio"
+                name="import-mode"
+                value="merge"
+                checked={importMode === 'merge'}
+                onChange={() => setImportMode('merge')}
+              />
+              Merge (append new collections, skip duplicates)
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="import-mode"
+                value="replace"
+                checked={importMode === 'replace'}
+                onChange={() => setImportMode('replace')}
+              />
+              Replace (remove all existing collections)
+            </label>
+          </fieldset>
+          {importError && (
+            <p className="graphiql-import-export-error">{importError}</p>
+          )}
+          <button
+            type="button"
+            onClick={handleImport}
+            className="graphiql-import-export-import"
+          >
+            Import
+          </button>
+        </div>
+      )}
+      <Dialog.Close />
+    </Dialog>
+  );
+};
diff --git a/packages/graphiql-plugin-collections/src/components/save-button.tsx b/packages/graphiql-plugin-collections/src/components/save-button.tsx
new file mode 100644
index 0000000000..1fa1b0f226
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/components/save-button.tsx
@@ -0,0 +1,44 @@
+import { FC, useState } from 'react';
+import { useGraphiQL } from '@graphiql/react';
+import CollectionsIcon from '../icons/collections.svg?react';
+import { SaveDialog } from './save-dialog';
+
+function deriveOperationName(query: string): string {
+  const match =
+    /(?:query|mutation|subscription)\s+([A-Za-z_][A-Za-z0-9_]*)/i.exec(query);
+  return match?.[1] ?? 'Unnamed operation';
+}
+
+export const CollectionsSaveButton: FC = () => {
+  const [open, setOpen] = useState(false);
+  const { query, variables, headers } = useGraphiQL(s => {
+    const tab = s.tabs[s.activeTabIndex];
+    return {
+      query: tab?.query ?? '',
+      variables: tab?.variables ?? '',
+      headers: tab?.headers ?? '',
+    };
+  });
+
+  return (
+    <>
+      <button
+        type="button"
+        className="graphiql-tab-strip-action"
+        onClick={() => setOpen(true)}
+        aria-label="Save to collection"
+        title="Save to collection"
+      >
+        <CollectionsIcon aria-hidden="true" className="graphiql-toolbar-icon" />
+      </button>
+      <SaveDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        initialQuery={query}
+        initialVariables={variables ?? ''}
+        initialHeaders={headers ?? ''}
+        initialName={deriveOperationName(query)}
+      />
+    </>
+  );
+};
diff --git a/packages/graphiql-plugin-collections/src/components/save-dialog.tsx b/packages/graphiql-plugin-collections/src/components/save-dialog.tsx
new file mode 100644
index 0000000000..48767daa4f
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/components/save-dialog.tsx
@@ -0,0 +1,105 @@
+import { FC, useState } from 'react';
+import { Dialog } from '@graphiql/react';
+import { useCollectionsStore, collectionsStore } from '../store';
+
+type SaveDialogProps = {
+  open: boolean;
+  onClose(): void;
+  initialQuery: string;
+  initialVariables?: string;
+  initialHeaders?: string;
+  initialName: string;
+};
+
+export const SaveDialog: FC<SaveDialogProps> = ({
+  open,
+  onClose,
+  initialQuery,
+  initialVariables = '',
+  initialHeaders = '',
+  initialName,
+}) => {
+  const collections = useCollectionsStore(s => s.collections);
+  const [name, setName] = useState(initialName);
+  const [selectedCollectionId, setSelectedCollectionId] =
+    useState<string>('__new__');
+  const [newCollectionName, setNewCollectionName] = useState('New Collection');
+
+  const handleSave = () => {
+    const { actions } = collectionsStore.getState();
+    let collectionId = selectedCollectionId;
+    if (selectedCollectionId === '__new__') {
+      const c = actions.createCollection(newCollectionName);
+      collectionId = c.id;
+    }
+    actions.addItem(collectionId, {
+      name: name || 'Unnamed operation',
+      query: initialQuery,
+      variables: initialVariables,
+      headers: initialHeaders,
+    });
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={o => !o && onClose()}>
+      <Dialog.Title>Save to collection</Dialog.Title>
+      <div className="graphiql-save-dialog-form">
+        <label>
+          <span>Operation name</span>
+          <input
+            type="text"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            placeholder="Unnamed operation"
+            className="graphiql-save-dialog-input"
+          />
+        </label>
+        <label>
+          <span>Collection</span>
+          <select
+            value={selectedCollectionId}
+            onChange={e => setSelectedCollectionId(e.target.value)}
+            className="graphiql-save-dialog-select"
+          >
+            <option value="__new__">+ New collection</option>
+            {collections.map(c => (
+              <option key={c.id} value={c.id}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        {selectedCollectionId === '__new__' && (
+          <label>
+            <span>Collection name</span>
+            <input
+              type="text"
+              value={newCollectionName}
+              onChange={e => setNewCollectionName(e.target.value)}
+              placeholder="Collection name"
+              className="graphiql-save-dialog-input"
+            />
+          </label>
+        )}
+      </div>
+      <div className="graphiql-save-dialog-actions">
+        <button
+          type="button"
+          onClick={onClose}
+          className="graphiql-save-dialog-cancel"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleSave}
+          className="graphiql-save-dialog-save"
+        >
+          Save
+        </button>
+      </div>
+      <Dialog.Close />
+    </Dialog>
+  );
+};
diff --git a/packages/graphiql-plugin-collections/src/icons/collections.svg b/packages/graphiql-plugin-collections/src/icons/collections.svg
new file mode 100644
index 0000000000..d6e2479fb8
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/icons/collections.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+  <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+</svg>
diff --git a/packages/graphiql-plugin-collections/src/index.css b/packages/graphiql-plugin-collections/src/index.css
new file mode 100644
index 0000000000..ec0576d9e3
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/index.css
@@ -0,0 +1,295 @@
+.graphiql-collections-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.graphiql-collections-list {
+  overflow-y: auto;
+  flex: 1;
+}
+
+.graphiql-collections-empty,
+.graphiql-collections-loading {
+  padding: var(--px-8) var(--px-12);
+  color: oklch(var(--fg-subtle));
+  font-size: var(--font-size-hint);
+}
+
+.graphiql-collections-action {
+  all: unset;
+  cursor: pointer;
+  padding: var(--px-4) var(--px-8);
+  border-radius: var(--border-radius-4);
+  color: oklch(var(--fg-subtle));
+  font-size: var(--font-size-hint);
+}
+
+.graphiql-collections-action:hover {
+  background: oklch(var(--bg-subtle));
+  color: oklch(var(--fg-default));
+}
+
+.graphiql-collection-row {
+  border-bottom: 1px solid oklch(var(--border-default) / 0.5);
+}
+
+.graphiql-collection-header {
+  display: flex;
+  align-items: center;
+  gap: var(--px-8);
+  padding: var(--px-8) var(--px-12);
+  cursor: pointer;
+  user-select: none;
+}
+
+.graphiql-collection-header:hover {
+  background: oklch(var(--bg-subtle));
+}
+
+.graphiql-collection-name {
+  flex: 1;
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  color: oklch(var(--fg-default));
+}
+
+.graphiql-collection-rename-input {
+  flex: 1;
+  font-size: var(--font-size-body);
+  background: oklch(var(--bg-subtle));
+  border: 1px solid oklch(var(--border-default));
+  border-radius: var(--border-radius-4);
+  padding: 2px var(--px-6);
+  color: oklch(var(--fg-default));
+}
+
+.graphiql-collection-badge {
+  font-size: var(--font-size-hint);
+  color: oklch(var(--fg-subtle));
+  background: oklch(var(--bg-subtle));
+  padding: 0 var(--px-6);
+  border-radius: var(--border-radius-full);
+}
+
+.graphiql-collection-chevron {
+  font-size: var(--font-size-hint);
+  color: oklch(var(--fg-subtle));
+  flex-shrink: 0;
+}
+
+.graphiql-collection-menu {
+  all: unset;
+  cursor: pointer;
+  padding: var(--px-4);
+  border-radius: var(--border-radius-4);
+  color: oklch(var(--fg-subtle));
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.graphiql-collection-header:hover .graphiql-collection-menu {
+  opacity: 1;
+}
+
+.graphiql-collection-items {
+  padding: 0 0 var(--px-4);
+}
+
+.graphiql-collection-item-row {
+  display: flex;
+  align-items: center;
+  gap: var(--px-8);
+  padding: var(--px-6) var(--px-12) var(--px-6) var(--px-20);
+  cursor: pointer;
+}
+
+.graphiql-collection-item-row:hover {
+  background: oklch(var(--bg-subtle));
+}
+
+.graphiql-collection-item-row[aria-grabbed='true'] {
+  opacity: 0.5;
+}
+
+.graphiql-collection-item-name {
+  flex: 1;
+  font-size: var(--font-size-body);
+  color: oklch(var(--fg-default));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.graphiql-collection-drag-handle {
+  cursor: grab;
+  color: oklch(var(--fg-subtle));
+  flex-shrink: 0;
+}
+
+.graphiql-collection-drop-target {
+  outline: 2px solid oklch(var(--accent-default));
+  outline-offset: -2px;
+}
+
+.graphiql-collection-item-type {
+  font-size: 10px;
+  font-weight: 700;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-4);
+  flex-shrink: 0;
+  color: white;
+  background: oklch(var(--accent-default));
+}
+
+.graphiql-collection-item-type[data-operation-type='mutation'] {
+  background: oklch(var(--color-warning, 70% 0.2 80));
+}
+
+.graphiql-collection-item-type[data-operation-type='subscription'] {
+  background: oklch(var(--color-info, 65% 0.2 270));
+}
+
+.graphiql-collection-item-menu {
+  all: unset;
+  cursor: pointer;
+  padding: var(--px-4);
+  border-radius: var(--border-radius-4);
+  color: oklch(var(--fg-subtle));
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.graphiql-collection-item-row:hover .graphiql-collection-item-menu {
+  opacity: 1;
+}
+
+/* Save dialog */
+.graphiql-save-dialog-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--px-12);
+  padding: var(--px-12) 0;
+}
+
+.graphiql-save-dialog-form label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--px-4);
+  font-size: var(--font-size-hint);
+  color: oklch(var(--fg-subtle));
+}
+
+.graphiql-save-dialog-input,
+.graphiql-save-dialog-select {
+  background: oklch(var(--bg-subtle));
+  border: 1px solid oklch(var(--border-default));
+  border-radius: var(--border-radius-4);
+  padding: var(--px-6) var(--px-8);
+  color: oklch(var(--fg-default));
+  font-size: var(--font-size-body);
+}
+
+.graphiql-save-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--px-8);
+  padding-top: var(--px-8);
+}
+
+.graphiql-save-dialog-cancel,
+.graphiql-save-dialog-save {
+  all: unset;
+  cursor: pointer;
+  padding: var(--px-6) var(--px-16);
+  border-radius: var(--border-radius-4);
+  font-size: var(--font-size-body);
+}
+
+.graphiql-save-dialog-cancel {
+  color: oklch(var(--fg-subtle));
+  border: 1px solid oklch(var(--border-default));
+}
+
+.graphiql-save-dialog-save {
+  background: oklch(var(--accent-default));
+  color: white;
+}
+
+/* Import/Export dialog */
+.graphiql-import-export-tabs {
+  display: flex;
+  gap: var(--px-4);
+  border-bottom: 1px solid oklch(var(--border-default));
+  padding-bottom: var(--px-8);
+  margin-bottom: var(--px-12);
+}
+
+.graphiql-import-export-tab {
+  all: unset;
+  cursor: pointer;
+  padding: var(--px-4) var(--px-12);
+  border-radius: var(--border-radius-4);
+  font-size: var(--font-size-body);
+  color: oklch(var(--fg-subtle));
+}
+
+.graphiql-import-export-tab.active {
+  background: oklch(var(--bg-subtle));
+  color: oklch(var(--fg-default));
+}
+
+.graphiql-import-export-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--px-8);
+}
+
+.graphiql-import-export-textarea {
+  width: 100%;
+  background: oklch(var(--bg-subtle));
+  border: 1px solid oklch(var(--border-default));
+  border-radius: var(--border-radius-4);
+  padding: var(--px-8);
+  color: oklch(var(--fg-default));
+  font-family: var(--font-family-mono);
+  font-size: 12px;
+  resize: vertical;
+}
+
+.graphiql-import-export-download,
+.graphiql-import-export-import {
+  all: unset;
+  cursor: pointer;
+  padding: var(--px-6) var(--px-16);
+  border-radius: var(--border-radius-4);
+  font-size: var(--font-size-body);
+  background: oklch(var(--accent-default));
+  color: white;
+  align-self: flex-start;
+}
+
+.graphiql-import-export-mode {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--px-4);
+}
+
+.graphiql-import-export-mode legend {
+  font-size: var(--font-size-hint);
+  color: oklch(var(--fg-subtle));
+  margin-bottom: var(--px-4);
+}
+
+.graphiql-import-export-error {
+  color: oklch(var(--color-error, 60% 0.2 25));
+  font-size: var(--font-size-hint);
+}
diff --git a/packages/graphiql-plugin-collections/src/index.tsx b/packages/graphiql-plugin-collections/src/index.tsx
new file mode 100644
index 0000000000..72e5a50fb2
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/index.tsx
@@ -0,0 +1,31 @@
+import type { GraphiQLPlugin } from '@graphiql/react';
+import { CollectionsPanel } from './components/collections-panel';
+import CollectionsIcon from './icons/collections.svg?react';
+import type { CollectionsStorage } from './types';
+import './index.css';
+
+export type { CollectionsStorage, Collection, CollectionItem } from './types';
+export { collectionsStore, useCollectionsStore } from './store';
+export {
+  createLocalStorageAdapter,
+  localStorageAdapter,
+} from './storage/local-storage';
+export { CollectionsSaveButton } from './components/save-button';
+
+export type CollectionsPluginOptions = {
+  /** Custom storage adapter. Defaults to localStorage with key 'graphiql:collections'. */
+  storage?: CollectionsStorage;
+};
+
+export const collectionsPlugin = (
+  options?: CollectionsPluginOptions,
+): GraphiQLPlugin => {
+  function CollectionsPanelWithOptions() {
+    return <CollectionsPanel storage={options?.storage} />;
+  }
+  return {
+    title: 'Collections',
+    icon: CollectionsIcon,
+    content: CollectionsPanelWithOptions,
+  };
+};
diff --git a/packages/graphiql-plugin-collections/src/storage/local-storage.ts b/packages/graphiql-plugin-collections/src/storage/local-storage.ts
new file mode 100644
index 0000000000..cbe3039f99
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/storage/local-storage.ts
@@ -0,0 +1,50 @@
+import type { Collection, CollectionsStorage } from '../types';
+
+const DEFAULT_KEY = 'graphiql:collections';
+const VERSION = 1;
+
+type StorageEnvelope = {
+  version: number;
+  collections: Collection[];
+};
+
+export function createLocalStorageAdapter(
+  storageKey = DEFAULT_KEY,
+): CollectionsStorage {
+  return {
+    async load() {
+      try {
+        const raw = localStorage.getItem(storageKey);
+        if (!raw) {
+          return [];
+        }
+        const parsed: StorageEnvelope = JSON.parse(raw);
+        if (parsed.version !== VERSION) {
+          // Version mismatch: attempt a best-effort migration.
+          // V1 has the same shape — just update the version stamp and return collections.
+          // Future migrations go here when VERSION is bumped.
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[graphiql/plugin-collections] Storage version mismatch (found ${parsed.version}, expected ${VERSION}). Attempting to load collections as-is.`,
+          );
+          return Array.isArray(parsed.collections) ? parsed.collections : [];
+        }
+        return parsed.collections ?? [];
+      } catch {
+        return [];
+      }
+    },
+    async save(collections) {
+      try {
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify({ version: VERSION, collections }),
+        );
+      } catch {
+        // Storage quota exceeded or unavailable — silent no-op
+      }
+    },
+  };
+}
+
+export const localStorageAdapter = createLocalStorageAdapter();
diff --git a/packages/graphiql-plugin-collections/src/store.test.ts b/packages/graphiql-plugin-collections/src/store.test.ts
new file mode 100644
index 0000000000..06292534f7
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/store.test.ts
@@ -0,0 +1,298 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { collectionsStore } from './store';
+import type { Collection, CollectionsStorage } from './types';
+import { createLocalStorageAdapter } from './storage/local-storage';
+
+const getActions = () => collectionsStore.getState().actions;
+
+const makeStorage = (initial: Collection[] = []): CollectionsStorage => {
+  let data = [...initial];
+  return {
+    async load() {
+      return data;
+    },
+    async save(collections) {
+      data = [...collections];
+    },
+  };
+};
+
+const initialState = {
+  collections: [] as Collection[],
+  loaded: false,
+  storage: makeStorage(),
+};
+
+beforeEach(() => {
+  collectionsStore.setState({
+    ...initialState,
+    storage: makeStorage(),
+  });
+});
+
+describe('init', () => {
+  it('loads collections from storage', async () => {
+    const col: Collection = {
+      id: 'col-1',
+      name: 'Test',
+      items: [],
+      createdAt: 1000,
+      updatedAt: 1000,
+    };
+    const storage = makeStorage([col]);
+    await getActions().init(storage);
+    expect(collectionsStore.getState().collections).toEqual([col]);
+    expect(collectionsStore.getState().loaded).toBe(true);
+  });
+});
+
+describe('createCollection', () => {
+  it('adds a collection', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('My Queries', 'desc');
+    expect(c.name).toBe('My Queries');
+    expect(c.description).toBe('desc');
+    expect(collectionsStore.getState().collections).toHaveLength(1);
+    expect(collectionsStore.getState().collections[0]).toBe(c);
+  });
+
+  it('persists after create', async () => {
+    const storage = makeStorage();
+    const saveSpy = vi.spyOn(storage, 'save');
+    await getActions().init(storage);
+    getActions().createCollection('Test');
+    // allow async persist to run
+    await new Promise(r => setTimeout(r, 0));
+    expect(saveSpy).toHaveBeenCalled();
+  });
+});
+
+describe('deleteCollection', () => {
+  it('removes a collection by id', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('To Delete');
+    expect(collectionsStore.getState().collections).toHaveLength(1);
+    getActions().deleteCollection(c.id);
+    expect(collectionsStore.getState().collections).toHaveLength(0);
+  });
+});
+
+describe('renameCollection', () => {
+  it('changes the collection name', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('Old Name');
+    getActions().renameCollection(c.id, 'New Name');
+    const updated = collectionsStore.getState().collections[0];
+    expect(updated?.name).toBe('New Name');
+  });
+});
+
+describe('addItem', () => {
+  it('adds an item to the correct collection', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('Queries');
+    const item = getActions().addItem(c.id, {
+      name: 'Get User',
+      query: '{ user { id } }',
+    });
+    const col = collectionsStore
+      .getState()
+      .collections.find(x => x.id === c.id)!;
+    expect(col.items).toHaveLength(1);
+    expect(col.items[0]).toMatchObject({
+      name: 'Get User',
+      query: '{ user { id } }',
+    });
+    expect(item.id).toBeTruthy();
+  });
+});
+
+describe('updateItem', () => {
+  it('updates item fields', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('Queries');
+    const item = getActions().addItem(c.id, { name: 'Old', query: '{ a }' });
+    getActions().updateItem(c.id, item.id, { name: 'New', query: '{ b }' });
+    const col = collectionsStore
+      .getState()
+      .collections.find(x => x.id === c.id)!;
+    expect(col.items[0]).toMatchObject({ name: 'New', query: '{ b }' });
+  });
+});
+
+describe('deleteItem', () => {
+  it('removes an item from a collection', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('Queries');
+    const item = getActions().addItem(c.id, { name: 'q1', query: '{ a }' });
+    getActions().addItem(c.id, { name: 'q2', query: '{ b }' });
+    getActions().deleteItem(c.id, item.id);
+    const col = collectionsStore
+      .getState()
+      .collections.find(x => x.id === c.id)!;
+    expect(col.items).toHaveLength(1);
+    expect(col.items[0]?.name).toBe('q2');
+  });
+});
+
+describe('moveItem', () => {
+  it('reorders within the same collection', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('Queries');
+    getActions().addItem(c.id, { name: 'a', query: '{ a }' });
+    getActions().addItem(c.id, { name: 'b', query: '{ b }' });
+    getActions().addItem(c.id, { name: 'c', query: '{ c }' });
+    getActions().moveItem(c.id, 0, c.id, 2);
+    const col = collectionsStore
+      .getState()
+      .collections.find(x => x.id === c.id)!;
+    expect(col.items.map(i => i.name)).toEqual(['b', 'c', 'a']);
+  });
+
+  it('moves an item between different collections', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c1 = getActions().createCollection('C1');
+    const c2 = getActions().createCollection('C2');
+    const item = getActions().addItem(c1.id, { name: 'item', query: '{ x }' });
+    getActions().moveItem(c1.id, 0, c2.id, 0);
+    const col1 = collectionsStore
+      .getState()
+      .collections.find(x => x.id === c1.id)!;
+    const col2 = collectionsStore
+      .getState()
+      .collections.find(x => x.id === c2.id)!;
+    expect(col1.items).toHaveLength(0);
+    expect(col2.items).toHaveLength(1);
+    expect(col2.items[0]?.name).toBe(item.name);
+  });
+
+  it('does nothing for an out-of-bounds index', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('C1');
+    getActions().addItem(c.id, { name: 'a', query: '{ a }' });
+    const before = collectionsStore.getState().collections[0]?.items.length;
+    getActions().moveItem(c.id, 5, c.id, 0);
+    const after = collectionsStore.getState().collections[0]?.items.length;
+    expect(before).toBe(after);
+  });
+});
+
+describe('exportCollections', () => {
+  it('returns valid JSON with version=1', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    getActions().createCollection('Test');
+    const exported = getActions().exportCollections();
+    const parsed = JSON.parse(exported);
+    expect(parsed.version).toBe(1);
+    expect(Array.isArray(parsed.collections)).toBe(true);
+    expect(parsed.collections[0]?.name).toBe('Test');
+  });
+});
+
+describe('importCollections', () => {
+  it('merge mode appends without duplicating by id', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    const c = getActions().createCollection('Existing');
+    const toImport = JSON.stringify({
+      version: 1,
+      collections: [
+        { id: c.id, name: 'Duplicate', items: [], createdAt: 0, updatedAt: 0 },
+        { id: 'new-id', name: 'New', items: [], createdAt: 0, updatedAt: 0 },
+      ],
+    });
+    getActions().importCollections(toImport, 'merge');
+    const state = collectionsStore.getState().collections;
+    expect(state).toHaveLength(2);
+    // existing kept, duplicate skipped, new added
+    expect(state.find(c2 => c2.id === c.id)?.name).toBe('Existing');
+    expect(state.find(c2 => c2.id === 'new-id')?.name).toBe('New');
+  });
+
+  it('replace mode replaces all collections', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    getActions().createCollection('Will be replaced');
+    const replacement = JSON.stringify({
+      collections: [
+        {
+          id: 'imported-1',
+          name: 'Imported',
+          items: [],
+          createdAt: 0,
+          updatedAt: 0,
+        },
+      ],
+    });
+    getActions().importCollections(replacement, 'replace');
+    const state = collectionsStore.getState().collections;
+    expect(state).toHaveLength(1);
+    expect(state[0]?.name).toBe('Imported');
+  });
+
+  it('does nothing on invalid JSON', async () => {
+    const storage = makeStorage();
+    await getActions().init(storage);
+    getActions().createCollection('Keep me');
+    getActions().importCollections('not valid json', 'replace');
+    expect(collectionsStore.getState().collections).toHaveLength(1);
+  });
+});
+
+describe('persistence round-trip', () => {
+  it('save then load restores data', async () => {
+    let persisted: Collection[] = [];
+    const storage: CollectionsStorage = {
+      async load() {
+        return persisted;
+      },
+      async save(cols) {
+        persisted = [...cols];
+      },
+    };
+    await getActions().init(storage);
+    getActions().createCollection('Persistent');
+    // allow persist
+    await new Promise(r => setTimeout(r, 0));
+    // Reset and reload
+    collectionsStore.setState({ collections: [], loaded: false, storage });
+    await getActions().init(storage);
+    expect(collectionsStore.getState().collections[0]?.name).toBe('Persistent');
+  });
+});
+
+describe('createLocalStorageAdapter', () => {
+  it('version mismatch logs warning but preserves data', async () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const key = 'test-collections-key';
+    // Store with version 99
+    localStorage.setItem(
+      key,
+      JSON.stringify({
+        version: 99,
+        collections: [
+          { id: 'x', name: 'Saved', items: [], createdAt: 0, updatedAt: 0 },
+        ],
+      }),
+    );
+    const adapter = createLocalStorageAdapter(key);
+    const result = await adapter.load();
+    expect(result).toHaveLength(1);
+    expect(result[0]?.name).toBe('Saved');
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('version mismatch'),
+    );
+    warnSpy.mockRestore();
+    localStorage.removeItem(key);
+  });
+});
diff --git a/packages/graphiql-plugin-collections/src/store.ts b/packages/graphiql-plugin-collections/src/store.ts
new file mode 100644
index 0000000000..11b9ca95bf
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/store.ts
@@ -0,0 +1,201 @@
+import { createStore } from 'zustand';
+import { createBoundedUseStore } from '@graphiql/react';
+import type { Collection, CollectionItem, CollectionsStorage } from './types';
+import { localStorageAdapter } from './storage/local-storage';
+
+type CollectionsState = {
+  collections: Collection[];
+  loaded: boolean;
+  storage: CollectionsStorage;
+};
+
+type CollectionsActions = {
+  init(storage: CollectionsStorage): Promise<void>;
+  createCollection(name: string, description?: string): Collection;
+  deleteCollection(id: string): void;
+  renameCollection(id: string, name: string): void;
+  addItem(
+    collectionId: string,
+    item: Omit<CollectionItem, 'id' | 'createdAt' | 'updatedAt'>,
+  ): CollectionItem;
+  updateItem(
+    collectionId: string,
+    itemId: string,
+    updates: Partial<Omit<CollectionItem, 'id' | 'createdAt'>>,
+  ): void;
+  deleteItem(collectionId: string, itemId: string): void;
+  moveItem(
+    fromCollectionId: string,
+    fromIndex: number,
+    toCollectionId: string,
+    toIndex: number,
+  ): void;
+  importCollections(json: string, mode: 'merge' | 'replace'): void;
+  exportCollections(): string;
+};
+
+type StoreShape = CollectionsState & { actions: CollectionsActions };
+
+export const collectionsStore = createStore<StoreShape>((set, get) => {
+  const persist = async () => {
+    await get().storage.save(get().collections);
+  };
+
+  return {
+    collections: [],
+    loaded: false,
+    storage: localStorageAdapter,
+    actions: {
+      async init(storage) {
+        const collections = await storage.load();
+        set({ collections, loaded: true, storage });
+      },
+      createCollection(name, description) {
+        const c: Collection = {
+          id: crypto.randomUUID(),
+          name,
+          description,
+          items: [],
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+        };
+        set(s => ({ collections: [...s.collections, c] }));
+        void persist();
+        return c;
+      },
+      deleteCollection(id) {
+        set(s => ({ collections: s.collections.filter(c => c.id !== id) }));
+        void persist();
+      },
+      renameCollection(id, name) {
+        set(s => ({
+          collections: s.collections.map(c =>
+            c.id === id ? { ...c, name, updatedAt: Date.now() } : c,
+          ),
+        }));
+        void persist();
+      },
+      addItem(collectionId, item) {
+        const newItem: CollectionItem = {
+          ...item,
+          id: crypto.randomUUID(),
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+        };
+        set(s => ({
+          collections: s.collections.map(c =>
+            c.id === collectionId
+              ? { ...c, items: [...c.items, newItem], updatedAt: Date.now() }
+              : c,
+          ),
+        }));
+        void persist();
+        return newItem;
+      },
+      updateItem(collectionId, itemId, updates) {
+        set(s => ({
+          collections: s.collections.map(c =>
+            c.id === collectionId
+              ? {
+                  ...c,
+                  updatedAt: Date.now(),
+                  items: c.items.map(i =>
+                    i.id === itemId
+                      ? { ...i, ...updates, updatedAt: Date.now() }
+                      : i,
+                  ),
+                }
+              : c,
+          ),
+        }));
+        void persist();
+      },
+      deleteItem(collectionId, itemId) {
+        set(s => ({
+          collections: s.collections.map(c =>
+            c.id === collectionId
+              ? {
+                  ...c,
+                  items: c.items.filter(i => i.id !== itemId),
+                  updatedAt: Date.now(),
+                }
+              : c,
+          ),
+        }));
+        void persist();
+      },
+      moveItem(fromCollectionId, fromIndex, toCollectionId, toIndex) {
+        const { collections } = get();
+        const fromCollection = collections.find(c => c.id === fromCollectionId);
+        if (
+          !fromCollection ||
+          fromIndex < 0 ||
+          fromIndex >= fromCollection.items.length
+        ) {
+          return;
+        }
+
+        const item = fromCollection.items[fromIndex];
+        if (!item) {
+          return;
+        }
+        const newCollections = collections.map(c => {
+          if (c.id === fromCollectionId && c.id === toCollectionId) {
+            const items = [...c.items];
+            items.splice(fromIndex, 1);
+            items.splice(toIndex, 0, item);
+            return { ...c, items, updatedAt: Date.now() };
+          }
+          if (c.id === fromCollectionId) {
+            return {
+              ...c,
+              items: c.items.filter((_, i) => i !== fromIndex),
+              updatedAt: Date.now(),
+            };
+          }
+          if (c.id === toCollectionId) {
+            const items = [...c.items];
+            items.splice(toIndex, 0, item);
+            return { ...c, items, updatedAt: Date.now() };
+          }
+          return c;
+        });
+        set({ collections: newCollections });
+        void persist();
+      },
+      importCollections(json, mode) {
+        try {
+          const parsed = JSON.parse(json);
+          const incoming: Collection[] = Array.isArray(parsed.collections)
+            ? parsed.collections
+            : Array.isArray(parsed)
+              ? parsed
+              : [];
+          if (mode === 'replace') {
+            set({ collections: incoming });
+          } else {
+            const existing = get().collections;
+            const existingIds = new Set(existing.map(c => c.id));
+            const merged = [
+              ...existing,
+              ...incoming.filter(c => !existingIds.has(c.id)),
+            ];
+            set({ collections: merged });
+          }
+          void persist();
+        } catch {
+          // invalid JSON — no-op
+        }
+      },
+      exportCollections() {
+        return JSON.stringify(
+          { version: 1, collections: get().collections },
+          null,
+          2,
+        );
+      },
+    },
+  };
+});
+
+export const useCollectionsStore = createBoundedUseStore(collectionsStore);
diff --git a/packages/graphiql-plugin-collections/src/test-setup.ts b/packages/graphiql-plugin-collections/src/test-setup.ts
new file mode 100644
index 0000000000..0d74b7352a
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/test-setup.ts
@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
diff --git a/packages/graphiql-plugin-collections/src/types.ts b/packages/graphiql-plugin-collections/src/types.ts
new file mode 100644
index 0000000000..7e364c427f
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/types.ts
@@ -0,0 +1,26 @@
+export type Collection = {
+  id: string;
+  name: string;
+  description?: string;
+  createdAt: number;
+  updatedAt: number;
+  items: CollectionItem[];
+};
+
+export type CollectionItem = {
+  id: string;
+  name: string;
+  query: string;
+  variables?: string;
+  headers?: string;
+  method?: 'GET' | 'POST';
+  createdAt: number;
+  updatedAt: number;
+};
+
+/** Pluggable storage interface. Default localStorage adapter ships with the plugin. */
+export type CollectionsStorage = {
+  storageKey?: string;
+  load(): Promise<Collection[]>;
+  save(collections: Collection[]): Promise<void>;
+};
diff --git a/packages/graphiql-plugin-collections/src/vite-env.d.ts b/packages/graphiql-plugin-collections/src/vite-env.d.ts
new file mode 100644
index 0000000000..ee9857a625
--- /dev/null
+++ b/packages/graphiql-plugin-collections/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vite/client" />
diff --git a/packages/graphiql-plugin-collections/tsconfig.json b/packages/graphiql-plugin-collections/tsconfig.json
new file mode 100644
index 0000000000..ee54eec68c
--- /dev/null
+++ b/packages/graphiql-plugin-collections/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../graphiql-react/tsconfig.json"
+}
diff --git a/packages/graphiql-plugin-collections/vite.config.mts b/packages/graphiql-plugin-collections/vite.config.mts
new file mode 100644
index 0000000000..bd4c54ca60
--- /dev/null
+++ b/packages/graphiql-plugin-collections/vite.config.mts
@@ -0,0 +1,53 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+import dts from 'vite-plugin-dts';
+import packageJSON from './package.json' with { type: 'json' };
+
+export default defineConfig({
+  plugins: [
+    react(),
+    svgr({
+      svgrOptions: {
+        titleProp: true,
+      },
+    }),
+    dts({
+      include: ['src/**'],
+      exclude: [
+        '**/*.spec.{ts,tsx}',
+        '**/*.test.{ts,tsx}',
+        '**/__tests__/',
+        '**/__mocks__/',
+        '**/test-setup.ts',
+      ],
+    }),
+  ],
+  css: {
+    transformer: 'lightningcss',
+  },
+  build: {
+    minify: false,
+    sourcemap: true,
+    lib: {
+      entry: 'src/index.tsx',
+      fileName(_format, entryName) {
+        const filePath = entryName.replace(/\.svg$/, '');
+        return `${filePath}.js`;
+      },
+      formats: ['es'],
+      cssFileName: 'style',
+    },
+    rollupOptions: {
+      external: [
+        'react/jsx-runtime',
+        // Exclude peer dependencies and dependencies from bundle
+        ...Object.keys(packageJSON.peerDependencies),
+        ...Object.keys(packageJSON.dependencies),
+      ],
+      output: {
+        preserveModules: true,
+      },
+    },
+  },
+});
diff --git a/packages/graphiql-plugin-collections/vitest.config.mts b/packages/graphiql-plugin-collections/vitest.config.mts
new file mode 100644
index 0000000000..306f939293
--- /dev/null
+++ b/packages/graphiql-plugin-collections/vitest.config.mts
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    svgr({
+      svgrOptions: {
+        titleProp: true,
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@graphiql/react': path.resolve(
+        __dirname,
+        'src/__mocks__/@graphiql/react.ts',
+      ),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test-setup.ts'],
+  },
+});
diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json
index b500bab639..14ece6b877 100644
--- a/packages/graphiql/package.json
+++ b/packages/graphiql/package.json
@@ -51,6 +51,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@graphiql/plugin-collections": "^0.1.0-alpha.0",
     "@graphiql/plugin-doc-explorer": "^0.4.2",
     "@graphiql/plugin-history": "^0.4.2",
     "@graphiql/react": "^0.37.4",
diff --git a/packages/graphiql/src/GraphiQL.tsx b/packages/graphiql/src/GraphiQL.tsx
index 2263c49455..c8759ef91e 100644
--- a/packages/graphiql/src/GraphiQL.tsx
+++ b/packages/graphiql/src/GraphiQL.tsx
@@ -48,6 +48,10 @@ import {
   DocExplorerStore,
   DOC_EXPLORER_PLUGIN,
 } from '@graphiql/plugin-doc-explorer';
+import {
+  collectionsPlugin,
+  CollectionsSaveButton,
+} from '@graphiql/plugin-collections';
 import {
   ActivityBar,
   GraphiQLLogo,
@@ -81,9 +85,11 @@ export type GraphiQLProps = GraphiQLInterfaceProps &
  *
  * @see https://github.com/graphql/graphiql#usage
  */
+const DEFAULT_PLUGINS = [HISTORY_PLUGIN, collectionsPlugin()];
+
 const GraphiQL_: FC<GraphiQLProps> = ({
   maxHistoryLength,
-  plugins = [HISTORY_PLUGIN],
+  plugins = DEFAULT_PLUGINS,
   referencePlugin = DOC_EXPLORER_PLUGIN,
   onEditQuery,
   onEditVariables,
@@ -215,6 +221,7 @@ const LABEL = {
   prettify: 'Prettify query',
   copy: 'Copy query',
   save: 'Save query',
+  saveToCollection: 'Save to collection',
 };
 
 export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
@@ -521,6 +528,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
                       <SaveIcon aria-hidden="true" />
                     </UnStyledButton>
                   </Tooltip>
+                  <CollectionsSaveButton />
                 </div>
                 {logo}
               </div>
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index c9462281da..8df7b46452 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -6,6 +6,7 @@
 @import '@graphiql/react/style.css';
 @import '@graphiql/plugin-history/style.css';
 @import '@graphiql/plugin-doc-explorer/style.css';
+@import '@graphiql/plugin-collections/style.css';
 
 /**
  * Separate CSS without importing fonts/etc
diff --git a/resources/custom-words.txt b/resources/custom-words.txt
index 2458d69d5a..afdfab1166 100644
--- a/resources/custom-words.txt
+++ b/resources/custom-words.txt
@@ -175,6 +175,7 @@ paas
 pabbati
 picomatch
 pieas
+pluggable
 pnpm
 postbuild
 pratap
diff --git a/yarn.lock b/yarn.lock
index ecc7e00211..bf8d87e2a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3236,6 +3236,30 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@graphiql/plugin-collections@npm:^0.1.0-alpha.0, @graphiql/plugin-collections@workspace:packages/graphiql-plugin-collections":
+  version: 0.0.0-use.local
+  resolution: "@graphiql/plugin-collections@workspace:packages/graphiql-plugin-collections"
+  dependencies:
+    "@graphiql/react": "npm:^0.37.4"
+    "@testing-library/dom": "npm:^10.4.0"
+    "@testing-library/jest-dom": "npm:^6.6.3"
+    "@testing-library/react": "npm:^16.3.0"
+    "@vitejs/plugin-react": "npm:^4.4.1"
+    graphql: "npm:^16.9.0"
+    react: "npm:^19.1.0"
+    react-dom: "npm:^19.1.0"
+    vite: "npm:^6.3.4"
+    vite-plugin-dts: "npm:^4.5.3"
+    vite-plugin-svgr: "npm:^4.3.0"
+    zustand: "npm:^5"
+  peerDependencies:
+    "@graphiql/react": ^0.37.0
+    graphql: ^15.5.0 || ^16.0.0 || ^17.0.0
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
+  languageName: unknown
+  linkType: soft
+
 "@graphiql/plugin-doc-explorer@npm:^0.4.2, @graphiql/plugin-doc-explorer@workspace:packages/graphiql-plugin-doc-explorer":
   version: 0.0.0-use.local
   resolution: "@graphiql/plugin-doc-explorer@workspace:packages/graphiql-plugin-doc-explorer"
@@ -14017,6 +14041,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "graphiql@workspace:packages/graphiql"
   dependencies:
+    "@graphiql/plugin-collections": "npm:^0.1.0-alpha.0"
     "@graphiql/plugin-doc-explorer": "npm:^0.4.2"
     "@graphiql/plugin-history": "npm:^0.4.2"
     "@graphiql/react": "npm:^0.37.4"