Sanity Studio: the missing UX guide

Sanity Studio is an extremely flexible tool that allows you to create a powerful and customizable Content Management System (CMS). However, when dealing with complex data structures, it can be challenging to navigate due to the lack of detailed official guidelines.

We’ve been fortunate to use Sanity in many projects, such as Giulia by Treccani and Tomasi Auto, and over time, we’ve developed guidelines to ensure an excellent UX—not just for the website as seen by the end user, but also for the editors working within the CMS.

In this article, we share our firsthand experience with Sanity Studio and the best practices we’ve developed to tackle these challenges effectively.

• What is Sanity?
• Why it’s changing the way content is managed on the Web and mobile
• Who is responsible for the UX of Sanity Studio?
• Design belongs to designers… Even in the CMS!
• The UX of Sanity Studio: our guidelines
• Conclusions

What is Sanity?

Sanity is a CMS platform that combines a cloud database with a headless approach, giving companies the freedom to shape content management according to their needs, without the constraints of predefined structures.

Sanity Studio is the editing software connected to the CMS. It is an open-source application based on React, designed to be fully flexible and adaptable, allowing users to customize the interface and workflows intuitively and tailor them to their needs.

Used by companies such as Cloudflare, Figma, Puma, and Shopify, Sanity enables the creation of custom interfaces, integration of data from external sources, and development of personalized workflows, making it the ideal choice for those seeking a powerful, scalable, and modern CMS.

Why it’s changing the way content is managed on the Web and mobile

Sanity and other API-first solutions have emerged as alternatives to traditional CMS platforms like WordPress, thanks to their flexibility, scalability, and performance. Unlike monolithic systems, the headless approach allows content to be managed in a structured way and distributed across any channel, from websites and apps to social media and e-commerce.

Since Sanity Studio is built on React, it gives developers complete freedom to customize the experience, avoiding the limitations imposed by WordPress themes and plugins. Additionally, its cloud-based architecture ensures better performance, reduces maintenance needs, and enhances security.

Who is responsible for the UX of Sanity Studio?

Imagine a new project: everyone is rushing to define the website design—flows and navigation architecture, sketches and wireframes, then the UI in Figma. And the CMS? Well, that’s a developer’s task! So, the unlucky developer has to quickly and haphazardly determine the structure and content entry methods they find most suitable, tackling both functional and technical aspects as well as the user experience of the editorial back office.

Without any guidelines from the design team and with little to no insight into who will use the CMS, how often, and for what purposes, the developer ends up relying on predefined solutions, standard structures, or their own interpretation of what might work. The result is a functional but often unintuitive or inefficient interface—one that doesn’t facilitate the user but instead reflects the developer’s logic. It’s only natural: while the developer focuses on making things work, the designer focuses on making them clear for those who will use them.

Design belongs to designers… Even in the CMS!

This is why the responsibility for crafting the CMS UX must be shared. Only through a “four-hands” approach can we achieve a result that balances both technical requirements and user needs. Collaboration between teams is the first step, but ideally, this should lead to standardization—allowing developers to work more independently, guided by predefined rules and best practices.

Think about who uses a CMS: editors, administrators, marketers, SEO specialists, developers, but also teachers, office employees, and occasional users. This diverse group has varying goals and levels of technical expertise. They need to add new content, update articles and news, modify outdated pages, expand existing sections, and manage SEO. Just like website users, CMS users also deserve a smooth and intuitive experience.

The benefits of good UX are clear:

• Daily data entry and updates become easier, reducing cognitive load, frustration, and inefficiency.
• Errors and inconsistencies are minimized.
• It becomes easier for new users to interact with the cms, even those unfamiliar with complex systems. This makes the client more independent in managing their site.
• The client is more satisfied and has a better perception of the work delivered.

Sanity, by giving us full control over CMS development from the ground up, allows us to refine every aspect of the UX and deliver a product that is not only usable but also tailored to the client’s specific needs. This task isn’t always simple—it requires alignment and collaboration across the entire design team—but the results are well worth the effort.

The UX of Sanity Studio: our guidelines

We have tried to define a set of best practices designed for Sanity Studio – but which, in a broader sense, can serve as inspiration for any CMS. We don’t claim to write universal rules, as every team is different and must find its own methods; instead, we prefer to focus on key concepts we’ve encountered over years of design, hoping they can help you avoid some mistakes and trial-and-error along the way.

1. Take care of the information architecture

The first aspect to focus on is definitely the information architecture. It’s like a website’s navigation menu: its functionality and underlying logic must be immediately clear. This means structuring the navigation into intuitive sections.

There are different approaches you can take. A classic model, similar to other CMS platforms like WordPress, might include separate sections for pages, blog articles, and settings. In other cases, it might make more sense to structure it based on the specific content of the site. With complete freedom in structuring the CMS, you have a powerful tool in your hands that allows for highly customized design.

For this reason, if possible, we recommend following the end user’s mental model: organize content according to hierarchies and relationships that make sense for them, not just for you.

Case study: We designed a website for a company specializing in large-format advertising. The two main sections for content entry are Location and Projects—reflecting the type of content they need to manage. In short, speak your client’s language: this will help you create a more customized and, therefore, more intuitive product.

Pro tip: Keep the architecture streamlined by avoiding too many subpages. In Sanity, the risk of creating an endless matryoshka effect of sidebars is always lurking. Favor horizontal structures to prevent important sections from getting “lost” in the depths of the CMS.

2. Organize components clearly and neatly

Sanity allows you to customize all menu items and inputs within the CMS. Follow some best practices to make the structuring of components more intuitive:

Keep it simple. Structure components so they make sense, and avoid creating too many or making them overly complex. Components that differ only in small details can be merged; for example, a manually scrolling photo gallery and an automatically scrolling one can be a single component, with an option for the user to enable or disable automatic scrolling.

This approach requires more effort in the initial phase of organizing components. The developer must analyze the design and translate it into the most streamlined structure possible. In this, they can (and should) rely on the designer, who can structure components and blocks during the design phase with both the CMS user experience and the developer’s workflow in mind.

Be clear. Component names matter—they are the only way users can identify them when selecting one, as there is no immediate preview available. Use clear and precise naming that aligns with the user’s mental model while also following predefined standards (for example, the footer should always be called footer). Be specific: a component named “inline text” is vague unless the user understands the design structure. Choose descriptive titles and, if possible, add explanations to help users understand what will appear on the page.

An icon is worth a thousand words. Well, almost—icons alone are not always enough, but they can serve as valuable visual cues, especially for users who frequently work with the CMS. We make an effort to select icons that effectively convey the meaning of each section, using those available in Sanity when customizing inputs.

Pro tip. If you’re a developer, keep the naming consistent between the code and the CMS—your future self, who will have to revisit the site in four months just to fix a typo, will thank you.

3. Describe everything, but not too much

We love descriptions: every component, as well as individual inputs, can benefit from a line or two of explanation. Descriptions can help:

• Provide style guidelines and best practices for users (“avoid exceeding 300 words” or “use images at least 500x500px”);
• Clarify the purpose of a field or section;
• Communicate technical or functional information (such as the maximum file size for an upload field).

The real challenge is sometimes the opposite—writing only what is truly necessary. Avoid overly long or verbose explanations and get straight to the point (AI tools are great at summarizing). When in doubt, use the classic trick all designers rely on—whether they admit it or not: show the field and have someone unfamiliar with the site read the description. Then ask, “Is this clear? Does it make sense?” or “How would you use this field?”

Pro tip. If you need five lines to explain a concept, the field might not be designed correctly—or it might not belong in the CMS at all. A well-structured query system can hide automation and unnecessary fields, reducing the user’s cognitive load.

4. Design the right limits

This applies to all CMS platforms, but it’s worth repeating because repetita iuvant. If you want the site to maintain its original look—the one the designer created and the client invested in—you need to decide from the start how much freedom to give users during data entry. This choice depends on several factors: project constraints, the user’s digital skills and visual sensitivity, specific client requests, and more.

Defining limits impacts many aspects, including the number and complexity of components, but it allows the client to work within a controlled environment where their choices won’t compromise the final look of the site.

So, unless your client has an entire design team at their disposal, here are some guidelines based on our past experiences (or, more accurately, the walls we’ve crashed into):

Limit text styles while ensuring SEO best practices: always provide specific styles for headings (h1, h2, etc.) and a maximum of three sizes for body text—unless the design explicitly requires more.

Reduce color choices: provide only the brand colors, named consistently, along with a few neutral or system colors if necessary.

For example, in one project, we allowed users to select a background color for each page section. However, they could only choose from the three main brand colors (white, red, and black). We also designed the builder so that the background color choice automatically adjusted the text and other graphic elements accordingly. Each component existed in a darkversion (black or red background) and a light version (white background).

This approach gives users just the right amount of freedom, allowing them to use brand colors correctly without having to manually adjust every single element.

Provide options: avoid giving users the ability to modify section padding and gaps between elements. If absolutely necessary, provide only a few options (e.g., narrow gap and wide gap instead of specific values like 40px or 80px) or consider adding a spacer component to create larger gaps between elements.

Lately, we’ve been favoring a section-based approach, where individual components don’t have vertical padding but are placed within sections that do. This allows for better control over spacing and background colors. It takes practice, but with thoughtful planning upfront, you can prevent many Frankenstein-like design mishaps down the line.

Pro tip. Make sure your client knows from the start which components are available for building their site’s pages. If they need to add text alongside images, for example, a dedicated component (perhaps with multiple variations) must be created. It’s always better to clarify this during the design phase rather than after the site is completed.

5. Allow the user to choose how to use the CMS

Sanity allows you to build a modular CMS, and every section should be carefully selected by its designers. We recommend always including some of these plugins and features to make the CMS even more complete and user-friendly:

Presentation mode. A feature that allows users to edit text, images, and component settings directly from the front-end preview. This is a powerful tool, as it enables quick content adjustments while instantly checking how they appear on the page.

One important consideration: ensure the client doesn’t become overly reliant on this mode. Provide them with the necessary tools to understand the Structure view as well, since they will inevitably need to use it for managing certain sections and adjusting specific settings.

Gallery. A plugin that displays the repository of all media uploaded to the CMS. Normally, users access it through individual input fields (for example, when selecting an already uploaded photo). This feature provides a comprehensive overview and makes it easier to manage available assets.

Schedules. A paid feature in Sanity Studio that allows users to schedule the publication of pages and content. This is an essential tool for certain types of websites, especially those requiring constant content updates.

Pro tip. Not everything is essential—always evaluate which features are most relevant to the project. If you think some are unnecessary, simply disable them.

Conclusions

We’ve learned that the CMS must also follow a user-centered design approach. Clients are users too, and they deserve a tool that is not only powerful and functional but also easy to use and maintain over time.

The responsibility of shaping this design falls on both developers and designers, who can equally contribute to improving the user experience. In other words, the designer must understand the mechanisms behind development logic in order to support developers during the CMS creation phase with well-structured and documented designs.

Similarly, developers must develop a critical eye, almost like a designer, keeping the end user at the center of their development work. We’ve always said it: let’s bring skills together and cross-pollinate them, because without strong teamwork—especially when designing CMS—there’s no progress.