8 improvements to the Sanity Studio’s editorial experience

Improving the editorial experience is a continuous effort, and we do ship fixes and improvements regularly. However, with the release of Presence, we took the opportunity to brush up several aspects of the Studio. To get these improvements, all you have to do is to run sanity upgrade in your studio project, and you should be good to go.

1. Tighter and more accessible user interface

It’s your content that matters in the forms. So we adjusted the visual hierarchy by making field borders more subtle and the labels and descriptions more balanced. We have also introduced the new Sanity color scheme that brings more consistency and contrast.

[screen grab]

2. Read-only fields are easier to recognize

Sometimes you have fields that are written and edited by automated services. Typically you want to be able to see these fields, but not edit them. This is where the `readOnly: true` field property comes handy. We wanted to make sure that if something was `readOnly`, that it was very obvious.

[screen grab]

3. Improved accessibility for boolean fields

The previous boolean switches were hard to spot in their null and false state and didn’t support long descriptions well. We added borders to the field and vastly improved contrast to make them easier to use.

[screen grab]

4. Type icons are now included in the array insert menu

The Portable Text editor has had support for custom icons in the insert menu for a while, we have now added the same support for the array field as well. A fun little visual that is also helpful for your content people!

[screen grab]

5. Improved icon set

The Sanity Studio now features more icons from our custom icon set. They are more legible and follow a coherent style. We are so fond of these icons that we even use them frequently in our new title cards.

6. New studio login screen

We have given the login screen a visual refresh and a layout that scales better when you add multiple login providers.

[screen grab]

7. Better validation messages

Sanity Studio already has great support for field validation, with both out-of-the-box rules and custom. We needed to adjust how the validation was displayed to accomodate for presence, and used the opportunity to bring in some other improvements as well:

• Validation summary is now fully readable regardless of length
• Validation now works on individual object fields
• All subtypes can have their own custom validation
• date and dateTime fields’ validation message now uses the same format as the input field itself
• The icons and colors now look better

[screen grab]

8. More performant and future proof Portable Text editor

Some people use the Portable Text editor for long texts. We wanted to improve the performance for them, including improving its behaviour for collaboration. The editor now produces smaller more atomic patches. The editor is based on fiSlate.js, and it required a refactor to bring it up to the latest version that had breaking changes. The Portable Text editor now support spellcheckers (like Grammarly) and is prepared to support more features like custom hotkeys.

[screen grab]