Structured product data means every product fact lives in a typed attribute with a unit, a stable id…
Contentful Live Preview: What Your Frontend Has to Deliver
Contentful Live Preview lets editors see a draft right next to the entry editor and watch changes appear as they type. Contentful provides the preview pane, the Content Preview API and the Live Preview SDK, but the page inside that pane is your frontend. Whether the preview is accurate, fast and safe depends on how that frontend handles drafts, caching, indexing and locales.
What Contentful Live Preview consists of
Live Preview combines four building blocks. Naming them early helps your team scope the work.
- Content preview URLs: in the Contentful web app you define a preview URL per content type. That URL points to your website or storefront, the page that renders the draft.
- Content Preview API: drafts come from a separate API at preview.contentful.com. It needs its own preview access token, production Delivery API tokens do not work there, and it has its own rate limit that depends on your plan.
- Live preview pane: editors see the page side by side with the entry editor. According to Contentful's documentation, this side by side view works without the SDK.
- Live Preview SDK: the package @contentful/live-preview adds two advanced features. Inspector mode lets editors click an element in the preview and jump to its source field. Live updates show edits in the preview without a reload. The SDK supports plain JavaScript and React, including Next.js.
In short: Contentful manages content and drafts, your frontend renders what editors see.
What your frontend has to deliver
A preview that editors trust needs the frontend to handle six jobs. If you are still planning the Contentful connection itself, our practical tips for connecting Contentful from the frontend cover the groundwork.
- Render drafts on request. In preview mode, the frontend queries the Preview API with the preview token instead of the Delivery API. The token stays on the server and never ships in the browser bundle.
- Render server side without cache. A preview response must not land in a CDN, a reverse proxy or a framework cache. Otherwise editors see stale drafts, or shoppers see a draft.
- Keep preview pages out of search. Every preview URL needs noindex, nofollow, regardless of the page's normal SEO settings.
- Tag fields for inspector mode. Elements get data attributes such as data-contentful-entry-id and data-contentful-field-id, or the SDK helper getProps. Contentful recommends tagging larger elements and whole referenced entries rather than every small element or styling parameter. On Premium plans, Content Source Maps can automate part of this tagging.
- Handle locales explicitly. The SDK is initialized with a locale, and live updates do not support multiple locales in one GraphQL query. Preview localization, meaning a locale switcher in live preview and custom preview tokens per market, is available on Premium plans.
- Allow embedding. The preview runs in an iframe inside the Contentful web app. Your frontend must allow this through a Content-Security-Policy with frame-ancestors for app.contentful.com instead of a blocking X-Frame-Options header, and cookies need SameSite=None and Secure.
Common pitfalls
Preview shows something different from live
The most frequent cause is references. The Preview API resolves linked entries that are still drafts, while the Delivery API only returns published content. A teaser looks complete in preview and is missing after publishing. Other typical causes are a different environment in the preview URL or a locale fallback that only applies on one side.
Performance in preview
Preview is uncached by design, so every view hits the Preview API and your rendering. On pages with many references, the rate limit becomes noticeable, so plan lean preview queries.
Layout fields in the content model
When teams want the preview to look right, they often add fields for colors, spacing or column counts to content types. The model grows, entries become harder to reuse across channels, and every layout change turns into a content change. Content belongs in Contentful, layout decisions belong in the frontend layer.
The preview token as a shared secret
A preview token grants access to unpublished content. Treat it like a staging password, rotate it when people leave, and update every preview URL that contains it.
How Laioutr fits in
Contentful is the content layer: models, entries, drafts, the Preview API and the live preview pane. Laioutr is the Frontend Management Platform (FMP): the frontend that renders this content together with product data, plus the editor your team uses to compose pages. The two complement each other.
Content Preview in the Laioutr frontend. Any storefront URL opened with a preview token is rendered against unpublished content. The token is a project setting in Cockpit, separate from other secrets and separately rotatable, and it is meant to be pasted into CMS preview URL templates such as Contentful's content preview URLs. The server verifies the token, renders the page server side and sends it with Cache-Control private, no-store. Orchestr's caches are bypassed, and any presented token forces noindex, nofollow. A wrong token simply renders the published page. A valid token, however, opens all unpublished content of the project, so share it like a staging password. One detail for your runbook: a rotated token takes effect after the next deployment.
Studio as the visual editor. Studio, the visual editor of Laioutr, shows a live preview of the storefront while your team arranges sections and blocks, switches markets and languages and checks device views. Its "Show preview content" toggle sends the same preview token, so unpublished content from connected sources can appear inside the real page layout, provided the connector supports preview. Publishing remains a deliberate step taken by a person.
The Contentful connection reads content through the Content Delivery API, including localization and multiple environments. Content Preview gives every connector a server-verified preview signal; whether your Contentful setup switches to the Preview API with it is something we check together in a demo. For the editorial side of the same setup, read Contentful visual editing: the marketer layer.
A checklist for your preview setup
- Define a preview URL for each content type that renders as its own page.
- Store the preview token server side and document who has access.
- Disable all caches for preview responses, including framework route rules.
- Enforce noindex, nofollow on every preview URL.
- Test drafts with unpublished references before go-live.
- Decide which elements get inspector tags and keep layout fields out of the content model.
- Test preview for every locale and market you publish.
FAQ
Do I need the Live Preview SDK for Contentful Live Preview?
Not for the side by side view. You need the SDK for inspector mode and live updates.
Why does my preview show content that is missing on the live site?
Usually a referenced entry is still a draft. The Preview API returns it, the Delivery API does not. Publish references first or check them as part of your release routine.
Should preview pages be cached?
No. Preview content changes constantly and is meant only for editors. Render it server side, deliver it uncached and mark it noindex.
Does Laioutr replace Contentful Live Preview?
No. Contentful remains your content layer, and its live preview stays useful for editing entries. Laioutr adds the frontend with a server-verified, uncached preview mode and Studio for composing the pages around that content.
Next steps
Want to see how Contentful content looks in a real storefront with Studio? Book a demo and bring one of your content types. We will walk through preview URLs, locales and caching with your setup in mind.