How to add a button to open production URL for specific document types?

You have a few great options for adding "View on Site" functionality to your Sanity Studio documents!

Option 1: Custom Document Action (Recommended for Simple Links)

You can create a custom document action that adds a button to the document toolbar. This is perfect for a straightforward "Open in new tab" button.

Here's how to implement it:

// documentActions.js
export const ViewOnSiteAction = (props) => {
  const slug = props.draft?.slug?.current || props.published?.slug?.current
  
  return {
    label: 'View on Site',
    icon: () => '🌐',
    onHandle: () => {
      // Construct your production URL
      const url = `https://yoursite.com/${slug}`
      window.open(url, '_blank')
    }
  }
}

// In your sanity.config.ts
import {defineConfig} from 'sanity'

export default defineConfig({
  // ... other config
  document: {
    actions: (prev, context) => {
      // Add the action to specific document types
      if (context.schemaType === 'post' || context.schemaType === 'page') {
        return [...prev, ViewOnSiteAction]
      }
      return prev
    }
  }
})

This gives you a clean button in the document toolbar that opens your production URL in a new tab.

Option 2: Iframe Pane Plugin

If you want to show the preview within Studio (not just a link), check out the sanity-plugin-iframe-pane. This displays your production URL in a split pane view right next to the editor, with built-in buttons to copy the URL or open in a new tab.

Install it with:

npm i sanity-plugin-iframe-pane

This gives editors a side-by-side editing and preview experience, which might actually be more intuitive than navigating to the Presentation tool.

Option 3: Document Badges

While document badges are primarily for displaying status information next to the toolbar, they're less suitable for interactive elements like clickable links. They're better suited for visual indicators rather than navigation.

Why Not Just Use Presentation Tool?

I totally understand your concern! The Presentation tool is powerful for Visual Editing but can be overkill if editors just want to quickly check how something looks on the live site. A custom document action or iframe pane gives them immediate, one-click access without extra navigation.

The document action approach is probably your best bet for simplicity—it's just a button that does exactly what you need, and you can customize it per document type to handle different URL structures.