Studio customization
With Studio customization, you can transform the default editing experience into one that matches your team's needs.
You customize Sanity Studio in code, with React components and configuration, to fit the studio to your team's workflows.
With Sanity Studio customization, you can:
- Create custom input components to provide specialized editing interfaces for your content.
- Design custom document views and structure to organize content in ways that make sense for your team.
- Add visual enhancements with custom icons, theming, and UI components.
- Extend functionality with plugins and custom tools that integrate with your existing systems.
- Localize your studio's interface to support your global team's preferred languages.
Studio or App SDK?
Sanity Studio is a fully featured content management system (CMS) based on your schemas. It's highly customizable and extensible, but it comes with the assumptions and full feature set of a CMS.
Sometimes you need a highly specialized workflow or tool to interact with your content, without the entire editorial toolkit. For those cases, consider building a custom application with the App SDK.
Core concepts
Sanity Studio is designed for customization. The following areas cover the main ways to shape the editing environment for your team.
Custom components
The studio's form builder automatically creates editing interfaces based on your schema definitions, but you can replace any input component with your own custom React component. This lets you create specialized editing experiences for specific content types or fields.
Custom components can range from simple UI enhancements to complex interfaces that integrate with external services or provide specialized editing capabilities.
Custom components for Sanity Studio
Change the look and feel of your Studio and craft tailor-made editorial interactions.
Form components
The Form Components API lets you customize the look and feel of the fields in your studio individually, or at a root level that will affect every field in the Studio.
Create a time duration object field
Delight your content creators with intelligent inputs for more complex data structures
Create a “coupon generator” string field input
Take the guesswork out of creating fields with correct values and automate content creation for authors.
Create an array input field with selectable templates
Add buttons that fill complex fields in one click, so content creators skip repetitive tasks.
Create a document form progress component
Summarize form progression by decorating the entire editing form for a document with a component loaded at the root level.
Create a visual string selector field input
Go beyond a plain radio list of inputs by giving authors more contextually useful buttons to select values from.
Create a survey rating number field input
Give content creators quick access to valid values by replacing the default number field input with a list of options.
Structure Builder
The Structure Builder gives you complete control over how documents are organized and presented in your studio. You can customize document lists, create custom views, build specialized navigation, and design intuitive workflows for your content editors.
With Structure Builder, you can move beyond the default document type lists to create an information architecture that matches your team's mental model of the content.
Visual customization
Sanity Studio can be visually customized to match your brand or to improve the editing experience. This includes:
- Theming: Customize colors and typography.
- Icons: Replace default icons with custom ones for document types and fields.
- Sanity UI: Build custom components with
@sanity/uiso they match the studio's look. - Favicons: Add your own favicon to make your studio recognizable in browser tabs.
Icons
Use icons for types to display in the creation dialogue and when you're missing an media preview.
Favicons
A "favicon" appears in places such as browser tabs, the URL field, and browser bookmarks. Learn how to replace the default Sanity icon with your own.
Theming Sanity Studio
Learn how to customize the styling and branding of your studio
Sanity UI
Keep your custom studio elements consistent with built-in UI components.
Tools and plugins
Your studio can be extended with custom tools and plugins that add new functionality to the editing environment:
- Custom tools: Create entirely new sections in your studio for specialized workflows.
- Plugins: Install or create plugins that add features like the Dashboard or AI Assist.
- Integrations: Connect your studio to external services and systems.
Limitations
- Custom input components must write changes as patches through the
onChangecallback, so edits stay in sync with other people editing the same document in real time. For more information, see From input components to real-time safe patches. - Some advanced customizations may require deeper knowledge of React and Sanity Studio's APIs.
- Custom tools and plugins may need to be updated when new versions of Sanity Studio are released.