Page preview

This guide explains how to integrate Page Previews in your frontend so backend users can preview page edits before saving.

How Page Preview Works

When a backend user previews a Page from the CMS editor, they are redirected to that page’s live URL with this suffix:

/preview/{issue_id}/{preview_key}

Example

https://www.mydomain.com/about-us/preview/84721/abc123securekey

The frontend should detect this preview URL and fetch preview data instead of published page data.

---

Backend setup instructions

Set a Page URL in the backend:

1. Navigate to Publisher -> Pages.
2. Create a new page or edit an existing page.
3. Fill the Preiew URL field.
4. Click on Save changes.
5. Go to the page and fill some content.
6. After you setup your frontend as described below, click on Preview to validate your work.

Frontend setup instructions

1. Detect preview mode from the URL

In your page route, check whether the URL ends with:

• /preview/{issue_id}/{preview_key}

If present, treat the request as preview mode.

2. Resolve the page ID

To fetch preview data, your frontend needs:

• id (the CMS Page ID)
• issue_id (from preview URL)
• preview_key (from preview URL)

Most implementations already resolve the page ID from the live URL/slug when loading a published page. Reuse that same lookup for preview mode.

3. Fetch preview Issue data

Use this endpoint:

GET /cms/page/{id}/issues/{issue_id}/preview/{preview_key}

Example:

GET /cms/page/123/issues/84721/preview/abc123securekey

The response returns an Issue object that is similar to published page payloads, so it can be rendered with the same page template/components.

4. Render the previewed page

Render the preview response exactly as you render a live page, so the editor sees an accurate representation of unsaved changes.

---

Preview key validity

Preview keys are temporary.

• A preview key is valid for 15 minutes only.

If the key is expired or invalid, return a user-friendly message such as:

• “This preview link has expired. Please reopen preview from the CMS.”

---

Recommended behavior

• Keep preview detection and preview fetching isolated to route-level logic.
• Reuse existing page rendering components to avoid differences between preview and published views.

Summary

To implement Page Preview, detect /preview/{issue_id}/{preview_key} in the page URL, fetch GET /cms/page/{id}/issues/{issue_id}/preview/{preview_key}, then render the returned Issue object with your normal page view logic. Remember that preview keys expire after 15 minutes.