Home Sanity Getting Started with Sanity: Registration, Studio Setup, and Project Structure

Jul 24,2025

Read Time: 3 min

Getting Started with Sanity: Registration, Studio Setup, and Project Structure

What is Sanity and Why Use It?

Sanity is a modern headless CMS that offers unparalleled flexibility for developers and content creators alike. Unlike traditional CMSs, Sanity separates content management from presentation, allowing you to deliver content across websites, mobile apps, and any digital platform through powerful APIs.

Registration and Project Creation

Getting started with Sanity takes just a few minutes. Here’s how to create your first project:

Navigate to Sanity.io and click Get Started
Sign in using GitHub, Google, or create an account with email and password
After registration, you’ll land in the Sanity Manage Dashboard — your project control center

Step 2: Create Your First Project

Click Create project in the dashboard
Enter a Project name (e.g., “my-first-sanity-project”)
Select the Free Plan (perfect for testing and small projects)
Confirm your settings

Result: You now have a Sanity project with a default dataset called “production” that will store all your content.

Installing and Running Sanity Studio

Sanity Studio is your visual content management interface built with React. It can run locally on your machine or be deployed to the cloud.

Installation Steps

1. Install the Sanity CLI

npm install -g @sanity/cli

2. Create Your Project Directory

mkdir sanity-project && cd sanity-project

3. Initialize Your Sanity Project

sanity init

During initialization, you’ll be prompted to:

Select your existing project from the list
Choose the “production” dataset
Pick a template (select “Clean project with schema”)

4. Start the Studio

npm run dev

Open your browser and navigate to http://localhost:3333

Result: You’ll see the Sanity Studio interface running locally, ready for you to start adding content types and managing data.

Understanding the Basic Project Structure

After initialization, your project will contain several key files and folders:

sanity-project/ ├── sanity.config.ts # Studio configuration ├── schemas/ # Content type definitions │ └── index.ts # Schema exports ├── package.json # Project dependencies └── node_modules/ # Installed packages

Key Files Explained

sanity.config.ts: Contains your Studio configuration, including project ID, dataset, and schema definitions
schemas/ folder: Where you define the structure of your content types (we’ll explore this in detail in upcoming articles)
package.json: Standard Node.js file containing project dependencies and scripts

Creating Your First Content Schema

Let’s create a simple blog post schema to get you started:

Step 1: Create a Post Schema File

Create a new file schemas/post.js:

export default { name: ‘post’, type: ‘document’, title: ‘Blog Post’, fields: [ { name: ‘title’, type: ‘string’, title: ‘Title’, validation: Rule => Rule.required() }, { name: ‘slug’, type: ‘slug’, title: ‘Slug’, options: { source: ‘title’, maxLength: 96 } }, { name: ‘publishedAt’, type: ‘datetime’, title: ‘Published At’ }, { name: ‘body’, type: ‘text’, title: ‘Body Content’ } ] }

Step 2: Register the Schema

Update your schemas/index.ts file to include the new post schema:

import post from ‘./post’ export const schemaTypes = [post]

Step 3: Restart Studio

Stop the development server (Ctrl+C) and restart it:

npm run dev

Result: Your Studio now includes a “Blog Post” content type. You can create, edit, and manage blog posts through the intuitive interface.

Testing Your Setup

To verify everything is working correctly:

Create a test post: In Studio, click the “+” button and select “Blog Post”
Fill in the fields: Add a title, generate a slug, set a publish date, and write some body content
Save and publish: Click “Publish” to save your first piece of content

Congratulations! You’ve successfully created your first content entry in Sanity.

What’s Next?

Now that you have Sanity up and running, here are the logical next steps in your learning journey:

Immediate Next Steps

Explore Studio Interface: Get familiar with the editing environment and navigation
Learn Content Modeling: Understand how to create more complex schemas with relationships and rich content
Discover Portable Text: Learn about Sanity’s powerful rich text format

Advanced Topics (Coming Soon)

GROQ Queries: Master Sanity’s query language to fetch exactly the data you need
Frontend Integration: Connect your Sanity content to Next.js, React, or other frameworks
Custom Studio Components: Build tailored editing experiences for your content team

Troubleshooting Common Issues

Studio Won’t Start

Ensure you have Node.js 14+ installed
Check that port 3333 isn’t already in use
Verify your project ID and dataset are correctly configured

Schema Changes Not Appearing

Restart the Studio development server
Check for syntax errors in your schema files
Ensure schemas are properly exported in schemas/index.ts

Authentication Problems

Run sanity login to re-authenticate
Check your internet connection
Verify your Sanity account has access to the project

Conclusion

You’ve successfully set up your first Sanity project, installed and configured Studio, and created your first content schema. This foundation gives you everything needed to start building powerful, flexible content management solutions.

Sanity’s strength lies in its flexibility and developer-friendly approach. As you continue learning, you’ll discover how this headless CMS can adapt to virtually any content requirement while providing an excellent editing experience for content creators.

Ready to dive deeper? The next article in our series will explore the Studio interface in detail, showing you how to navigate, customize, and optimize your content management workflow.

Shared by