Installation and upgrading

To initiate a new Studio without installing the CLI globally:

npx create-sanity@latest

To upgrade a v3 Studio:

npm install sanity@latest

✨ Highlights

Improved customization and Typescript support for the Portable Text Input and schemas

Improved support for custom rendering of the content in the Portable Text input via .components.block, component.inlineBlock and .components.annotation render callbacks for object-like schema types, references and type aliases.

While this has been possible previously by modifying the block schema locally, these customizations can now also be put directly on the various content types themselves, to be shared between different Portable Text inputs using them. For example you can now customize how an author reference would appear in various Portable Text contexts on the author schema itself.

Also text specific schema properties like decorators, styles and lists for the block type itself have slighly changed their configuration in order to better align with the rest of the studio. More info: Changes in block schema customization properties.

If you previously did customization of the editor using your own render callbacks or icons through the .blockEditor property in the block schema, you will get a deprecation warning, but they will still continue to work until further notice.

Please refer to the documentation for how to customize the block type and the Portable Text editor for v3 of the studio.

Besides this, the Portable Text input related code and schema types have been given a Typescript update for better type safety and developer experience.

Studio appearance

The user menu now has options to select the apperance of the Studio. The selected appearance is stored in local storage and is reused on the next visit.

Logo component updates

The button in the navbar that wraps the custom logo component has no padding anymore. This update is made in order to give the custom logo component full control over how big the button in the navbar should be. Therefore, the custom logo component may need to be updated in order to achieve the previous look. Below is an example of how to recreate the same result as before:

import {defineConfig} from 'sanity'
import {Box} from '@sanity/ui'

function MyLogo() {
  return (
    <Box padding={3}> // <-- Wrap your custom logo with a `Box` with `padding={3}`
      <CustomLogo />
    </Box>
  )
}

export default defineConfig({
  // ... rest of config

  studio: {
    components: {
      logo: MyLogo,
    },
  },
})

🐛 Notable bugfixes

• This update fixes so that the component in the root config (ie in defineConfig) is the component that receives the result of the props passed on with renderDefault in previous custom components.
• Fixed an issue with custom sort orders

📓 Full changelog