Studio plugins

Plugins let you extend and customize Sanity Studio with additional functionality.

Studio plugins provide a way to reuse pieces of Studio configurations across multiple studios and workspaces, while also helping you organize your studio features and reduce clutter in your configuration.

You can even use plugins from the community to add new schema types, input components, tools, and other features to enhance your content editing experience without having to build everything from scratch.

Here are some ways you can use Studio plugins:

• Add specialized input components like color pickers, map interfaces, multi-select arrays, and more.
• Create custom tools that appear in the Studio navigation.
• Add internationalization support for multiple languages.
• Share complex schema types. For example, the experimental @sanity/presets package ships ready-made types for pages, links, images, SEO metadata, and rich text.

You can find a collection of official and community plugins on the Sanity Exchange, and in the official plugins repo.

• Official plugins require Sanity Studio v5 or later. Check each plugin's peerDependencies for its supported range.

Understanding how plugins work in Sanity Studio will help you both use existing plugins and develop your own. If you're using any official plugins like Vision or Presentation, you may have already seen these concepts in action.

Plugins for Sanity Studio are installed like any other dependency using your package manager. After installation, import the plugin and add it to the plugins array in your studio configuration.

npm install @sanity/color-input

pnpm add @sanity/color-input

yarn add @sanity/color-input

bun add @sanity/color-input

import {defineConfig} from 'sanity'
import {colorInput} from '@sanity/color-input'

export default defineConfig({
  // ...
  plugins: [colorInput()],
})

Many plugins accept configuration options that can be passed when initializing the plugin. In this example, customPlugin is a placeholder for the plugin you installed:

export default defineConfig({
  // ...
  plugins: [
    customPlugin({
      customOption: true
    })
  ]
})

Plugins are created using the definePlugin function, which accepts most of the same properties as the defineConfig API. This lets you encapsulate specific functionality and configuration in a portable way.

import { definePlugin } from 'sanity'

export const myPlugin = definePlugin({
  name: 'my-custom-plugin',
  // Add schema types, tools, components, etc.
})

Plugins can also include other plugins, allowing you to build features on top of each other in a modular way.

When you've developed a plugin that you want to share with others, you can publish it as an npm package. The recommended approach is to use @sanity/plugin-kit, which scaffolds and verifies your plugin package and sets it up to build with @sanity/pkg-utils.

Plugins can support multiple languages through Sanity's internationalization API. Plugin UI then displays in each user's preferred language.

• Some areas of the Studio UI may not fully support plugin customization.
• Plugins must be compatible with the version of Sanity Studio you're using.
• Plugins with complex dependencies may increase your Studio bundle size.