Draft Mode

Draft Mode lets you view your unpublished headless CMS content on your website rendered with all the normal styling and layout that you would see once published.

Both Next.js and SvelteKit support Draft Mode. Any framework that uses the Build Output API can support Draft Mode by adding the option to prerender configuration.

You can use Draft Mode if you:

1. Use Incremental Static Regeneration (ISR) to fetch and render data from a headless CMS
2. Want to view your unpublished headless CMS content on your site without rebuilding your pages when you make changes
3. Want to protect your unpublished content from being viewed publicly

Draft Mode allows you to bypass ISR caching to fetch the latest CMS content at request time. This is useful for seeing your draft content on your website without waiting for the cache to refresh, or manually revalidating the page.

The process works like this:

1. Each ISR route has a configuration option, which is assigned a generated, cryptographically-secure value at build time
2. When someone visits an ISR route with a configured, the page will check for a cookie
3. If the cookie exists and has the same value as the your project is using, the visitor will view the page in Draft Mode

Once implemented, team members can access Draft Mode from the Vercel Toolbar by selecting the eye icon . Once selected, the toolbar will turn purple to indicate that Draft Mode is enabled.

To share a draft URL, it must have the query parameter. For example:

Viewers outside your Vercel team cannot enable Draft Mode or see your draft content, even with a draft URL.