Adding the dashboard tool to a Sanity configuration in version 3.

10 replies
Last updated: Dec 13, 2022
Hello! I just migrated my personal website that i did with the sanity + gatsby starter, from version 2 to version 3 of sanity. All seems to be working fine, but not sure how should i add the dashboard tool to my config. Any thoughts? Thank you!
AI Update

Congrats on migrating to Sanity v3! Adding the dashboard tool to your config is pretty straightforward, though there's something important to note about how things work in v3.

In Sanity Studio v3, the configuration structure has changed from v2. The dashboard tool is now added through the plugin system in your sanity.config.ts or sanity.config.js file.

Here's how to add the dashboard tool:

1. Install the dashboard plugin:

npm install @sanity/dashboard

2. Add it to your studio configuration:

import {defineConfig} from 'sanity'
import {dashboardTool} from '@sanity/dashboard'

export default defineConfig({
  // ... your other config
  plugins: [
    dashboardTool({
      widgets: [
        // Add your widgets here
      ]
    }),
    // ... other plugins
  ],
})

3. Add widgets to your dashboard (optional but recommended):

The dashboard tool supports various widgets like projectInfo and projectUsers. Here's an example with some common widgets:

import {defineConfig} from 'sanity'
import {dashboardTool} from '@sanity/dashboard'
import {projectInfoWidget} from '@sanity/dashboard'
import {projectUsersWidget} from '@sanity/dashboard'

export default defineConfig({
  // ... your other config
  plugins: [
    dashboardTool({
      widgets: [
        projectInfoWidget(),
        projectUsersWidget()
      ]
    }),
  ],
})

Important note: There's also a newer organizational Dashboard that's separate from the Studio dashboard plugin. The organizational Dashboard is the hub for your organization's content operations and shows deployed studios and apps. The @sanity/dashboard plugin is specifically for adding a dashboard view within your Studio itself.

For the Studio plugin, you can find available dashboard widgets on the Sanity Exchange to customize your dashboard further. The main difference from v2 is that you now use the dashboardTool function in the plugins array instead of the old parts system.

Can you send your config?
Yes:
// sanity.config.js

import { defineConfig } from "sanity";

import { deskTool } from 'sanity/desk'

import schemas from './schemas/schema'

import { visionTool } from '@sanity/vision'

import deskStructure from './src/structure/deskStructure'

import dashboard from './src/dashboardConfig'


export default defineConfig({

title: "Testing Sanity v3",

projectId: "zfgtf7ck",

dataset: "production",

plugins: [

deskTool({

structure: deskStructure

}),

visionTool(),

],

tools: (prev) *=>* {

// πŸ‘‡ Uses environment variables set by Vite in development mode

if (<http://import.meta.env.DEV|import.meta.env.DEV>) {

return prev

}

return prev.filter((tool) *=>* tool.name !== 'vision')
},
schema: {
types: schemas,
},
document: {
newDocumentOptions: (prev, { creationContext })
*=>* {
if (creationContext.type === 'global') {
return prev.filter((templateItem)
*=>* templateItem.templateId != 'siteSettings')
}
return prev
},
actions: (prev, { schemaType })
*=>* {
if (schemaType === 'siteSettings') {
return prev.filter(({ action })
*=>* !['unpublish', 'delete','duplicate'].includes(action))
}
return prev
},
},
});
sorry, this way its cleaner to read:
Shouldnt tools be inside Plugins? Currently in cellphone
Very true! , sorry just another question, how should i reference it?Thank you so much!
Reference to dashboard?
Yes. How should i write it in the code? so sorry im completely black in regards of how to include it.
You can read more about it here ! Let me know if you still stuck after reading through here
Omg, you legend. Thank you! I was able to solve it!
Congrats!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?