👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Back to changelog

Visual editing, improved integration with Next.js, and more

Installation and upgrading

Initiate a new Sanity Studio without installing the CLI globally:

npm create sanity@latest

To upgrade Sanity Studio, update its dependency:

npm install sanity@latest

✨ Highlights

Visual Editing (Enterprise Only)

Note

Visual Editing is available for select Sanity enterprise customers. If you would like to use Visual Editing with Vercel, you will also need to contact Vercel to enable this feature for your Vercel team. You may contact our sales team for more information.


This release includes support for Visual Editing and Content Source Maps. This feature enables you to make deep edit links from components in a front end that takes you to respective fields in the Studio. This enables a new workflow that substantially reduces the time it takes to make changes by bringing you directly to the relevant field where you can make edits reliably in its appropriate context. For more information on Visual Editing, check out the documentation here.

Visual Editing is available for mutual Sanity and Vercel Enterprise customers. Existing Sanity enterprise customers can contact their dedicated customer success manager to enable this feature. Customers interested in upgrading to an enterprise plan can contact our sales team for more information. You will also need to contact Vercel sales to enable this feature for your Vercel team.

Sanity enterprise customers can also use the Content Source Maps with GROQ to build custom Visual Editing capabilities. For more information, check out the Content Source Maps documentation here.

Quickly add Sanity Studio to Next.js

The sanity init command now recognizes if you are in a Next.js project, and will ask:

  • What Sanity project you want to use (use existing or create new)
  • Whether you want to place an embedded Studio using pages or app routes
  • Whether you want to use TypeScript for your Studio
  • What template you want to use (clean or blog)
  • Whether you want to append the project ID and dataset to your .env file (you can also specify a custom env file with the --env flag)

If you have a Next.js project and want to quickly deploy an embedded Sanity Studio, you can run npx sanity init within your application's directory to get started.

Minimum version when using pnpm required: 8.x

Additional notable features

  • Enables fully unattended studio init with CLI when projectId, dataset and --y flags are set
  • sanity init will now determine default package manager choice based on currently running package manager

🐛 Notable bugfixes

  • Updates the Shopify Studio template with various fixes
  • Fixes an issue that caused field group buttons to steal focus when deep linking into a Studio value
  • Fixes an issue causing focus to be set on wrong element when deep linking to a field inside an array
  • Fixes an issue so deep linking to a field/input expands the right fieldsets/collapsed objects along the way
  • Fixes an issue where validation errors would not focus on collapsed fieldset
  • Fixes an issue where using pnpm to install dependencies would not install the latest available versions when creating a new project
  • Resolves issue where unattended mode (--yes flag) for sanity init would still show a confirmation prompt about running a v2-like CLI command
  • Fixes a bug with reference fields not receiving focus when clicking a validation error or following a link to the field
  • Fixes intent links to focus on the correct location
  • Fixes issue with pasting a file from clipboard into a file field that already has a value
  • Fixes support for deep linking in image and file fields
  • Fixes a bug that broke pasting a file into a file field when a value is already present

Documentation affected by this release

Published May 04, 2023