Get a peek at our latest innovations at Sanity Product Day on Dec 8th →


By Rico Kahler

The Sanity Desk Tool Pane with Super Powers


The Sanity Desk Tool Pane with Super Powers

CleanShot 2021-03-25 at 09 00 11

Status: ⚠️ MVP/EARLY ALPHA. There is much more (eventually) planned for this thing. Stay tuned/Watch Releases to be notifed with updates.

Please report bugs!


Super Pane aims to replace the traditional document type list pane in the Sanity Studio for certain documents that need more editing power. The goal of Super Pane is to enable more bulk editing and quick scanning while not losing any of the live-edit/reactivity of Sanity.

Super Pane aims to feel Sanity-y via @sanity/ui other integrations.


# note: the alpha tag is needed at this time
yarn add sanity-super-pane@alpha

Then integrate Super Pane using the structure builder:

import S from '@sanity/desk-tool/structure-builder';
import { createSuperPane } from 'sanity-super-pane';

export default () =>
      S.listItem().title('Normal List').child(createSuperPane('movie', S)),

Local development

Here is the first time setup for this lib:


First, clone the repo (or a fork), and then install with npm

Note: installing with npm instead of yarn is required.

npm i

Create a sample project with the movie dataset

The login into the sanity CLI

npx sanity login

Then create a temporary project via the CLI. We'll use this create project entry in your Sanity account with the example movie dataset.

npx sanity init -y \
  --create-project "super-pane-dev" \
  --dataset production \
  --visibility private \
  --template moviedb \
  --output-path ./temp-movie-project

After this is done grab the project ID:

cat ./temp-movie-project/sanity.json | grep projectId

Then you create a .env.development file for development:


Finally delete the temp-movie-project folder.

Start the dev server

npm start


  1. Open an issue first so we can quickly align on the what and how.
  2. Fork this repo to your own Github account or org.
  3. Create a new branch (e.g. feat/new-feature, fix/the-bug, etc) and commit following the Angular Commit Message Conventions. This is important because this repo is managed via semantic-release. Semantic-release parses these messages to determine version numbers.

Install command

yarn add sanity-super-pane@alpha


Other plugins by author

Sanity Codegen
- has 28 likes

Generate TypeScript types from your Sanity schemas. Also includes a simple and tiny (<1kB) TypeScript powered client. Built for Jamstack apps.

Rico Kahler
Go to Sanity Codegen