# Preview

Source: https://capacms.com/docs/preview

Open your own site beside the editor, showing the draft being written, and click the page to edit the field behind it.

Press **Preview** on an entry and your website opens next to the form, showing the draft you are editing. Focus a field and its spot on the page is outlined. Click text on the page and the editor jumps to the field that holds it. Save a draft and the preview updates in place, keeping its scroll position. On a narrow window, **Preview** opens the draft in a new tab instead.

Editors can switch between **Draft** and **Published** to compare what they are writing with what visitors see, check the phone layout, and show every editable spot with **Show fields**.

## What your site needs

1. **A preview base URL** for the project, set in **Settings > Project**.
2. **A route on the model**, set in its **Model settings**, so Capa knows which page shows an entry (`/blog/[slug]`). A model without a route has no **Preview** button.
3. **A preview route on your site** that accepts Capa's preview link and turns on draft mode.
4. **The overlay** from `@capacms/sdk`, which draws the outlines and handles clicks. Without it the preview still works, and says what to add.

## Set it up
- [Next.js](https://capacms.com/docs/preview/nextjs): Middleware, the preview route and the overlay, with @capacms/sdk.
- [The protocol](https://capacms.com/docs/preview/protocol): The messages between the editor and your page, for other stacks.
- [Pages](https://capacms.com/docs/preview/pages): Which entries each page reads, and the Capa-Page header.