Studio tools reference
A Studio tool is a top-level view that you can access through the menu bar.
The most commonly familiar tool is the Structure tool (formerly called "Desk tool"), which lets you browse and edit documents. You can install tools with plugins or create your own. Tools also control the top-level Studio routing.
The tools config property accepts an array of appropriately shaped objects (Tool) or a callback function returning the same. The callback function receives an array of existing tools and a context object as arguments.
Tool properties
Requiredname
string
Unique identifier for the tool.
Requiredtitle
string
Title for the tool. This is what will show up in the navbar.
Requiredcomponent
React.ComponentType
The root component for your tool. This is what shows up in the main work area of your studio.
icon
React.ComponentType
React component for the icon representing the tool. Shown in the navigation menu together with the title.
router
object | Router
Router for the tool. See Router in the API explorer.
options
object | any
Optional configuration object. Passed as arguments to the tool when invoked.
getIntentState
function
Gets the state for the given intent.
canHandleIntent
function
Determines whether the tool can handle the given intent. Receives the intent, its parameters, and a payload; returns a boolean or an object whose keys indicate which parameters can be handled.
Tool context properties
These are the properties received in the second argument of the callback function.
dataset
string
Name of the current dataset.
projectId
string
Unique ID for the project.
schema
object | Schema
The schema registry of your project. Use
schema.get("schemaTypeName")to retrieve any schema by name.currentUser
object | CurrentUser
An object with info about the currently logged-in user.
getClient
function | SanityClient
Callback function that returns a configured client.
Example
// in dev-tool.tsx
import { Card, Text } from '@sanity/ui'
const MyCoolComponent = (props) => {
return (
<Card padding={4} tone="positive">
<Text>I am a very useful tool.</Text>
</Card>
)
}
export const devTool = (config?: any) => ({
name: 'dev-tool',
title: 'Dev Tool',
component: MyCoolComponent,
...config,
})
// in sanity.config.ts
import { defineConfig } from 'sanity'
import { devTool } from './dev-tool'
//... more setup
export default defineConfig({
projectId: 'YOUR_PROJECT_ID',
dataset: 'YOUR_DATASET',
tools: [
devTool(
// overrides the default tool title
{title: 'My better title'}
),
],
// ... more config
})