To initiate a new Studio without installing the CLI globally:

npm create sanity@latest

To upgrade a v3 Studio, run this command in its folder:

npm install sanity@latest

✨ Highlights

With the recent introduction of both Presentation tool and comments, we realised that context can be crucial in understanding comments relating to visual aspects of an application.

Comments created from within the Presentation tool will now display a link allowing content editors to navigate from any tool directly to the context in which that comment was made in their application.

• Improves error handling for a migration script that attempts to iterate over the passed document function without calling it
• Adds new Studio API, ActiveToolLayout, which allows plugin authors to have more flexibility by wrapping the active tool
• The selected viewport in Presentation is now persisted in the URL

🐛 Notable bugfixes

• Improves focus handling with the Presentation tool and Portable Text Inputs
• Fixes regression preventing import {debugSecrets} from '@sanity/preview-url-secret/sanity-plugin-debug-secrets' listing secrets
• Fixes a bug preventing the CLI being used inside Studio project subdirectories

To install or upgrade Sanity UI:

npm install @sanity/ui@latest

This 2.0 release of Sanity UI is a major visual update that introduces:

• Updated component styles and defaults
• New color palette changes (via @sanity/color)
• Optional animation support for Popover, Tooltip and MenuButton components
• Updated font stack (defaulting to Inter, if available) and font metrics
• Various under-the-hood improvements

For plugin authors: you can continue to use Sanity UI 1.x without issue, though we strongly recommend upgrading to 2.x to ensure visual consistency if you're targeting Sanity Studio 3.24.x and higher.

• add buildTheme function (b09226e)
• add animate support to popovers, add custom origin middleware and animate from reference origin (#1194) (9ee54ba)
• add inter to default (non-code) font stack (23baaa6)
• add radius='full' support and supporting stories (#1150) (e9adb5b)
• allow tooltip arrows to be hidden (22c6f73)
• animations: add animations to dialog and tooltips. (#1187) (6cb872f)
• avatar: implement avatar sizes (8deb370)
• button: change focus ring width (#1158) (b4b14cc)
• buttons: add support for width=fill prop (#1175) (a2006cd)
• button: update defaults (e213d90)
• button: update styles to match facelift designs (#1142) (836a506), closes #1143
• cssvars: replace color theming through styled-components for css vars. (#1152) (bbb78e3)
• default-theme: add support for component-level focus ring configuration (#1140) (eee10a1), closes #1141
• default-theme: update color palette (#1137) (e01d0ad)
• dialog: update styles and add corresponding stories (#1155) (5741633), closes #1156 #1161
• figma: initialize figma plugin (c82b4ca)
• force semibold on dialog headers (6303677)
• introduce '@sanity/ui/theme' export (b38f35a)
• kbd: update primitive style, minor storybook cleanup (#1157) (b0a4082)
• menu: update menu and menu items styles (#1166) (c2e5ebc)
• reduce autocomplete radii (db3484a)
• reduce default button focus width (2ff2b63)
• release 2.0 (0ac1c8f)
• remove dialog header + footer borders (dd826ad)
• tab: update styles and add corresponding stories (#1159) (2988785)
• theme: add avatar size (9129e6f)
• theme: add label font size (abb9bb2)
• theme: parse parse compile color mix (2d049be)
• tooltip: update styles and corresponding stories (#1160) (34bf88d)
• tweak default avatar image sizes, fix avatar arrow stacking context (1c5348d)
• update avatar styles (#1183) (f7d4b94)
• update badge background colors (70b669c)
• update default avatar sizes (a288f75)
• update KBD styles and default props (7c837a0)
• update select component icon (7366ef0)
• update toast styles (0f89cc6)
• update various input styles (#1147) (fe53370), closes #1144 #1145 #1146

• add stretch fallbacks on card + selectable button styles, add mozilla fallback (981194d)
• adjust colors (0e4cabe)
• avatar: use label font (27e655d)
• badge: set color using variable (ddeb0d8)
• badge: use regular font weight (b72b338)
• build: update keywords (74cfd4d)
• build: update node version (ce69f9d)
• build: update node version (e54707c)
• button: button with right icon is pushed to the end (#1195) (ad87933)
• button: default mode (e7e3d32)
• button: render styles (35e0a91)
• button: set vertical alignment to fix unwanted margin (4d7851f)
• card: add color backdrop variable (dbcdccd)
• card: only set focus ring variable when :focus-visible (757a0d0)
• checkbox: adjust colors (7f2e7d3)
• core: add font-weight for strong font in heading (#1204) (6c430b3)
• core: improve defaults (8d4d5d9)
• correctly prefix unstable props (4e30a56)
• darken backdrop color in light mode (a12a0df)
• deps: add react-is peer dependency (a9549a8)
• deps: update @sanity/color (a357c77)
• deps: update @sanity/color (2207abf)
• deps: update @sanity/color (185d5a7)
• deps: update @sanity/color (deeaed1)
• deps: upgrade @sanity/color (780ee0b)
• dialog: adjust padding (c4f7858)
• dialog: fix padding (5ca95c5)
• dialog: update dialog design (#1169) (477f495)
• do not scale icon strokes (0740c6b)
• ensure button primitives use the correct default mode (ccdb59e)
• facelift: add unstableDisableFocusRing prop to text inputs (#1184) (6ded803)
• figma: export muted bg (0a3a9e2)
• figma: update plugin (5229ace)
• improve scale transitions for non-retina screens (#1200) (3e52721)
• kbd: vertical alignment (cc8bc61)
• menu-button: close menus containing selected items when re-clicking the menu button (#1193) (7b60c32)
• peer-deps: remove react-is from peer deps (49a832c)
• popover: disable arrow by default (9c1548e)
• remove unknown prop "animate" console warning (aaa353c)
• remove crossfade pollution on fade in transitions (#1201) (591cea3)
• remove unused focusRing from legacy ThemeColor interface (#1207) (2a4d9b6)
• revert changes for css variables (#1172) (7cea0a3)
• revert dialog padding, include margins, add hidden close button story (d0af39d)
• revert rounded border style in tabs (a668b11)
• select: default to radius=2 (8ac48c2)
• simplify dialog header padding (2c5fee1)
• switch: adjust handle shadow (604ac42)
• switch: improve checked read-only state (6320d59)
• text-input: improve styles (eacee35)
• theme: add resolved key to v2 theme (#1203) (c81bc6d)
• theme: adjust syntax colors (a264240)
• theme: adjust vertical trimming (a00a989)
• theme: improve backwards compatibility (01da5eb)
• theme: improve backwards compatibility (54c80ba)
• theme: improve color tokens (27bea7d)
• theme: improve colors (6eed99d)
• theme: increase switch padding (e99251d)
• theme: re-introduce base focusRing value and mark as deprecated (#1162) (1fc3106)
• theme: restore selectable in v0 theme (#1206) (98447fe)
• theme: support 0 opacity (ce9929e)
• theme: tweak colors (6bbfa8a)
• theme: update avatar and badge ts descriptions, mark them as internal (ec329df)
• theme: update container width size (#1198) (9ba891e)
• tooltip: disable arrow by default (fabcbde)
• tooltips: fixes for TooltipDelayGroup, onClose and nested (#1186) (345e887)
• tooltips: update default fallback placements (#1185) (117fe85)
• tree: default font size and padding (8c279b4)
• tweak default tooltip motion values (608f66a)
• update default values for <Badge> (aaa5708)
• update default values for <MenuItem>, <TextArea> and <TextInput> (82dc8d2)
• update legacy focusRing values (cc1c7be)
• update types [skip ci] (4725af4)
• vars: minimum implementation for colors legacy support (#1167) (aca0675)

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 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.

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

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