Dive into the Sanity Structure Builder

Sanity is the super fast, super customizable CMS that we're using as the backend for the new via.studio website.

One of the more powerful concepts that Sanity is the ​Structure Builder which gives you the ability to customize how content is presented in the Sanity admin.

Let's go through the basics of how you start working with the Structure Builder.

When you first start with the Sanity Studio, you'll have a sanity.json file which has some basic information about your Sanity setup.

Your sanity.json file will have a section called "parts" which looks something like this:

We're going to update it so Sanity knows to look for a structure file for any customizations.

Now let's create a basic structure.ts file.

The above structure mimics the default behavior of Sanity. We have a single pane called "Content" which displays a list of all of our document types.

Now that that's in place, we can organize our content in some interesting ways!

One thing we wanted was to be able to exclude certain document type/schemas from the Sanity admin. That can be achieved by updating our structure file like this.

We've defined an array with the ids of document types we don't want to display. Then we take our list of items to display in Sanity and filter it using our exclusion array.

The last bit we'll cover is creating custom items to add to the content sidebar.

In our Sanity setup, we have a document type called "content" which is used for both Blog Posts and Case Studies​. Both types have a similar structure in that they each have a header image and then a large block of content entered using a WYSIWIG editor.

However it gets confusing in Sanity having all of those items lumped into a single "Content" item in the sidebar. What we really want is a sidebar item for the Blog Posts and a separate one for Case Studies.

That can be achieved like this:

First we get all of the documents with type "content" (this includes both Blog Posts and Case Studies).

Then we build a sidebar menu item that contains just the Blog Posts and another with just the Case Studies.

Finally, we add both of those custom menu items to our list.