Skip to main content

​
Installation

Get started with Sanity Studio by installing it in your project. The CLI will guide you through the setup process and create a preconfigured Studio.

​
Prerequisites

Before you begin, ensure you have the following installed:
Node.js: Version 20.19 or higher, or version 22.12 or higherYou can check your Node.js version by running:
node --version
  • Package manager: npm (comes with Node.js), yarn, or pnpm
  • A code editor: VS Code, WebStorm, or your preferred editor
  • A Sanity account: Sign up for free at sanity.io

​
Quick install

The fastest way to get started is using the create sanity command, which scaffolds a new Sanity Studio project: 
npm create sanity@latest
The @latest tag ensures you’re always using the most recent version of the Sanity CLI and Studio.

​
Installation process

When you run the installation command, the CLI will guide you through an interactive setup:
1

Project setup

You’ll be prompted to:
  • Log in or create an account - Authenticate with your Sanity account
  • Choose a project - Select an existing project or create a new one
  • Choose a dataset - Name your dataset (e.g., production, staging)
  • Add sample data - Optionally populate your project with example content
2

Project configuration

The CLI will:
  • Create a new directory for your project
  • Install all required dependencies
  • Generate a sanity.config.ts file with your project configuration
  • Set up the default schema types
3

Start the Studio

Navigate to your project directory and start the development server:
cd my-sanity-project
npm run dev
Your Studio will be available at http://localhost:3333

​
What gets installed

The installation process creates a project structure with: 
my-sanity-project/
├── sanity.config.ts          # Studio configuration
├── sanity.cli.ts             # CLI configuration
├── package.json              # Project dependencies
├── schemaTypes/              # Schema definitions
│   └── index.ts
├── static/                   # Static assets
└── tsconfig.json             # TypeScript configuration

​
Key dependencies

The main packages installed are:
  • sanity - The core Studio package (v5.13.0+)
  • @sanity/vision - GROQ query playground tool
  • react and react-dom - Required peer dependencies
  • styled-components - Styling library for custom components

​
Manual installation

If you prefer to set up your project manually, you can install Sanity Studio in an existing project:
1

Install the package

Add Sanity Studio to your project:
npm install sanity @sanity/vision react react-dom styled-components
2

Create configuration file

Create a sanity.config.ts file in your project root:
sanity.config.ts
import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {visionTool} from '@sanity/vision'

export default defineConfig({
  name: 'default',
  title: 'My Sanity Project',

  projectId: 'your-project-id',
  dataset: 'production',

  plugins: [
    structureTool(),
    visionTool(),
  ],

  schema: {
    types: [],
  },
})
Replace your-project-id with your actual Sanity project ID from sanity.io/manage.
3

Add development scripts

Add these scripts to your package.json:
package.json
{
  "scripts": {
    "dev": "sanity dev",
    "build": "sanity build",
    "deploy": "sanity deploy"
  }
}
4

Start developing

Run the development server:
npm run dev

​
Verify installation

Once the development server is running, open your browser to http://localhost:3333. You should see:
  1. The Sanity Studio login screen (if not authenticated)
  2. After logging in, the Studio interface with the Structure Tool
If you see errors about missing peer dependencies, make sure you’ve installed react, react-dom, and styled-components as listed in the prerequisites.

​
Configuration

Your sanity.config.ts file is the heart of your Studio setup. At minimum, it requires:
  • projectId - Your unique Sanity project identifier
  • dataset - The dataset name for your content
  • plugins - An array of plugins (at least structureTool() recommended)
  • schema.types - An array of schema type definitions
See the Configuration guide for advanced options like custom tools, authentication settings, and workspace configuration.

​
TypeScript support

Sanity Studio has first-class TypeScript support. The CLI automatically generates a tsconfig.json for you:
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "ES2017"],
    "module": "ESNext",
    "moduleResolution": "node",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
Use @sanity/codegen to generate TypeScript types from your schema for type-safe queries in your frontend.

​
Next steps

Quickstart guide

Follow the quickstart to create your first schema and documents

Schema types

Learn how to define document and field types

Configuration

Explore advanced configuration options

Plugins

Extend your Studio with community plugins

​
Troubleshooting

​
Port already in use

If port 3333 is already in use, you can specify a different port: 
npm run dev -- --port 3334

​
Authentication issues

If you have trouble logging in, try: 
sanity login
This will open a browser window for authentication.

​
Module not found errors

If you see module resolution errors, ensure all dependencies are installed: 
rm -rf node_modules package-lock.json
npm install
For more help, visit the Sanity Community or GitHub Discussions.

Build docs developers (and LLMs) love

Get started for freeTalk to us