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?
Studio is highly customizable, but expects an end goal of editing content aligned with your schema. If you're looking to build more complex interfaces that deviate drastically from Studio, the App SDK might be a better solution.
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.
Custom authentication
The Studio can be configured to use your own login solution rather than the standard ones by supplying the auth provider details in your studio configuration.
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.
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?