How to add drag-and-drop reordering for posts in Sanity Studio?
Not a dumb question at all! This is a common need, and there's an official Sanity plugin that does exactly what your client wants.
You'll want to use the @sanity/orderable-document-list plugin. It adds drag-and-drop functionality directly in the Studio so editors can reorder documents by simply dragging them up or down in the list.
Here's how to set it up:
- Install the plugin:
npm i @sanity/orderable-document-list- Add an
orderRankfield to your schema (for the document type you want to make orderable, like "post"):
{
name: 'orderRank',
title: 'Order Rank',
type: 'string',
hidden: true, // hides it from the editor UI
}- Configure your desk structure to use the plugin. In your
sanity.config.ts(or desk structure file):
import {orderableDocumentListDeskItem} from '@sanity/orderable-document-list'
// In your structure configuration:
orderableDocumentListDeskItem({
type: 'post',
title: 'Posts',
S,
context
})The plugin works by managing an orderRank field behind the scenes. Once set up, your client will see a drag handle next to each document and can simply drag posts to reorder them.
Important note: This creates a manual sort order that you can query in your frontend. You'll need to use the orderRank field in your GROQ queries to respect this ordering:
*[_type == "post"] | order(orderRank)This is much cleaner than older workarounds like adding manual "order" number fields or creating wrapper documents with reference arrays. The plugin is maintained by Sanity and works great for most use cases where you need manual document ordering.
Show original thread39 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.