How to preview Umbraco content in a headless setup

Can Umbraco editors really preview content in a headless setup? 🤔

Yes, they can. Because our Senior Software Engineer Jesper Weber is pretty awesome and has created a package to do just that! 💪

But first, your headless API needs the ability to return both published and unpublished data. And guess what? Enterspeed supports that 😇

Normally in Umbraco, editors just click the preview button on a node to open a new preview window. But, argh… If you’re running on a headless setup, the preview button doesn’t work 🤯

So what do you do?

💁Introducing Jesper's creation "Our.Umbraco.HeadlessPreview" package!

The package overrides the default Umbraco preview button and lets you configure an alternative preview url. This effectively brings back the preview button functionality that editors are used to from Umbraco. And it works whether you use Enterspeed or any other headless setup.

And because Jesper is so nice, he's added it open source on Umbraco's Marketplace.

👉 Enterspeed.Source.UmbracoCms | Umbraco Marketplace

Just see how smoothly it runs👇

For other Umbraco related features, check out how to ingest Umbraco data into Enterspeed in just three minutes🚀

Or maybe you rather want to read a guide that shows you exactly how you can enable preview mode in your Next.js application?