Studio hooks provide access to Studio-level context and functionality. These hooks must be used within components rendered inside the Studio.
Access the configured Studio tools.
import {useTools} from 'sanity'
function ToolSwitcher() {
const tools = useTools()
return (
<div>
{tools.map(tool => (
<button key={tool.name}>
{tool.icon && <tool.icon />}
{tool.title}
</button>
))}
</div>
)
}
Array of configured Studio toolsTool identifier (used in URL)
useWorkspace
Access the current workspace configuration.
import {useWorkspace} from 'sanity'
function WorkspaceInfo() {
const workspace = useWorkspace()
return (
<div>
<h2>{workspace.title}</h2>
<p>Project: {workspace.projectId}</p>
<p>Dataset: {workspace.dataset}</p>
</div>
)
}
Current workspace configuration useWorkspaces
Access all configured workspaces (for multi-workspace Studios).
import {useWorkspaces} from 'sanity'
function WorkspaceSelector() {
const workspaces = useWorkspaces()
return (
<select>
{workspaces.map(ws => (
<option key={ws.name} value={ws.name}>
{ws.title}
</option>
))}
</select>
)
}
Array of all configured workspaces
useColorScheme
Access and control the Studio color scheme.
import {useColorScheme} from 'sanity'
function ThemeSwitcher() {
const {scheme, setScheme} = useColorScheme()
return (
<button onClick={() => setScheme(scheme === 'dark' ? 'light' : 'dark')}>
{scheme === 'dark' ? '☀️' : '🌙'}
</button>
)
}
scheme
'light' | 'dark' | 'system'
Current color scheme
setScheme
(scheme: 'light' | 'dark' | 'system') => void
Function to change the color scheme
useFeatureEnabled
Check if a Studio feature is enabled.
import {useFeatureEnabled} from 'sanity'
function ConditionalFeature() {
const isEnabled = useFeatureEnabled('myFeature')
if (!isEnabled) return null
return <div>Feature content</div>
}
Name of the feature to check
Whether the feature is enabled
useCurrentUser
Access information about the currently logged-in user.
import {useCurrentUser} from 'sanity'
function UserProfile() {
const currentUser = useCurrentUser()
if (!currentUser) return <div>Not logged in</div>
return (
<div>
<img src={currentUser.profileImage} alt={currentUser.name} />
<h3>{currentUser.name}</h3>
<p>{currentUser.email}</p>
</div>
)
}
Current user information or null if not authenticatedURL to user’s profile image
User’s roles in the project
useStudioUrl
Generate URLs to different parts of the Studio.
import {useStudioUrl} from 'sanity'
function DocumentLink({documentId, documentType}: Props) {
const {resolveUrlFor} = useStudioUrl()
const url = resolveUrlFor({
intent: 'edit',
id: documentId,
type: documentType
})
return <a href={url}>Edit document</a>
}
resolveUrlFor
(params: UrlParams) => string
Function to resolve Studio URLsURL parametersintent
'edit' | 'create'
required
Intent type
Document ID (for edit intent)
Additional query parameters
useConnectionState
Monitor the Studio’s connection to Sanity’s backend.
import {useConnectionState} from 'sanity'
function ConnectionStatus() {
const connectionState = useConnectionState()
return (
<div>
Status: {connectionState}
</div>
)
}
connectionState
'connected' | 'connecting' | 'reconnecting' | 'disconnected'
Current connection state
useSource
Access the current source (workspace) context.
import {useSource} from 'sanity'
function SourceInfo() {
const source = useSource()
return (
<div>
<p>Project: {source.projectId}</p>
<p>Dataset: {source.dataset}</p>
</div>
)
}
Source configuration and utilitiesgetClient
(options: SourceClientOptions) => SanityClient
Function to get a configured client
Example: Custom Status Bar
import {
useCurrentUser,
useConnectionState,
useWorkspace,
useColorScheme
} from 'sanity'
import {Card, Flex, Text, Badge} from '@sanity/ui'
function StatusBar() {
const user = useCurrentUser()
const connection = useConnectionState()
const workspace = useWorkspace()
const {scheme, setScheme} = useColorScheme()
return (
<Card padding={3} borderTop>
<Flex justify="space-between" align="center">
<Flex gap={3} align="center">
<Badge tone={connection === 'connected' ? 'positive' : 'critical'}>
{connection}
</Badge>
<Text size={1} muted>
{workspace.title} • {user?.name}
</Text>
</Flex>
<button onClick={() => setScheme(scheme === 'dark' ? 'light' : 'dark')}>
Toggle theme
</button>
</Flex>
</Card>
)
}