Tool API
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.
REQUIREDnamestring
Unique identifier for the tool
REQUIREDtitlestring
Title for the tool. This is what will show up in the navbar.
componentReact.ComponentType
The root component for your tool. This is what shows up in the main work area of your studio.
routerobject |Â Router
TODO
optionsobject |Â any
Optional configuration object. Passed as arguments to the tool when invoked.
getIntentStatefunction
TODO
canHandleIntentboolean | function
These are the properties received in the second argument of the callback function.
datasetstring
Name of the current dataset
projectIdstring
Unique ID for the project
schemaobject |Â Schema
The schema registry of your project. Use `schema.get("schemaTypeName") to retrieve any schema by name.
currentUserobject |Â CurrentUser
An object with info about the currently logged in user.
getClientfunction | SanityClient
Callback function that returns a configured client
// in dev-tool.tsx
import { ToolIcon } from '@sanity/icons'
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: '<projectId>',
dataset: 'production',
tools: [
myTool(
// overrides the default tool title
{title: 'My better title'}
),
],
// ... more config
})