Register now - Learn how Tecovas roped in success with Sanity and Shopify 🤠
November 15, 2023 (Updated November 16, 2023)

Enable Comments inside Sanity Studio

By Marco Spinello

Set up comments so that they’re available in the studio to authors and editors.

Comments are available for Sanity Studio as a beta release. Currently, developers need to manually set the functionality up for each project in the main Sanity config file.

Audience: developers

Goal

This guide walks developers through implementing comments inside Sanity Studio for asynchronous collaboration in an editorial team.

Prerequisites

Before you start, make sure you:

  • Update your instance to the latest Studio release.
  • Have the latest Sanity CLI installed (shipped with Studio, same version as Studio.)
  • Have the latest Node.js LTS version.
  • Have a working Sanity user account to log in so that you can use the Sanity CLI.

Enable and disable comments

Gotcha

Disabling comments hides them in the studio so that content authors and editors can’t access them. Any existing comments and replies in threads persist in the add-on comment datasets they’re stored in.

You can enable comments for your authors and editors for all documents in a project, for a specific document type (documentType), or for selected document types.

While in beta, unstable_comments.enabled controls enabling and disabling comments for a project. It’s a Boolean switch where:

  • true: comments are enabled.
  • false: comments are disabled.
unstable_comments: {
  enabled: true, // Comments enabled
}

To add this feature flag to your Studio config file:

  1. Open the studio configuration file for your project. In general, the file name is sanity.config.ts|js, and it’s in the project root directory.
  2. Go to the main studio configuration object. Typically, look for a line that starts with: export default defineConfig.
  3. Inside defineConfig, go to the document property. If it doesn’t exist, create it.
  4. Inside the document property, add the unstable_comments.enabled feature flag, and then save the file.
export default defineConfig({
  // Your configuration for the project
  ...
  document: {
    unstable_comments: {
      enabled: true, // Comments enabled
    }
  }
})

Enable comments for all documents

To enable comments globally for all documents in a project:

  1. Open the sanity.config.[js|ts] configuration file.
  2. In the document property inside the defineConfig function set unstable_comments.enabled to true:
export default defineConfig({
  // Your configuration for the project
  ...
  document: {
    unstable_comments: {
      enabled: true,
    }
  }
})

Disable comments for all documents

To disable comments, set unstable_comments.enabled to false in the document property inside the defineConfig function.

The following example disables comments globally for all documents in a project:

export default defineConfig({
  // Your configuration for the project
  ...
  document: {
    unstable_comments: {
      enabled: false,
    }
  }
})

Enable comments for a document type

You can also selectively enable comments so that they’re only available for a specific document type inside a project.

To enable comments for a specific document type in a project, use the documentType property to select the document that supports commenting.

The following example enables commenting only for documents whose type is whitepaper:

  1. Open the sanity.config.[js|ts] configuration file.
  2. In the document property inside the defineConfig function, assign unstable_comments.enabled an arrow function to enable comments only for the specified document type:
export default defineConfig({
  // Your configuration for the project
  ...
  document: {
    unstable_comments: {
      enabled: (ctx) => {
        return ctx.documentType == 'whitepaper'
      }
    }
  }
})

If you define a non-existing document type, function execution fails silently: since the specified document type does not exist, nothing happens.

Disable comments for a document type

You can use the same filtering mechanism to exclude a specific document type.

The following example enables commenting for all documents in the project, except documents whose type is author:

  1. Open the sanity.config.[js|ts] configuration file.
  2. In the document property inside the defineConfig function, assign unstable_comments.enabled an arrow function to disable comments only for the specified document type:
export default defineConfig({
  // Your configuration for the project
  ...
  document: {
    unstable_comments: {
      enabled: (ctx) => {
        return ctx.documentType !== 'author'
      }
    }
  }
})

Enable comments for more document types

Besides targeting a specific document type in a project, you can enable comments for a set of document types.

The following example enables commenting only for documents whose type is article, blog, and whitepaper:

  1. Open the sanity.config.[js|ts] configuration file.
  2. In the document property inside the defineConfig function, assign unstable_comments.enabled an arrow function to enable comments only for the specified document type:
const COMMENTS_ENABLED = ['article', 'blog', 'whitepaper']

export default defineConfig({
  // Your configuration for the project
  ...
 
  document: {
    unstable_comments: {
      enabled: (ctx) => {
        return COMMENTS_ENABLED.includes(ctx.documentType)
      }
    }
  }
})

Protip

To disable comments for a set of document types, exclude the target documents from the array.

Check add-on comment datasets

Comments aren’t saved in the same dataset as the document they’re attached to. They’re stored in a dedicated add-on dataset associated with the parent dataset where the document lives. Currently, add-on datasets are only available for comments.

Add-on comment datasets:

  • Don’t count toward the data limit of your current plan.
  • Are listed under Datasets, along with all existing datasets for a project.
  • Include a distinctive suffix in the dataset name. This is a best-effort attempt, and the result may vary, depending on the character length of the name of the related document dataset. Examples:
    • <related-document-dataset>-comments
    • <related-document-dataset>-cmts
    • <related-document-dataset>-cmt
    • <related-document-dataset>-c
  • Are searchable: you can query comment datasets with GROQ or GraphQL.

When a user adds the first comment to any document in a project, an add-on comment dataset is created automatically to store the comment data. This avoids cluttering a project with unused datasets.

While in beta, comments live in a separate dataset from the document they’re attached to, and therefore they’re preserved after deleting the document. If you restore the document at a later time, the corresponding comments are restored, too.

If you delete an add-on comment dataset, all the comments stored in the dataset and related to a document are deleted. This is a destructive action, and it’s not possible to undo it. To restore the ability to add new comments in the studio after deleting an add-on comment dataset, reload the studio instance.

Further reading

Sanity – build remarkable experiences at scale

Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.

Other guides by author