Draft Mode
Vercel's Draft Mode enables you to view your unpublished headless CMS content on your site before publishing it.Draft Mode, formerly Preview Mode, enables you to safely view your unpublished headless CMS content on your website rendered with all the normal styling and layout that you would see once published.
You can use Draft Mode if you:
- Use Incremental Static Regeneration (ISR) to fetch and render data from a headless CMS
- Want to view your unpublished headless CMS content on your site without rebuilding your pages when you make changes
- Want to protect your unpublished content from being viewed publicly
To use Draft Mode with projects hosted on Vercel, you must deploy your site with SvelteKit, Next.js, or a supported framework.
Draft Mode on Vercel is available anywhere the Vercel toolbar is, including in production and Preview Deployments.
To use Draft Mode with Next.js on Vercel, you must:
- Add code to your pages that detects when Draft Mode is enabled and renders draft content. Draft Mode will only be available on pages which you add this code to
- Enable Draft Mode with the Vercel toolbar in a Preview Deployment
export async function getStaticProps(context) {
const url = context.draftMode
? 'https://draft.example.com'
: 'https://production.example.com';
const res = await fetch(url);
return {
props: {
posts: await res.json(),
},
revalidate: 120,
};
}
See the Next.js docs to learn how to use Draft Mode with self-hosted Next.js projects:
To use Draft Mode with SvelteKit, see our dedicated SvelteKit docs.
You and your team members can toggle Draft Mode in the Vercel toolbar on Preview Deployments. When you do so, the toolbar will become purple to indicate Draft Mode is active.


Users outside your Vercel team cannot toggle Draft Mode.
If your Next.js version is <13.4
, the Vercel toolbar will turn purple when Draft Mode is enabled, but won't be able to toggle it on or off.
To share a draft URL, it must have the ?__vercel_draft=1
query parameter. For example:
https://my-site.com/blog/post-01?__vercel_draft=1
Viewers outside your Vercel team cannot enable Draft Mode or see your draft content, even with a draft URL.
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 yourself.
The process works like this:
- Each ISR route has a
bypassToken
configuration option, which is assigned a generated, cryptographically-secure value at build time - When someone visits an ISR route with a
bypassToken
configured, the page will check for a__prerender_bypass
cookie - If the
__prerender_bypass
cookie exists and has the same value as thebypassToken
your project is using, the visitor will view the page in Draft Mode
Both Next.js and SvelteKit support Draft Mode.
Any framework that uses the Build Output API can support Draft Mode by adding the bypassToken
option to prerender configuration.