Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

Create a schema and configure 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
├── config
├── node_modules
├── package.json
├── plugins
├── sanity.json
├── schemas
├── static
├── tsconfig.json
└── yarn.lock

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

In sanity.json 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

You might want to look into tsconfig.json if you plan to use TypeScript. 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 all (or just the one) of your 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

export default {
  name: 'pet',
  type: 'document',
	title: 'Pet',
  fields: [
    {
      name: 'name',
      type: 'string',
      title: 'Name'
    }
  ]
}

Let’s unpack what’s happening here:

  • export default is how you make the following document type definition available when you later import it to schema.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 pets 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. "Furry 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 schema.js and do the following:

import createSchema from "part:@sanity/base/schema-creator";
import schemaTypes from "all:part:@sanity/base/schema-type";

import pet from './pet' // import the file you just made
export default createSchema({ name: "default", types: schemaTypes.concat([
pet, // add the document type to this array
]), });

👉  Now, you can save and run the command sanity start in your command line if you haven’t started it already. Head over to http://localhost:3333. If everything went as it should, you’ll see Pets appearing to the left. Congrats, this is your first schema type!

Now you know the basics of what you need to know to be productive. We’ll be back and work more with fields 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 →

Was this article helpful?