CapaPreview
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
- A preview base URL for the project, set in Settings > Project.
- 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. - A preview route on your site that accepts Capa's preview link and turns on draft mode.
- The overlay from
@capacms/sdk, which draws the outlines and handles clicks. Without it the preview still works, and says what to add.