Getting Started with Sanity Studio

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.

File layout

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

👉 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:

👉 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!

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.