Studio customization
With Studio customization, you can transform the default editing experience into one that matches your team's needs.
While the Studio provides an excellent out-of-the-box experience, its true power lies in its extensive customization capabilities. The React-based framework lets you tailor the editorial experience to your specific 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 the Studio 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. While highly customizable and extendable, it does come with the assumptions and all the bells and whistles of a CMS.
If you rather need a highly specialized workflow or tool to interact with your content without front-loading the entire editorial toolkit, you might consider building a custom application using the App SDK.
Core concepts
Sanity Studio is built from the ground up with customization in mind. Understanding these core customization areas will help you create the perfect 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 allows you to 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 component 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
Make repetitive content creation tasks a breeze by supplying content creators with buttons to populate complex fields.
Create a document form progress component
Summarise 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.
Create a time duration object field
Delight your content creators with intelligent inputs for more complex data structures
Structure builder
The Structure Builder gives you complete control over how documents are organized and presented in the 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, typography, and spacing.
- Icons: Replace default icons with custom ones for document types and fields.
- Sanity UI: Use the built-in UI component library to create consistent interfaces.
- Favicons: Add your own favicon to make the 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, URL field and browser bookmarks. Learn how to replace the default Sanity icon with your own.
Theming
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
The Studio can be extended with custom tools and plugins that add new functionality to the editing environment:
- Custom tools: Create entirely new sections in the Studio for specialized workflows.
- Plugins: Install or create plugins that add features like the Dashboard, Comments, or AI Assist.
- Integrations: Connect the Studio to external services and systems.
Limitations
- Custom components should be compatible with Sanity's real-time collaboration system.
- Some advanced customizations may require deeper knowledge of React and Sanity's internal APIs.
- Custom tools and plugins may need to be updated when new versions of the Studio are released.
Was this page helpful?