Skip to content

Getting Started with Sanity Studio

Learn how to configure your first schema for Sanity Studio.

Sanity Studio is configured using Javascript

This step will get you started modeling your content by configuring your first schema for Sanity Studio.

Protip

👉  Look for the pointing finger emoji to find only the actionable paragraphs if you want to speedrun this guide!

What is Sanity Studio?

Sanity Studio is an application for creating, editing, and working with content. You can set it up, configure, and customize it with basic JavaScript. You can also extend it using React and a wide selection of helper libraries. While the studio is intentionally engineered to be simple to get started with, it has a lot of advanced functionality out of the box. It’s designed to get out of the way and let you add features as the need arises.

Give me more technical details about the studio!

Sanity Studio is a Single-Page Application (SPA) that runs fully in the browser. You can host it anywhere that can serve static HTML, JS, and CSS files, pretty much any web hosting service.

The studio connects to Sanity’s hosted APIs, called Content Lake. Your content is always synced in real-time and never stored locally. When you run the studio in your CLI, it’s only to compile your code to give you a preview of the editorial experience. You can invite collaborators to your project and quickly deploy the studio using the command line.

File layout

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── sanity.cli.js
├── sanity.config.js
├── schemas
│   └── index.js
└── static

The schemas folder is where you add your document types and define their fields.

In sanity.config.js you'll find the configuration details for your studio – such as which project and dataset (the collections of documents that make up your content) it should connect to and what plugins should be activated. We'll look more into these concepts later.

That’s pretty much what you need to know for now.

Deeper dive into the file structure

If you opted to use TypeScript while setting up your project in the CLI, you'll notice that some of these files end with .ts instead of .js. If you’re using the command line to bootstrap a plugin, it will be added to the plugins folder. The static folder holds any static files you want to ship with the studio, but you’re likely not going to do that if you’re just starting out.

Defining your first document type

Let's build a simple content model for holding a collection of pets, real or not. Sanity Studio will automatically build a user interface from the schema where you describe your content models.

A document type is similar to a “collection” if you’re used to NoSQL/document databases or a table if you know relational databases. In the JSON documents that the Studio writes to, it will appear as a _type property. It’s very common to use this property to query for your content; for example *[_type == "pet"].

Let's make a studio that can hold a collection of pets, starting with recording their names.

To make your first document type, do the following:

👉  Create a new file inside of the schemas folder and call it pet.js

👉  Open pet.js and add the following code to it

// schemas/pet.js
export default {
  name: 'pet',
  type: 'document',
  title: 'Pet',
  fields: [
    {
      name: 'name',
      type: 'string',
      title: 'Name'
    }
  ]
}
Read detailed walkthrough of the code
  • export default is how you make the following document type definition available when you later import it to schemas/index.js
  • name: 'pet' tells the studio that the JSON gets "_type": "pet" added to it when you create a new document in the studio (yes, we know, there’s a lot of “type” to keep track of, but bear with us)
  • The type: 'document' property tells the studio that it should make it possible to make new pet documents.
  • The title: 'Pet' defines what this document type is called in the studio UI. While it's common that title is simply the capitalized form of name, it doesn't have to be. "Feathery companion" would be an equally appropriate value for title.
  • For fields you find an array of objects that describes the fields you’ll have available for this document type. In this case, objects with name, type, title in it. Notice how it’s the same keys you have for the document type?
  • Inside the fields array, you find one JavaScript object in it with three keys. These describe what the first and only field is and its name. It might take some getting used to, but the value of name is what ends up as the key in the data that the Studio outputs. You will see an example of that later.
  • You should also take notice of the type. The value string tells the Studio what kind of input to put here. In this case, it's a single-line text input field. Sanity Studio comes with a lot of built-in field types, including, but not limited to: number, datetime, image, array, and object.

👉  The next step is to import this document type definition into schema.js and add it to the array of types. Open schemas/index.js and import the new document type, and put it into the schemaTypes array:

// schemas/index.js

import pet from './pet'



export const schemaTypes = [pet]

👉  Now, you can save and run the command npm run dev in your command line if you haven’t started it already. Head over to http://localhost:3333.

The new Pet type should appear to the left if everything went as planned. Congrats, this is your first document type!

Sanity Studio with the “Pet” document

Now, you know the basics of what you need to know to be productive. We’ll be back and work more with field types, but first, let’s look at how the Studio interacts with the Content Lake to create and edit data.

Next: Edit and publish content →

Updated on September 12, 2023

Was this article helpful?