Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

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.

Tool Properties

  • 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

Tool Context Properties

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

Example

// 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
})

Was this article helpful?