Developing Custom Sanity Studio Plugins
Sanity Studio plugin is an npm package that adds new tools, fields, components, actions to Studio. Registered via plugins array in sanity.config.ts. Official plugins (@sanity/vision, @sanity/media) follow the same pattern.
definePlugin — Foundation
// src/index.ts
import { definePlugin } from 'sanity'
import { MyTool } from './components/MyTool'
export const myPlugin = definePlugin((config = {}) => {
return {
name: 'my-plugin',
tools: [
{
name: 'my-dashboard',
title: 'Dashboard',
icon: () => '📊',
component: MyTool,
},
],
}
})
Tool Component
// src/components/MyTool.tsx
import { useState, useEffect } from 'react'
import { useClient } from 'sanity'
export function MyTool() {
const client = useClient({ apiVersion: '2024-01-01' })
const [stats, setStats] = useState<any>(null)
useEffect(() => {
async function fetchStats() {
const posts = await client.fetch(`count(*[_type == "post"])`)
setStats({ posts })
}
fetchStats()
}, [client])
return (
<div style={{ padding: 24 }}>
<h2>Content Dashboard</h2>
<div style={{ fontSize: 32, fontWeight: 700 }}>
{stats?.posts || 0}
</div>
<p>Published articles</p>
</div>
)
}
Document Badge
// src/badges/seoStatus.ts
import type { DocumentBadgeComponent } from 'sanity'
export const seoBadge: DocumentBadgeComponent = props => {
const { published } = props
if (!published) return null
const hasAllMeta = published.seoTitle && published.seoDescription
return hasAllMeta
? { label: 'SEO ✓', color: 'success' }
: { label: 'SEO missing', color: 'warning' }
}
Timeline
Development of plugin with dashboard, custom actions and badges — 4–6 days.