Guide to Adding Info Text in Sanity Studio

At WebTechCD, we allow clients to edit their site content directly through Sanity Studio. To make the editing experience more intuitive, we wanted to ensure that each document clearly explained its purpose and the specific content users could modify. For instance, we have a singleton document titled Global Settings, where clients can update the navbar and footer content.

Rather than explaining the document’s purpose every time a client wants to make changes, we decided to add informative text directly within the document. This self-explanatory text helps guide clients through the content they can edit, minimizing confusion.

In this guide, I’ll show you how to add informative text to any document in Sanity Studio using a simple read-only field and a custom component.

Step 1: Create a Custom Component

Start by creating a new component that will display the informational text. In your Sanity project, create a new file for this component:

<sanity_project>/components/DocumentInfo.tsx

export const InfoText = () => (
  <div style={{ padding: '20px', background: '#f0f0f0', borderRadius: '8px' }}>
    <p>
      <strong>Global Site Settings:</strong> Use this document to configure your site's global settings, such as the navbar links and logo. Changes made here will apply across your entire site.
    </p>
  </div>
);

This component provides the user with a simple explanation of what the Global Settings document controls.

Step 2: Update Your Schema

Next, we’ll import the new InfoText component into your schema and create a read-only field to display it. In this case, we’ll use the Global Settings schema as an example:

<sanity_project>/schemaTypes/global_settings.ts

import { defineField, defineType } from "sanity";
import { InfoText } from "../components/DocumentInfo"; // Import the new component

const GlobalSettings = defineType({
  name: "globalSettings",
  title: "Global Settings",
  type: "document",
  fields: [
    // Define the read-only field for the informative text
    defineField({
      name: "info",
      type: "string",
      components: {
        field: InfoText
      },
      readOnly: true
    }),
    // Other schema fields...
  ]
});

export default GlobalSettings;

Here, we define a new field for the Global Settings document that uses our InfoText component. Setting the field as readOnly: true ensures that clients can’t edit this information but can easily see it when they open the document.

Final Result

Once you’ve added the component and updated the schema, here’s what the Global Site Settings document will look like in Sanity Studio:

This approach helps reduce client confusion by clearly explaining the purpose of each document, and it saves time by reducing the need for manual explanations.

Thanks for reading!!