Get help on Discord

Is the list views documentation valid for Sanity Studio 3?

6 replies
Last updated: Feb 22, 2023
Is this documentation still valid in Studio 3? I can't get it to work. https://www.sanity.io/docs/previews-list-views Edit: I just needed to rename the file, thanks RD.
AI Update

Yes, the documentation is still valid for Studio v3! The article you're looking at covers List Previews configuration, which works the same way in Studio v3 as it did in v2.

Based on your edit mentioning you "just needed to rename the file," it sounds like you may have been dealing with the Studio v3 project structure changes. In Studio v3, schema files are typically organized in a schemaTypes folder and imported into your configuration differently than in v2.

Here's what likely happened:

Studio v2 structure:

  • Schema files could be in various locations
  • Often used schemas/schema.js as an index file

Studio v3 structure:

  • Schema files are typically in src/schemaTypes/ (or schemaTypes/)
  • Imported via sanity.config.ts or sanity.config.js
  • Uses ES modules (export default or named exports)

The preview configuration itself hasn't changed - you still use the same preview object with select and prepare functions as shown in the documentation. For example:

export default {
  name: 'movie',
  type: 'document',
  fields: [...],
  preview: {
    select: {
      title: 'title',
      subtitle: 'releaseDate'
    }
  }
}

If you're working with Studio v3, make sure you're using the modern project structure with proper ES module exports. The preview functionality documented in that article works identically in both versions!

Show original thread
6 replies
More importantly, I have a string const for the preview thumbnail image url, I just need to know how to get that string accepted and displayed as the list media
I believe you’ll need to change your file extension to .tsx if you’re using JSX.
user M
perfect, thanks! I'm glad it was something simple that I was missing 😆
Hey did you get this to work?I am getting the error shown in image when trying to use a span with backgroundColor red. File extension is .tsx, react is imported at the top.
code for the preview:

preview: {
    select: {
      title: 'title',
      type: 'campaignItem._type',
      start: 'startTime',
      end: 'endTime',
    },
    prepare({
      title,
      type,
      start,
      end,
    }: {
      title: string;
      type: string;
      start: string;
      end: string;
    }) {
      let status = 'Ingen dato';
      const now = new Date().toISOString();
      if (start < now && now < end) {
        status = 'Pågående';
      }
      if (now > end) {
        status = 'Utgått';
      }
      if (start > now) {
        status = `Begynner: ${start}`;
      }
      return {
        title,
        subtitle: (
          <span style={{ backgroundColor: 'red' }}>
            {status}
            {titleFromType[type]}
          </span>
        ),
      };
    },
  },
Do you know if this works for subtitle and title aswell? Like providing some html tags that wraps it then style that tag with a color.It seems to error-out when im using it on anything else than the media key.
Nah, subtitle and title can only take strings or numbers, I believe.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?