Adding a preview of a singleton document on Sanity Studio using sanity-plugin-iframe-pane.

14 replies
Last updated: Feb 10, 2023
Hey friends,Can a singleton document like the home page have a preview on the studio?
If youre using the
sanity-plugin-iframe-pane
and have a custom structure for your home page you can do it like this:

import {ListItemBuilder} from 'sanity/desk'
import defineStructure from '../utils/defineStructure'
import Iframe from 'sanity-plugin-iframe-pane'
import {SanityDocument} from 'sanity'

const isDev = window.location.origin === '<http://localhost:3333>';
const liveUrl = 'localUrl'
const liveUrl = 'liveUrl'

// Customise this function to show the correct URL based on the current document
function getPreviewUrl(doc: SanityDocument) {
  if (isDev) {
    return `${localUrl}`
  } else {
    return `${liveUrl}`
  }
}

export default defineStructure<ListItemBuilder>((S) =>
  S.listItem()
    .title("Home")
    .schemaType('home')
    .child(
      S.document()
        .schemaType("home")
        .documentId("home")
        .views([
          S.view.form(),
          S.view
            .component(Iframe)
            .options({
              url: (doc: SanityDocument) => getPreviewUrl(doc),
            })
            .title('Preview')
        ])
  )
)
Alright thanks
user U
i will give that a try
hey what does defineStructure look like in the utils directory?
Oh, that was a bit unclear of course. The structure is based on this repo: https://github.com/sanity-io/sanity-shopify-studio
So you should be able to find everything concerning the structure there
πŸ™‚
thanks man
Hey sorry but i keep seeing the json of the doc on top where the title should be, is there a way to change it do you know?
hmm is that in the editor or in the preview mode? πŸ€”
both have this json on top
weird
doesn't matter really
okey, I guess there must be something that might be setup worng πŸ€” Never seen that before
preview section in the document was missing
preview: {
  select: {
    title: "title",
  }
}
πŸ‘ πŸ‘ πŸ‘

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.

Was this answer helpful?