Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

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?
Feb 10, 2023, 10:46 AM
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')
        ])
  )
)
Feb 10, 2023, 10:52 AM
Alright thanks
user U
i will give that a try
Feb 10, 2023, 10:53 AM
hey what does defineStructure look like in the utils directory?
Feb 10, 2023, 11:41 AM
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
šŸ™‚
Feb 10, 2023, 12:12 PM
thanks man
Feb 10, 2023, 12:13 PM
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?
Feb 10, 2023, 1:19 PM
hmm is that in the editor or in the preview mode? šŸ¤”
Feb 10, 2023, 1:21 PM
both have this json on top
Feb 10, 2023, 1:34 PM
weird
Feb 10, 2023, 1:35 PM
doesn't matter really
Feb 10, 2023, 1:35 PM
okey, I guess there must be something that might be setup worng šŸ¤” Never seen that before
Feb 10, 2023, 1:35 PM
preview section in the document was missing
Feb 10, 2023, 1:48 PM
preview: {
  select: {
    title: "title",
  }
}
Feb 10, 2023, 1:49 PM
šŸ‘ šŸ‘ šŸ‘
Feb 10, 2023, 4:08 PM

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.

Was this answer helpful?