One of the best things about Sanity is the balance between flexibility and default features. They deliver a great product out of the box, but to unleash the full potential of Sanity, you should spend some time customizing it to make it even better. In this article, I will show you how to create a simple custom input component that provides a visual representation of icons, enhancing your studio experience.

Data input in Sanity

Sanity provides different solutions for the user to input and change data. These out-of-the-box solutions gives the user good alternatives, but in some cases you may want something extra from your input component. Maybe you want to query and show data from a third party API? Or maybe your editors just want to see what they're choosing when they're looking for a visual component to show?

The basic input component

Let's say you have a component in your frontend that uses an Icon, and you want the editor to be able to pick this icon in Sanity studio. The icon can be added with a list of options in Sanity, doing something like this: 

Which gives you a list looking like this: 

Well, this does the job, but it's also a bit of a hassle for the user to know what the icon they're choosing actually looks like. To be sure they would have to visit the page showing the icons before choosing the icon. Let's fix this by making a custom input component!

Making a custom input component with Sanity UI

Sanity UI is a React library made by Sanity that you can use when making input components. It offers primitives and some components. Using the Autocomplete component it's possible to render a React element, and we can use this to show our icons in the list. The Autocomplete component also provides a much better search functionality.

Let's start by defining the AutoComplete component:

Add the input component to the field as a component:

And we end up with a visual representation of the icons!



To actually change the value we need to add logic to set and unset the value when changed: 



And there we go! We now have a fully functional input component for our icons in Sanity studio.

Make your own input components in Sanity!

"I couldn't find a funny quote about navigating structured content." - Kristoffer Æsøy (2023)

The structure we all know and... love?

A common sight for anyone who’s worked with Sanity is the structure of their Studio. This is the map of all the content that exists in your content lake. What you see is what you… have! The thing about maps is that they get harder to read the bigger the area they try to cover. The same is true about navigating your content lake in Sanity! Maybe you’re looking for a movie you put in but you can’t really remember the title, just that it was a thriller. 🎃

We start off by taking a look at what Sanity gives us out-of-the-box:

The first step to making it easier to navigate is to ditch the default. To its credit, it shows you all the content that is available in your content lake. But, the documents for each type are all in one long list, which can be a nightmare to navigate if you have a lot of documents 😖. Also, it just looks kinda boring... snore! 💤

Adding som ✨style✨

To ease us into it, we can recreate the default structure we saw in the image above, but make it a bit more hip and fresh 😎. Let's spice it up a bit by adding an icon to each of our lists of document types. Cuz, people like looking at pictures, you know?

To do this we need to get down to business with the Structure builder API, which handles all things studio structure. If you want a custom structure you'll need to create a StructureResolver function, which is a function that accepts Sanity's structure builder class, commonly referred to as S. 

Using this builder class you can chain ⛓️ its methods to customize your studio's structure! We begin by defining the root of the structure as a list, where each of our document types are separate entries that we can add a title and a icon to by chaining methods onto the listItem method.

When we want something to be displayed in a new pane we use the child method, and inside it we can create a new list that simply displays all our documents. There exists a documentTypeList that only shows the documents matching the type you give it, which is super convenient.

Here it is:

Having defined our custom structure, we need to tell our Sanity project to use this when we are in the studio. The structure is set using Sanity's deskTool plugin, which is already included in the config when we create a new project! Replacing the default one with ours is super simple, its just about setting the structure field:

And voilá, let's check out how our Studio looks like with our new custom structure:

Filters, turning our Studio into the 'gram

Already looking a lot better! Now, we have what we need to solve the actual issue at hand. How can we more easily navigate all the different movies we have? Let's assume that we have three genres of movies: comedy, drama and thriller. We can create filters that separate our movies into those three genres!

The filter method can be applied to any type of list you can find in the structure builder class. It accepts a GROQ query to filter documents, which you will be familiar with since it's the same tool use we in our frontends to fetch content from Sanity.

An important thing to note is that when you apply a filter to a documentTypeList you actually end up overriding the method's default filter, meaning that you'll have to filter by the document type in your query as well. Now it doesn't make much sense to use that method anymore right? Therefore we can replace it with the more generic documentList and filter that instead!

This is how we make our filters for movie genres: 

Cool! It's time to take a look at how it turned out in the studio:

Magnifique, now we can more easily find our movies when we know their genre and how sweet aren't those icon! Chef's kiss. 🤌

♻️ Recycling ♻️ our filters

Okay, we have filters for our movies, but maybe we wanna add some filters to our books and shows as well. 🤔 Perhaps all of them share the exact same genres, and then we would end up creating the exact same filters for all of them by just replacing the document type we filter by... 😅 I don't know about you, but I think the single filter above makes the structure file a lot less readable, and adding more of almost identical code wouldn't really be of any help. Maybe we can create some kind of function that accepts a type, and creates the genre filters for us!

Again, if we want to create a function that can access the structure builder API methods, we need it to accept S, the structure builder class. Then we can also accept the type we want to filter by making it able to filter any document type by genre, even though it only makes sense to do so if a type has a genre field 😄.

Let's look at our final structure file now that we have created a custom function to filter our document types based on genre:

Talk about a clean structure huh? Now it's super obvious that we are using the same approach to create our genre filters for each of our document types. If someone is curious as to how those filters are created they can just check that function in isolation, and change it to apply an update to all our document types at once.

All that remains is to check if it worked:

Boom, there we have it! 🤩

You're good to go 🤙

And that's all folks! Now you've been introduced to all the building blocks you'll need to create helpful, reusable filters for your Sanity Studio. You can take this much farther but this is a great step in improving the navigation of your studio, and writing more DRY code!

Thanks for your time, and good luck finding the structure that works for you 👋

Creating the map of your Sanity Studio

This guide outlines the steps needed to inform Google of each new page in your Sanity CMS and dynamically boost your site's visibility and ranking in the search results.

Have you ever spent all your time perfecting every pixel on your website? Well, stop doing that - for now, at least. First things first, make Google happy. Why? Because when Google is happy, your website steers clear of the valley of death known as page 2 of the search results. This way, potential customers are far more likely to find and visit your website, increasing the likelihood that your business will succeed.

There are several techniques that can enhance Google's affinity for your website. These include setting a distinctive <title> for each page, ensuring that all pages feature a unique and comprehensive meta-description, and, of course, setting the correct language in your HTML. These practices form the foundation of how Google indexes and prioritizes your website. However, there's another essential element known as sitemaps. Sitemaps are XML documents widely employed by almost every commercial website. You can easily check this by adding '/sitemap.xml' to the end of any website's URL. Doing so reveals a list of all the sub-pages on that website, and this is actively utilized by Google during its website crawl to discover new information for potential inclusion in its search results.

It's essential to generate a sitemap dynamically based on the data in, for example, your Sanity CMS. This ensures that Google is promptly notified, by your sitemap, whenever your website has a new page that Google hasn't disovered before. This should help boost both the visibility and the ranking of your new page.

Now that we understand the significance of sitemaps for a commercially successful website, let's explore how to dynamically create them in Remix using Sanity's 'slugs'.

Step 1: Begin by crafting a function to retrieve all slugs from Sanity. In our example below, there are three distinct types of data: productions, liveshows, and talents. The slugs associated with each category serve as unique URLs on the website.

Step 2: Establish a new route on your website by creating the file "routes/sitemap[.]xml.tsx”. This particular route will dynamically produce and distribute an XML document, housing the URLs obtained through the function you created in the previous step:

Step 3: Inform Google of your sitemap's existence through the Google Search Console. You can let Google know that you've crafted a sitemap for your domain by simply adding it on this page. This step not only notifies Google but also allows you to track how frequently the search engine reviews the sitemap for any new updates. In my experience, this tends to happen about once a week.

That's all there is to it! Now, whenever you add a new entry to your Sanity CMS, its corresponding slug will be fetched dynamically and showcased in your sitemap. Google will now surely give you a little extra love!

Sanity

Make your own input components in Sanity!

Creating the map of your Sanity Studio

Help Google Help You - Dynamic Sitemaps with Remix and Sanity