---
title: "Contentful Live Preview: What Your Frontend Must Deliver"
canonical_url: "https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026"
locale: en
meta:
description: "Contentful Live Preview from the frontend side: Preview API, inspector mode, live updates, uncached SSR, noindex, locales and the pitfalls worth planning for."
"og:description": "Contentful Live Preview from the frontend side: Preview API, inspector mode, live updates, uncached SSR, noindex, locales and the pitfalls worth planning for."
"og:title": "Contentful Live Preview: What Your Frontend Must Deliver"
---
# Contentful Live Preview: What Your Frontend Has to Deliver
Table of contents
1. [1.What Contentful Live Preview consists of](#what-contentful-live-preview-consists-of)
2. [2.What your frontend has to deliver](#what-your-frontend-has-to-deliver)
3. [3.Common pitfalls](#common-pitfalls)
4. [4.How Laioutr fits in](#how-laioutr-fits-in)
5. [5.A checklist for your preview setup](#a-checklist-for-your-preview-setup)
6. [6.FAQ](#faq)
7. [7.Next steps](#next-steps)
1. [1.What Contentful Live Preview consists of](#what-contentful-live-preview-consists-of)
2. [2.What your frontend has to deliver](#what-your-frontend-has-to-deliver)
3. [3.Common pitfalls](#common-pitfalls)
4. [4.How Laioutr fits in](#how-laioutr-fits-in)
5. [5.A checklist for your preview setup](#a-checklist-for-your-preview-setup)
6. [6.FAQ](#faq)
7. [7.Next steps](#next-steps)
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](https://www.laioutr.com/en/blog/contentful-integration-frontend-best-practices-2026) cover the groundwork.
1. **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.
2. **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.
3. **Keep preview pages out of search.** Every preview URL needs noindex, nofollow, regardless of the page's normal SEO settings.
4. **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.
5. **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.
6. **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](https://www.laioutr.com/en/blog/contentful-visual-editing-frontend).
## A checklist for your preview setup
1. Define a preview URL for each content type that renders as its own page.
2. Store the preview token server side and document who has access.
3. Disable all caches for preview responses, including framework route rules.
4. Enforce noindex, nofollow on every preview URL.
5. Test drafts with unpublished references before go-live.
6. Decide which elements get inspector tags and keep layout fields out of the content model.
7. 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](https://www.laioutr.com/en/contact) and bring one of your content types. We will walk through preview URLs, locales and caching with your setup in mind.
### More from the Laioutr Platform
- [Visual frontend for your Contentful](https://www.laioutr.com/en/page-builder-contentful)
- [Composable Visual Page Builder](https://www.laioutr.com/en/composable-visual-page-builder)
- [Content management with Laioutr](https://www.laioutr.com/en/product/content-management)
- [Headless CMS capabilities in Laioutr](https://www.laioutr.com/en/headless-cms)
---
Share this article
[Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcontentful-live-preview-frontend-perspective-2026) [Share on X](https://x.com/intent/post?url=https%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcontentful-live-preview-frontend-perspective-2026&text=) [Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcontentful-live-preview-frontend-perspective-2026) [Share on Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcontentful-live-preview-frontend-perspective-2026&description=) [Share via email](mailto:?subject=&body=%0A%0Ahttps%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcontentful-live-preview-frontend-perspective-2026)
## More interesting articles
Practical know-how for frontend development, smart agents, and headless
[To the blog](https://www.laioutr.com/en/blogs)
[iPhone Duo and Ecommerce: What Merchants Need to Know Now
iPhone Duo goes on sale on October 23, 2026. Online stores don't need a dedicated app or a custo…](https://www.laioutr.com/en/blog/iphone-duo-ecommerce-foldable-storefront)
[Structured Product Data: How It Shows Up in Your Storefront
Structured product data means every product fact lives in a typed attribute with a unit, a stable id…](https://www.laioutr.com/en/blog/structured-product-data-pim-frontend-2026)
[44% Decide via Trial or PoC: How to Run a Storefront PoC in DACH
In DACH, software decisions are increasingly made hands-on: in the study "Software Buying in DA…](https://www.laioutr.com/en/blog/storefront-proof-of-concept-dach-buyers-2026)
[Frontend Management Platform Comparison: How to Choose the Right FMP
Choosing a frontend management platform (FMP) is less about feature lists and more about where your …](https://www.laioutr.com/en/blog/frontend-management-platform-comparison-how-to-choose-2026)
[DAM, PIM, and CMS Are Converging: What It Means for Your Storefront
DAM, PIM, and CMS vendors are moving into each other's territory, and more teams now evaluate on…](https://www.laioutr.com/en/blog/dam-pim-cms-convergence-content-hub-storefront-2026)
[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 ap…](https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026)
[Content Governance at Scale: Product Content and Brand Assets
Content governance at scale means that roles, approvals, brand rules, asset rights and translations …](https://www.laioutr.com/en/blog/content-governance-product-content-brand-assets-frontend-2026)
[AI Agents as Frontend Operators: Architecture and Control Model
An AI agent becomes a frontend operator when it watches the running storefront, spots concrete issue…](https://www.laioutr.com/en/blog/ai-agents-as-frontend-operators-2026)
[Shopping Agents Read Your Feed: What Agentic Commerce Changes
Agentic commerce adds a new reader to your product data: shopping agents in ChatGPT, Google AI Mode,…](https://www.laioutr.com/en/blog/shopping-agents-product-feeds-agentic-data-distribution-2026)
[Server-Side Tracking in E-Commerce: Making Measurement Complete Again
Server-side tracking moves the forwarding of analytics and conversion events from the visitor's …](https://www.laioutr.com/en/blog/server-side-tracking-ecommerce-complete-measurement-2026)
[Product Image Deep Links, Not ZIP Files: Assets That Stay Current
If you still send product images to retailers, marketplaces and press as ZIP files, every package st…](https://www.laioutr.com/en/blog/product-image-deeplinks-asset-distribution-2026)
[PrestaShop 8 to 9 Upgrade Without Replatforming: Decouple the Frontend
You can take most of the risk out of the PrestaShop 8 to 9 upgrade by moving the storefront off the …](https://www.laioutr.com/en/blog/prestashop-8-to-9-upgrade-without-replatforming-2026)
[Order Management With an OMS Like fulfillmenttools: The Frontend View
An efficient order management system decides which location fulfills an order, how much stock is rea…](https://www.laioutr.com/en/blog/order-management-fulfillmenttools-oms-frontend-2026)
[No Replatforming Budget in 2026? Why the Frontend Gets Approved
If your 2026 budget has no room for a replatforming project, you are not alone, and you do not have …](https://www.laioutr.com/en/blog/no-replatforming-budget-frontend-project-approval-2026)
[Garden Retail Order Management: What Your Storefront Must Show
In garden and DIY retail, one cart can hold a parcel item, a patio set that ships by freight, live p…](https://www.laioutr.com/en/blog/garden-retail-order-management-seasonal-frontend-2026)
[](https://www.laioutr.com/en/apps/shopify)
Laioutr
[Shopify](https://www.laioutr.com/en/apps/shopify)
Shopify is a commerce platform for selling online and in physical retail.
[](https://www.laioutr.com/en/apps/shopware)
Laioutr
[Shopware](https://www.laioutr.com/en/apps/shopware)
Shopware is a flexible ecommerce platform from Europe for product catalogs and omnichannel commerce.
[](https://www.laioutr.com/en/apps/adobe-commerce)
Laioutr
[Adobe Commerce](https://www.laioutr.com/en/apps/adobe-commerce)
Adobe Commerce is an enterprise commerce platform for complex, global B2C and B2B scenarios.
Planned
[](https://www.laioutr.com/en/apps/b2b-sellers)
Laioutr
[B2Bsellers](https://www.laioutr.com/en/apps/b2b-sellers)
B2B suite for Shopware that turns an online store into a professional B2B commerce platform.
Planned
[](https://www.laioutr.com/en/apps/commerce-layer)
Laioutr
[Commerce Layer](https://www.laioutr.com/en/apps/commerce-layer)
Commerce Layer is a headless commerce platform for making inventory and catalogs available online.
[](https://www.laioutr.com/en/apps/commercetools)
Laioutr
[Commercetools](https://www.laioutr.com/en/apps/commercetools)
Commercetools is a SaaS-based headless ecommerce platform used worldwide.
[](https://www.laioutr.com/en/apps/emporix)
Laioutr
[Emporix](https://www.laioutr.com/en/apps/emporix)
Emporix is a composable, API-first commerce platform for scalable B2B and B2C scenarios.
Planned
[](https://www.laioutr.com/en/apps/hcl-software)
Laioutr
[HCL Software](https://www.laioutr.com/en/apps/hcl-software)
Enterprise suite for digital commerce and experience with extensive configurability.
Planned
[](https://www.laioutr.com/en/apps/intershop)
Laioutr
[Intershop](https://www.laioutr.com/en/apps/intershop)
Enterprise commerce platform for complex B2B and B2C business models.
Planned
[](https://www.laioutr.com/en/apps/magento-2)
Laioutr
[Magento 2](https://www.laioutr.com/en/apps/magento-2)
Widely used, extensible commerce platform for B2C and B2B scenarios.
[](https://www.laioutr.com/en/apps/oxid-eshop)
Laioutr
[OXID eShop](https://www.laioutr.com/en/apps/oxid-eshop)
OXID eShop is an extensible commerce platform for complex B2B and B2C requirements.
Planned
[](https://www.laioutr.com/en/apps/patchworks)
Laioutr
[Patchworks](https://www.laioutr.com/en/apps/patchworks)
Patchworks is a low-code iPaaS that connects ecommerce, ERP, WMS, 3PL, and marketplaces.
Planned
[](https://www.laioutr.com/en/apps/PrestaShop)
Laioutr
[Prestashop](https://www.laioutr.com/en/apps/PrestaShop)
Open-source commerce platform for small and midsize merchants in Europe and beyond.
Planned
[](https://www.laioutr.com/en/apps/saleor)
Laioutr
[Saleor](https://www.laioutr.com/en/apps/saleor)
Open-source, API-first commerce platform built on GraphQL for custom storefronts.
Planned
[](https://www.laioutr.com/en/apps/salesforce-commerce-cloud)
Laioutr
[Salesforce Commerce Cloud](https://www.laioutr.com/en/apps/salesforce-commerce-cloud)
Salesforce Commerce Cloud is a cloud-based enterprise commerce platform for businesses of any size.
Planned
[](https://www.laioutr.com/en/apps/sap-commerce-cloud)
Laioutr
[SAP Commerce Cloud](https://www.laioutr.com/en/apps/sap-commerce-cloud)
Enterprise commerce platform for complex catalogs, pricing models, and omnichannel journeys.
Planned
[](https://www.laioutr.com/en/apps/scayle)
Laioutr
[Scayle](https://www.laioutr.com/en/apps/scayle)
SCAYLE is a commerce engine that helps brands and retailers scale their business.
Planned
[](https://www.laioutr.com/en/apps/spryker)
Laioutr
[Spryker](https://www.laioutr.com/en/apps/spryker)
Composable commerce platform for sophisticated B2B and B2C business models.
[](https://www.laioutr.com/en/apps/sylius)
Laioutr
[Sylius](https://www.laioutr.com/en/apps/sylius)
Sylius is a developer-friendly ecommerce framework for B2C and B2B shopping experiences.
Planned
[](https://www.laioutr.com/en/apps/vendure)
Laioutr
[Vendure](https://www.laioutr.com/en/apps/vendure)
Vendure is a headless commerce platform for businesses with complex requirements.
Coming Soon
[](https://www.laioutr.com/en/apps/vtex)
Laioutr
[VTEX](https://www.laioutr.com/en/apps/vtex)
Cloud-native, composable commerce platform for B2B and B2C at scale.
Planned
[](https://www.laioutr.com/en/apps/websale)
Laioutr
[Websale](https://www.laioutr.com/en/apps/websale)
Stable, enterprise-ready commerce backend for complex retail environments.
Strategy call
## Ready to turn your frontend into a control layer?
Show us your stack, your roadmap, your replatforming scenario, and we'll show you how Laioutr fits, what it costs, and how fast you go live.
*"After 30 minutes, we knew Laioutr makes our replatforming feasible." - Daniel B., CEO,* [*hygibox.de*](https://hygibox.de)
[Book a demo](https://www.laioutr.com/en/contact)
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://www.laioutr.com/#identity",
"name": "Laioutr",
"legalName": "Laioutr GmbH",
"url": "https://www.laioutr.com/",
"logo": {
"@type": "ImageObject",
"url": "https://www.laioutr.com/laioutr-logo.png",
"width": 400,
"height": 400
},
"email": "info@laioutr.com",
"telephone": "+49 30 75435715",
"address": {
"@type": "PostalAddress",
"streetAddress": "Münchweilersteig 5",
"postalCode": "12559",
"addressLocality": "Berlin",
"addressCountry": "DE"
},
"vatID": "DE450905846",
"sameAs": [
"https://www.linkedin.com/company/laioutr",
"https://www.youtube.com/@Laioutr",
"https://x.com/laioutr"
]
},
{
"@type": "WebSite",
"@id": "https://www.laioutr.com/en/#website",
"url": "https://www.laioutr.com/en/",
"name": "Laioutr",
"inLanguage": "en",
"publisher": {
"@id": "https://www.laioutr.com/#identity"
}
},
{
"@type": "BlogPosting",
"@id": "https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026#article",
"headline": "Contentful Live Preview: What Your Frontend Has to Deliver",
"description": "Contentful Live Preview from the frontend side: Preview API, inspector mode, live updates, uncached SSR, noindex, locales and the pitfalls worth planning for.",
"image": [
"https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/cmu3ywn6m4c6x06mhvq55pmgd"
],
"datePublished": "2026-09-16T10:39:29.628355+00:00",
"dateModified": "2026-09-16T10:39:24.61889+00:00",
"inLanguage": "en",
"articleSection": "Insights",
"keywords": "Headless CMS, Visual Editing, Frontend Engineering, Content modeling",
"author": {
"@id": "https://www.laioutr.com/#identity"
},
"publisher": {
"@id": "https://www.laioutr.com/#identity"
},
"mainEntityOfPage": {
"@id": "https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026#webpage"
},
"isPartOf": {
"@id": "https://www.laioutr.com/en/#website"
}
},
{
"@type": "WebPage",
"@id": "https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026#webpage",
"url": "https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026",
"name": "Contentful Live Preview: What Your Frontend Has to Deliver",
"description": "Contentful Live Preview from the frontend side: Preview API, inspector mode, live updates, uncached SSR, noindex, locales and the pitfalls worth planning for.",
"inLanguage": "en",
"isPartOf": {
"@id": "https://www.laioutr.com/en/#website"
},
"breadcrumb": {
"@id": "https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026#breadcrumb"
},
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/cmu3ywn6m4c6x06mhvq55pmgd"
},
"datePublished": "2026-09-16T10:39:29.628355+00:00",
"dateModified": "2026-09-16T10:39:24.61889+00:00",
"mainEntity": {
"@id": "https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026#article"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Laioutr",
"item": "https://www.laioutr.com/en/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Insights",
"item": "https://www.laioutr.com/en/blogs/insights"
},
{
"@type": "ListItem",
"position": 3,
"name": "Contentful Live Preview: What Your Frontend Has to Deliver"
}
]
}
]
}
```