Skip to Content

Vercel Toolbar

Draft Mode

Draft Mode

Copy page

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 bypassToken option to prerender configuration.

13.4. The name was changed to avoid confusion with preview deployments, which is a different product.

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

How Draft Mode works

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


Getting started

To use Draft Mode with Next.js on Vercel, you must:

  1. Enable ISR on pages that fetch content. Using ISR is required on pages that you want to view in Draft Mode
  2. Add code to your ISR pages to detect when Draft Mode is enabled and render the draft content
  3. Toggle Draft Mode in the Vercel Toolbar by selecting Draft Mode in the toolbar menu to view your draft content. Once toggled, the toolbar will turn purple, indicating that Draft Mode is enabled

    Next.js (/app)Next.js (/pages)SvelteKit

    TypeScript

    import { draftMode } from'next/headers';

    asyncfunctiongetContent() {

    const { isEnabled } =awaitdraftMode();

    constcontentUrl= isEnabled

    ?'https://draft.example.com'

    :'https://production.example.com';

    // This line enables ISR, required for draft mode

    constres=awaitfetch(contentUrl, { next: { revalidate:120 } });

    returnres.json();

    }

    exportdefaultasyncfunctionPage() {

    const { title,desc } =awaitgetContent();

    return (

    {title}

    {desc}
    ); }

Sharing drafts

See the Next.js docs to learn how to use Draft Mode with self-hosted Next.js projects:


Last updated August 11, 2026

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

https://my-site.com/blog/post-01?__vercel_draft=1

Once implemented, team members can access Draft Mode from the Vercel Toolbar by selecting the eye icon

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

Previous

Comments

Cross-link map: Draft Mode (/docs/draft-mode)From the Vercel docs graph (built 2026-09-21T05:26:59.511Z), spanning vercel.com docs + KB, nextjs.org, ai-sdk.dev, and other Vercel documentation sites. Full graph as JSON: https://vercel.com/docs/graph.jsonSemantically closest pagesHow to preview content with Draft Mode in Next.js — Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.How to preview content with Draft Mode in Next.js — Bypass Next.js caching for a request so editors can preview unpublished content from a headless CMS.draftMode — API Reference for the draftMode function.Features — Learn how to implement common Vercel platform features through the Build Output API.Draft Flags — Learn how draft flags work and how to promote them to Vercel Flags.This page links to (8)How to preview content with Draft Mode in Next.js — Bypass Next.js caching for a request so editors can preview unpublished content from a headless CMS.How to preview content with Draft Mode in Next.js — Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.Build Output API — The Build Output API is a file-system-based specification for a directory structure that can produce a Vercel deploymentVercel Primitives — Learn about the Vercel platform primitives and how they work together to create a Vercel Deployment.Next.js on Vercel — Vercel is the native Next.js platform, designed to enhance the Next.js experience.SvelteKit on Vercel — Deploy SvelteKit applications to Vercel and configure the adapter, rendering, streaming, ISR, analytics, and Routing MidIncremental Static Regeneration \(ISR\) — ISR serves cached static pages while regenerating content in the background. Vercel\\Vercel Toolbar — Learn how to use the Vercel Toolbar to leave feedback, navigate through important dashboard pages, share deployments, usPages that link here (17)By site: vercel-kb (6) · vercel-docs (11)From vercel-kbVercel vs Akamai — A detailed guide to Vercel vs Akamai: compute models, AI infrastructure, framework support, media streaming, CDN capabilVercel vs Fastly — A detailed guide to Vercel vs Fastly: full-stack application platform vs edge infrastructure layer, covering framework sVercel vs Netlify — A detailed guide to Vercel vs Netlify: runtimes, compute architecture, AI infrastructure, security, and when to choose eVercel vs Northflank — A detailed guide to Vercel vs Northflank: Fluid compute, CDN and caching, container image functions, security defaults,Vercel vs Railway — A detailed guide to Vercel vs Railway: serverless vs always-on containers, container images via Dockerfile.vercel, frameVercel vs Render — A detailed guide to Vercel vs Render: compute models, AI infrastructure, Docker and container image support, backgroundFrom vercel-docsVercel Primitives — Learn about the Vercel platform primitives and how they work together to create a Vercel Deployment.Cache Status and Reasons — Understand the cache status and reason shown for each request in Vercel logs, and what causes a response to miss, bypassNext.js on Vercel — Vercel is the native Next.js platform, designed to enhance the Next.js experience.SvelteKit on Vercel — Deploy SvelteKit applications to Vercel and configure the adapter, rendering, streaming, ISR, analytics, and Routing MidGlossary — Learn about the terms and concepts used in Vercel's products and documentation.Vercel CMS Integrations — Learn how to integrate Vercel with CMS platforms, including Contentful, Sanity, and Sitecore XM Cloud.General settings — Configure basic settings for your Vercel project, including the project name, build and development settings, root direcVercel Toolbar — Learn how to use the Vercel Toolbar to leave feedback, navigate through important dashboard pages, share deployments, usAdd the Vercel Toolbar to local and production environments — Learn how to use the Vercel Toolbar in production and local environments.Interaction Timing Tool — The interaction timing tool allows you to inspect in detail each interaction's latency and get notified for interactionsLayout Shift Tool — The layout shift tool gives you insight into any elements that may cause layout shifts on the page.

Was this helpful?

Edit Mode