How to add different views (Editor, Preview, JSON) to orderable-document-list?

Looking at the documentation, the orderable-document-list plugin creates a custom document list view, and to add different views (Editor, Preview, JSON) to the documents within it, you'll need to configure custom document views using the Structure Builder's defaultDocumentNode method.

Here's how to do it:

In your Structure Builder configuration (typically in sanity.config.ts or your structure file), you can use defaultDocumentNode to add multiple views to your documents. This works alongside the orderable-document-list plugin:

import { structureTool } from 'sanity/structure'
import { orderableDocumentListDeskItem } from '@sanity/orderable-document-list'

export default defineConfig({
  // ... other config
  plugins: [
    structureTool({
      structure: (S, context) => {
        return S.list()
          .title('Content')
          .items([
            // Your orderable document list
            orderableDocumentListDeskItem({
              type: 'yourDocumentType',
              S,
              context,
            }),
            // ... other items
          ])
      },
      // Add this to configure views for all documents
      defaultDocumentNode: (S, { schemaType }) => {
        // Apply custom views to specific document types
        if (schemaType === 'yourDocumentType') {
          return S.document().views([
            S.view.form(),  // Editor (default form view)
            S.view.component(YourPreviewComponent).title('Preview'),  // Custom preview
            S.view.component(JsonView).title('JSON'),  // JSON view
          ])
        }
        return S.document()
      }
    })
  ]
})

For the JSON view, you can create a simple component:

const JsonView = ({ document }) => {
  return (
    <pre style={{ padding: '1rem', overflow: 'auto' }}>
      {JSON.stringify(document.displayed, null, 2)}
    </pre>
  )
}

The key insight from the Structure Builder documentation and the Component View feature is that defaultDocumentNode applies to all document editors in your Studio, including those opened from the orderable-document-list. This means your custom views will be available when you click into any document from your orderable list.

Each view you add will appear as a tab at the top of the document editor, allowing users to switch between the Form (editor), your custom Preview, and JSON views.

Note: As mentioned in this community discussion, if the standard defaultDocumentNode approach doesn't work with your specific plugin configuration, you can also pass a child configuration directly to the orderable document list item that specifies the views, though the defaultDocumentNode approach is the recommended pattern for Studio v3.