Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
Get help on Slack

How to add preview tabs to custom documents in Sanity Studio

31 replies
Last updated: Jun 8, 2022
Hello, is there a simple reason why “Articles” have the Editor/Preview tabs in Studio, but ‘documents’ do not?
Jun 8, 2022, 10:29 AM
Are you talking about the community studio or your own or something else?
Jun 8, 2022, 10:29 AM
Hi
user F
we are using the Free plan studio, pushed to a sanity.studio url (or run locally with 
sanity start
Jun 8, 2022, 10:32 AM
Articles (with Preview tab option)
Jun 8, 2022, 10:33 AM
Document (without)
Jun 8, 2022, 10:33 AM
Okay. Kind reminder that you are setting up your own schema and your own plugins. In other words, your situation is always unique because you customize the whole thing. So you can’t expect people to know what you’re talking about. 😄
So this view comes from the
iframe pane plugin. It is present provided there is a resolved URL for the preview, otherwise it’s not shown I believe.
Jun 8, 2022, 10:36 AM
Looking at your screenshots, it might also be because your homepage is a singleton document (judging by the absence of a second panel list). Maybe it’s handled differently then.
Jun 8, 2022, 10:38 AM
Ah yes, definitely that reason. The plugin is configured via the structure builder, and your structure is custom for the homepage.
Jun 8, 2022, 10:40 AM
Ah ok, is there a way to make this work? I couldn’t find any docs about the difference
Jun 8, 2022, 10:43 AM
I’m checking. 🙂
Jun 8, 2022, 10:48 AM
Yes, got it.
Jun 8, 2022, 10:50 AM
Can you show me your structure override file please?
Jun 8, 2022, 10:50 AM
Hmm, what might that look like? (sorry this is my first Sanity project)
Jun 8, 2022, 11:00 AM
Ah, is that this 
deskStructure.js
Jun 8, 2022, 11:01 AM
import S from "@sanity/desk-tool/structure-builder";

import { ImHome, ImCog } from "react-icons/im";

import Iframe from "sanity-plugin-iframe-pane";

import resolveProductionUrl from "./resolveProductionUrl";


// Guide for structure builder: <https://www.sanity.io/docs/structure-builder-introduction>


export default () =>

S.list()

.title("Structure")

.items([

S.listItem()

.title("Homepage")

.icon(ImHome)

// Manually add in a new listItem

.child(S.document().schemaType("homepage").documentId("homepage")),

// The standard listItem - exclude some so you can't make multiples of them (e.g. singletons)

...S.documentTypeListItems().filter(

(listItem) => !["siteSettings", "homepage"].includes(listItem.getId())

),

// Add a horizontal line

S.divider(),

// Manually add in a new listItem

S.listItem()

.title("Settings")

.icon(ImCog)

.child(

S.document().schemaType("siteSettings").documentId("siteSettings")

),

]);


export const getDefaultDocumentNode = () => {

return S.document().views([

S.view.form(),

S.view

.component(Iframe)

.options({

url: (doc) => resolveProductionUrl(doc),

})

.title("Preview"),

]);

};
Jun 8, 2022, 11:01 AM
Right.
Jun 8, 2022, 11:03 AM
Replace this part:
S.document().schemaType("homepage").documentId("homepage")
With:

S.document().views([
    S.view.form(),
    S.view
      .component(Iframe)
      .options({
        url: (doc) => resolveProductionUrl(doc),
      })
      .title("Preview"),
  ]).schemaType("homepage").documentId("homepage")
Jun 8, 2022, 11:03 AM
Basically, wherever you see 
.document()
, you need to chain the 
.views(…)
that you also defined at the bottom of the file.
Jun 8, 2022, 11:03 AM
Do you see what I mean?
Jun 8, 2022, 11:04 AM
I do!
Jun 8, 2022, 11:04 AM
and that works!
Jun 8, 2022, 11:04 AM
I recommend extracting the array you pass to 
.views()
in a constant and then just pass 
.views(VIEWS)
everywhere you need. 😉
Jun 8, 2022, 11:05 AM
To avoid duplicating the views config.
Jun 8, 2022, 11:05 AM
Is there a docs page which explains this?
Jun 8, 2022, 11:05 AM
You mean that whole problem?
Jun 8, 2022, 11:05 AM
Maybe just the 
views
bit?
Jun 8, 2022, 11:06 AM
Jun 8, 2022, 11:06 AM
Jun 8, 2022, 11:06 AM
And then subsequent pages or so.
Jun 8, 2022, 11:06 AM
Amazing. Thank you very much for your help (do you have a tipjar/paypal.me link I can send you a small thank you to?)
Jun 8, 2022, 11:08 AM
Aww, that’s unnecessary, thank you. 💚
Jun 8, 2022, 11:29 AM
Ok, thank you anyway, and have a nice day!
Jun 8, 2022, 11:32 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?