Live Preview

How it works

1. 1

   Duggie CMS generates a short-lived preview token tied to your current editing session.

2. 2

   The CMS builds a preview URL from your project website URL (set in Settings) with the token appended as a query parameter. You can copy the link or open it directly in a new tab. https://yoursite.com/?duggiePreviewToken=TOKEN

3. 3

   Your website detects the token and forwards it to /v1/content as the duggiePreviewToken query parameter. The API responds with draft content instead of only published content.

4. 4

   As you edit assets in the CMS, the preview refreshes to show your latest unsaved changes.

Setup

// Read token from your server-side request URL
const previewToken = req.query.duggiePreviewToken;

const res = await fetch('/v1/content', {
  headers: {
    'x-api-key': process.env.DUGGIE_CLIENT_KEY,
    // Recommended: pass token as a request header
    ...(previewToken && { 'x-duggie-preview-token': previewToken })
  }
});

const { assets } = await res.json();

Token security

Preview tokens arrive as a URL query parameter, which means they can end up in browser history, server access logs, and Referer headers sent to third-party resources (analytics, fonts, CDNs). The token is opaque: a random string with nothing encoded in it, so the link itself reveals nothing about your project or your account. Combined with the short expiry, a leaked token exposes draft content for a few minutes and nothing else. It cannot be used to write, and it stops working the moment the project is deactivated.

For a cleaner integration, follow this pattern on your page load:

1. 1Read the token from ?duggiePreviewToken= on page load
2. 2Store it in sessionStorage so it survives navigation within the same tab
3. 3Strip it from the URL with history.replaceState so it doesn't appear in browser history or referrer headers
4. 4Include it as the x-duggie-preview-token header on API calls for the duration of the session
5. 5Clear it from sessionStorage when the token expires or the session ends

// On page load: read, store, and strip the token from the URL
const params = new URLSearchParams(location.search);
const token = params.get('duggiePreviewToken');

if (token) {
  sessionStorage.setItem('duggiePreviewToken', token);
  params.delete('duggiePreviewToken');
  history.replaceState({}, '', `${location.pathname}${params.size ? '?' + params : ''}`);
}

// On each API call: read from sessionStorage and pass as a header
const previewToken = sessionStorage.getItem('duggiePreviewToken');

const res = await fetch('/v1/content', {
  headers: {
    'x-api-key': 'YOUR_CLIENT_KEY',
    ...(previewToken && { 'x-duggie-preview-token': previewToken })
  }
});