Show published/unpublished status icon in Sanity document list
Yes, you can definitely show published/unpublished status in document lists! The best way to do this is by using preview configuration in your schema with the prepare function to customize how documents appear in lists.
Here's a practical example that shows a document's published status:
defineType({
name: 'post',
type: 'document',
fields: [
// your fields here
],
preview: {
select: {
title: 'title',
media: 'image',
// The _id field is always available
id: '_id'
},
prepare({title, media, id}) {
// Documents without _id starting with "drafts." are published
const isPublished = !id?.startsWith('drafts.')
return {
title: title,
subtitle: isPublished ? 'âś… Published' : 'đź“ť Draft',
media: media
}
}
}
})For a more visual approach, you can also conditionally change the media/icon based on status:
import { PublishIcon, EditIcon } from '@sanity/icons'
preview: {
select: {
title: 'title',
media: 'image',
id: '_id'
},
prepare({title, media, id}) {
const isPublished = !id?.startsWith('drafts.')
return {
title: title,
subtitle: isPublished ? 'Published' : 'Draft',
media: media ?? (isPublished ? PublishIcon : EditIcon)
}
}
}Important note about the API perspective change: As of API version 2025-02-19, the default perspective changed from raw to published. This means by default you'll only see published documents in your queries. If you need to see both drafts and published documents in your custom document lists, you may need to adjust your GROQ filters accordingly.
You can also combine this with the Structure Builder to create separate lists for published and draft documents:
S.list()
.title('Content')
.items([
S.listItem()
.title('Published Posts')
.child(
S.documentList()
.title('Published Posts')
.filter('_type == "post" && !(_id in path("drafts.**"))')
),
S.listItem()
.title('Draft Posts')
.child(
S.documentList()
.title('Draft Posts')
.filter('_type == "post" && _id in path("drafts.**")')
)
])This gives your editors a clear visual indicator of document status right in the list view, making it much easier to manage content workflow!
Show original thread14 replies
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.