Studio Plugins
Plugins allow you to 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.
Requirements
- Most plugins require Sanity Studio v3 or later. We suggest updating to v4+.
Core concepts
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.
Installation and configuration
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.
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:
export default defineConfig({
// ...
plugins: [
customPlugin({
customOption: true
}
]
})
Plugin development
Plugins are created using the definePlugin
function, which accepts most of the same properties as the defineConfig
API. This allows you to 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.
Publishing plugins
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 handles bundling and other package preparation tasks.
Internationalization
Plugins can support multiple languages through Sanity's internationalization API. This allows plugin UI elements to be displayed in the user's preferred language, enhancing the user experience for international teams.
Limitations
- 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.
Was this page helpful?