Tools cheat sheet
Common code snippets to help customize the Studio tool experience.
Tools are a powerful way to add additional functionality to Sanity Studio. Here are some ways of customizing how tools work within Studio.
Tools are ordered as they are added in the tools array, followed by tools that are added via plugins in the plugins array. A tool within a plugin can override the default ordering via the studio.components.toolMenu.tools property in the plugin config. And likewise, you can edit this order by accessing this property yourself in the config. In the example below, we make sure that the Structure tool always comes first in the menu:
// sanity.config.ts
export default defineConfig({
name: 'default',
title: 'test',
projectId: 'kh2fp3g7',
dataset: 'production',
studio: {
components: {
toolMenu: (props) => {
const {tools, renderDefault} = props
const structureTool = tools.find(({name}) => name == 'structure')
const otherTools = tools.filter(({name}) => name != 'structure')
if (!structureTool) {
return renderDefault(props)
}
return props.renderDefault({
...props,
tools: [structureTool, ...otherTools],
})
},
},
},
plugins: [structureTool()],
tools: [myCustomTool, myOtherCustomTool],
schema: {
types: schemaTypes,
},
})Sometimes you need to display a tool only in development environments. You can import and use the isDev boolean helper to check the state of the environment. In this example, the Studio displays the Vision and Structure tools in development, but just the Structure tool in other environments.
import {defineConfig, isDev} from 'sanity'
import {structureTool} from 'sanity/structure'
import {visionTool} from '@sanity/vision'
export default defineConfig({
// ...
plugins: isDev
? [structureTool(), visionTool()]
: [structureTool()],
})