How Live Preview Works with SDK

Contentstack’s Live Preview SDK enables real-time content updates while editing, allowing content creators to see changes instantly without publishing. It acts as a bridge between the entry editor and your website, ensuring a seamless and interactive preview experience.

How the Live Preview SDK Works

The Live Preview SDK connects your website to the entry editor, enabling real-time updates. Here’s how it works:

1. When you open an entry, the platform generates a Live Preview Hash (Session ID). This hash uniquely identifies the session and keeps track of content updates.
2. Your website, which includes the Live Preview SDK, loads inside an iframe in the entry editor.
3. The SDK establishes a secure connection between the entry editor and the website using postMessage() events.
4. The SDK fetches the latest content and automatically updates the preview panel, without requiring a page reload.

This real-time content rendering makes it easier for content teams to see changes instantly and make informed updates before publishing.

Understanding the Live Preview Hash

The Live Preview Hash is a crucial component of the Live Preview feature.

• It uniquely identifies each preview session.
• Fetches and displays the latest content updates dynamically.
• It tracks version changes with every edit and prevents outdated previews.
• The Live Preview Hash updates content automatically, eliminating the need to refresh or re-fetch data.

How Live Preview Renders Content

Whether your website is built using Client-Side Rendering (CSR) or Server-Side Rendering (SSR), the Live Preview SDK ensures a smooth and reliable preview experience.

For Server-Side Rendering (SSR)

• The SDK listens for content updates and triggers a preview refresh.
• Since SSR websites generate pages on the server before sending them to the browser, a page reload is required to reflect the changes.
• This approach is best for frameworks like Next.js, Nuxt.js, and traditional backend-driven applications.

For Client-Side Rendering (CSR):

• The SDK instantly updates the content without reloading the page.
• CSR websites dynamically fetch and render content in the browser, allowing the SDK to directly inject updated content into the preview panel.
• This approach works best for React, Vue.js, Angular, and other SPA frameworks.

Regardless of the rendering approach, the SDK ensures accurate previews that match what the end user will see post-publishing.

Event-based Communication in Live Preview

The Live Preview SDK uses an event-driven communication system between the Contentstack editor and your website. These events ensure that the preview remains up-to-date without requiring manual refreshes.

Key Events Used in Live Preview

1. init-ack: The Contentstack editor sends this event when the preview session starts, confirming that the Live Preview SDK is active.
2. client-data-send: When content is edited, this event triggers an update, ensuring that the SDK fetches the latest content.

By leveraging event-based communication, the Live Preview SDK keeps content previews in sync with the editing session, ensuring a real-time, uninterrupted experience.