# @sanity/vision > Sanity plugin for running/debugging GROQ-queries against Sanity datasets Latest version **6.21.0** (published 2026-10-29) · MIT license · 0 weekly downloads ## Install ```sh npm install @sanity/vision pnpm add @sanity/vision yarn add @sanity/vision bun add @sanity/vision ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 6.21.0 | | Published | 2026-10-29 | | First published | 2017-10-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM | | Node | >=22.12 | | Dependencies | 37 | | Unpacked size | 2.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 6363 | | Author | Sanity.io | | Maintainers | sanity-svc.npm, sanity-io | | Keywords | admin, cms, content, gui, headless, realtime, sanity, sanity-plugin, vision | ## Links - npm: https://www.npmjs.com/package/@sanity/vision - Repository: https://github.com/sanity-io/sanity - Homepage: https://www.sanity.io/ - Issues: https://github.com/sanity-io/sanity/issues - npm.io page: https://npm.io/package/@sanity/vision ## Dependencies (37) - [ui5](https://npm.io/package/ui5.md) npm:@sanity/ui@5.0.0-alpha.17 - [cobe](https://npm.io/package/cobe.md) ^2.0.1 - [rxjs](https://npm.io/package/rxjs.md) ^7.8.2 - [json5](https://npm.io/package/json5.md) ^2.2.3 - [dequal](https://npm.io/package/dequal.md) ^2.0.3 - [motion](https://npm.io/package/motion.md) ^14.6.0 - [xstate](https://npm.io/package/xstate.md) ^5.33.2 - [groq-js](https://npm.io/package/groq-js.md) ^2.0.0 - [react-rx](https://npm.io/package/react-rx.md) ^7.1.0 - [lodash-es](https://npm.io/package/lodash-es.md) ^4.18.1 - [quick-lru](https://npm.io/package/quick-lru.md) ^7.3.0 - [@sanity/ui](https://npm.io/package/@sanity/ui.md) ^4.4.9 - [json-2-csv](https://npm.io/package/json-2-csv.md) ^5.5.9 - [@sanity/uuid](https://npm.io/package/@sanity/uuid.md) ^3.0.3 - [@pierre/diffs](https://npm.io/package/@pierre/diffs.md) ^1.6.1 - [@sanity/color](https://npm.io/package/@sanity/color.md) ^3.0.9 - [@sanity/icons](https://npm.io/package/@sanity/icons.md) ^5.2.3 - [@xstate/react](https://npm.io/package/@xstate/react.md) ^6.1.0 - [is-hotkey-esm](https://npm.io/package/is-hotkey-esm.md) ^1.0.0 - [@sanity/client](https://npm.io/package/@sanity/client.md) ^8.11.0 - [@sanity/schema](https://npm.io/package/@sanity/schema.md) 6.21.0 - [@codemirror/lint](https://npm.io/package/@codemirror/lint.md) ^6.9.7 - [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.43.15 - [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.2.3 - [react-focus-lock](https://npm.io/package/react-focus-lock.md) ^2.13.7 - [use-effect-event](https://npm.io/package/use-effect-event.md) ^2.0.4 - [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.7.6 - [@codemirror/search](https://npm.io/package/@codemirror/search.md) ^6.7.2 - [@sanity/lezer-groq](https://npm.io/package/@sanity/lezer-groq.md) ^1.0.4 - [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.11.1 - [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.13.1 - [@uiw/react-codemirror](https://npm.io/package/@uiw/react-codemirror.md) ^4.25.12 - [@sanity-labs/groq-wasm](https://npm.io/package/@sanity-labs/groq-wasm.md) ^1.1.0 - [@codemirror/autocomplete](https://npm.io/package/@codemirror/autocomplete.md) ^6.20.4 - [@rexxars/react-split-pane](https://npm.io/package/@rexxars/react-split-pane.md) ^1.0.0 - [@codemirror/lang-javascript](https://npm.io/package/@codemirror/lang-javascript.md) ^6.2.5 - [@rexxars/react-json-inspector](https://npm.io/package/@rexxars/react-json-inspector.md) ^9.0.1 ## Alternatives - [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads - [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads - [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads - [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads - [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads ## Recent versions - 6.21.0 (latest) — 2026-10-29 - 6.21.1-next.2 (next) — 2026-10-29 - 6.15.0 (stable) — 2026-09-17 - 4.22.1 (maintenance-v4) — 2026-08-19 - 5.31.2 (maintenance-v5) — 2026-08-19 - 6.5.0-workbench.20260714145319 (workbench) — 2026-07-14 - 6.0.0-next-major.20260611102044 (next-major) — 2026-06-11 - 5.25.0-canary.20260507124900 (canary) — 2026-05-07 - 5.14.2-alpha.15 (alpha) — 2026-03-11 - 4.20.2-fix-tsa-expression-not-allowed.2.5e90622c2d (fix-tsa-expression-not-allowed) — 2025-12-04 - 4.20.2-fix-babel-traverse-bug.2.03a7495fed (fix-babel-traverse-bug) — 2025-12-04 - 4.1.2-rita-prerelease-ref.28 (rita-prerelease-ref) — 2025-07-24 - 4.1.2-4.2.0-rita-prerelease-tag.0.28 (4.2.0-rita-prerelease-tag.0) — 2025-07-23 - 4.1.1-bump-pkg-utils.6 (bump-pkg-utils) — 2025-07-22 - 3.99.1-bitter-lemon.5 (bitter-lemon) — 2025-07-18 - … 4729 more at https://npm.io/package/@sanity/vision/versions ## README # sanity-vision Vision is a plugin for Sanity Studio for testing GROQ queries. It features: - GROQ syntax highlighting so that the query is easier to read - Parsed response that's more convenient to navigate and explore - Switching between datasets - Listening for real-time updates ![Screenshot](assets/screenshot.png) ## Installation `npm install --save-exact @sanity/vision` ### Configuring ```ts import {visionTool} from '@sanity/vision' // `sanity.config.ts` / `sanity.config.js`: import {defineConfig} from 'sanity' export default defineConfig({ // ... plugins: [ visionTool({ // Note: These are both optional defaultApiVersion: 'v2021-10-21', defaultDataset: 'some-dataset', }), ], }) ``` ### Only enabling it for development If you only want the Vision tool available in development (e.g., not in deployed studios), you can import and use the `isDev` constant from the `sanity` package: ```ts import {visionTool} from '@sanity/vision' // `sanity.config.ts` / `sanity.config.js`: import {defineConfig, isDev} from 'sanity' const devOnlyPlugins = [visionTool()] export default defineConfig({ // ... plugins: [ // ... your other plugins here ... ...(isDev ? devOnlyPlugins : []), ], }) ``` ### Only enabling it for administrators If you only want the Vision tool available to administrators, you can use the [Tool API](https://www.sanity.io/docs/studio-tools) to filter out the tool based on role: ```ts import {visionTool} from '@sanity/vision' // `sanity.config.ts` / `sanity.config.js`: import {defineConfig} from 'sanity' export default defineConfig({ // ... name, title, projectId, dataset, etc. plugins: [ // ... your other plugins here ... visionTool(), ], tools: (prev, {currentUser}) => { const isAdmin = currentUser?.roles.some((role) => role.name === 'administrator') // If the user has the administrator role, return all tools. // If the user does not have the administrator role, filter out the vision tool. return isAdmin ? prev : prev.filter((tool) => tool.name !== 'vision') }, }) ``` ## License MIT-licensed. See LICENSE. --- _Source: https://npm.io/package/@sanity/vision · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._