Skip to content

Deploying Sanity Studio with Vercel is a platform for structured content with an open source editing environment. Sanity Studio is a single page app written in React, where you can configure the document types and input fields, with JavaScript objects. The Studio connects to Sanity’s hosted real-time APIs. You can also customize the Studio with your own input components, plugins, and tools.

This guide will walk you through how to deploy Sanity Studio with Vercel in three steps.

Note: You can skip this step if you already have a project set up.

First, install the Sanity CLI:

npm i -g @sanity/cli

Adding the Sanity CLI as a global package to enable use of the sanity command.

To initiate a new project and download the Studio code to your computer, run the following in the command line:

sanity init

Initiating a new Sanity project.

The Sanity CLI will walk you through the necessary steps to set up a project, letting you choose a schema template. When you're done with these steps, the CLI will download the source code and configuration to get you started. To start a local development server, cd into the project folder and run the following command:

sanity start

Starting a local development server for Sanity Studio.

Check out Sanity’s documentation to learn more about how to configure and customize the Studio.

To provide Vercel with routing information for the app, add a vercel.json file with the following content:

  "version": 2,
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]

An example vercel.json file that adds rewrites to the project.

Vercel provides an environment to deploy all types of projects, including static files, making it a good option for deploying your Sanity project with a single command.

Add @sanity/cli as a development dependency, which will allow Vercel to build your project on deployment.

npm i -D @sanity/cli

Adding the Sanity CLI to the project as a development dependency.

You are now ready to deploy your project.

To deploy your Sanity Studio app with Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once Sanity Studio is deployed, you will need to add it's URL to Sanity’s CORS origins settings. You can do this from the command line:

sanity cors add --credentials

Adding CORS credentials to your Sanity project.

Alternatively, you can navigate to, find your project and under Settings > API, add the Studio URL to the CORS origins list. You should allow credentials as the Studio requires authentication for added security whereas most frontends do not.

Couldn't find the guide you need?