Studio preview iframe missing localhost URL for slug routes
https://www.sanity.io/guides/nextjs-live-preview back up. It’s helped me get Studio-embedded previews working. However, when I add the code in Next Steps to my Iframe options object, I can’t preview my slug routes, only my homepage. I checked that the slug is available and the path correct. For instance, if I try to hit my about page, the url displayed in the studio’s Iframe form has http://localhost:3000 carved off and displays only
/api/preview?slug=/about
When I enable preview mode outside of the studio and navigate to those routes, it works fine. Looking through
the repo linked in the guide, I can’t see anything I’m missing. Should the
truecondition resolve for valid slugs here? What am I missing?
.options({
URL: (doc) => doc?.slug?.current
? `<http://localhost:3000/api/preview?slug=${doc.slug.current}>`
: `<http://localhost:3000/api/preview>`,
})URL:seems not to work at all, and I only get the preview to resolve if I use the lowercase
url:
I can see you're running into two issues with the iframe preview setup. Let me address both:
The URL vs url key issue
You're absolutely right - it should be lowercase url: not URL:. This is case-sensitive, and the correct property name in the iframe options object is url. That's why changing it to lowercase made it work.
The path-only URL issue in the iframe
The problem you're experiencing where the iframe shows only /api/preview?slug=/about instead of the full http://localhost:3000/api/preview?slug=/about is likely happening because you have angle brackets in your URL string:
url: (doc) => doc?.slug?.current
? `<http://localhost:3000/api/preview?slug=${doc.slug.current}>`
: `<http://localhost:3000/api/preview>`,Remove the angle brackets - they're not part of the actual URL syntax and are causing the protocol/domain to be stripped. It should be:
url: (doc) => doc?.slug?.current
? `http://localhost:3000/api/preview?slug=${doc.slug.current}`
: `http://localhost:3000/api/preview`,The angle brackets < > are just markdown/documentation formatting that sometimes appears in examples, but they shouldn't be in your actual code.
Modern alternative: Presentation tool
Since you're working on live preview functionality, you might want to check out the Presentation tool which is the modern approach to visual editing in Sanity Studio. It provides a more robust iframe preview experience with built-in support for visual editing features. The guide you're following is for the older Pages Router approach, which still works, but the Presentation tool offers a better developer experience.
If you're still seeing issues after removing the angle brackets, double-check that your preview API route is correctly handling the slug parameter and that doc?.slug?.current actually contains the value you expect when the function runs.
Show original thread4 replies
Was this answer helpful?
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.
