# Live Preview with Custom Middleware

### About this export

| Field | Value |
| --- | --- |
| **content_type** | standalone_content |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/content/live-preview-with-custom-middleware |
| **slug** | live-preview-with-custom-middleware |
| **title** | Live Preview with Custom Middleware |
| **markdown_file_url** | /academy/md/content/live-preview-with-custom-middleware.md |
| **generated_at** | 2026-08-17T13:10:43.901Z |

> **Academy MD v3** — standalone Academy content entry (not a multi-lesson course export).

## Overview

### Description

This guide explains how to implement Contentstack's Live Preview functionality when your architecture includes a middleware layer between the CMS and your website or front end.

## Understanding Live Preview with Middleware

Contentstack's Live Preview allows content editors to see changes in real-time. When you use middleware, you need to make specific adjustments to ensure the live preview works correctly.

## Requirements

*   Contentstack account
*   Middleware layer integrated between Contentstack and your website
*   Basic understanding of server-side rendering (SSR)

## Steps for Implementation

### Step 1: Configure Your Middleware

Your middleware should be able to handle requests differently depending on whether it's a Live Preview or a standard request.

### Step 2: Initialize Live Preview in Your Front-end

Use the Contentstack Live Preview utilities with SSR enabled:

import ContentstackLivePreview from '@contentstack/live-preview-utils';  
ContentstackLivePreview.init({  
	ssr: true,  
	enable: true,  
	mode: "builder",  
	stackDetails: {  
		apiKey: YOUR\_API\_KEY,  
		environment: YOUR\_ENVIRONMENT,  
		branch: YOUR\_BRANCH  
	}  
});

### Step 3: Capture Live Preview URL Parameters

When in Live Preview mode, Contentstack sends the following parameters via URL:

*   live\_preview
*   entry\_uid
*   content\_type\_uid

Use your front-end framework (e.g., Next.js 15) to capture these parameters from the request.

### Example with Next.js

export default async function Page({ searchParams }) {  
	const { live\_preview, entry\_uid, content\_type\_uid } = searchParams;  
	const content = await fetchMiddlewareContent({ live\_preview, entry\_uid, content\_type\_uid });  
	return <YourComponent content={content} />;  
}

### Step 4: Adjust Middleware API Calls

If a Live Preview hash is present (live\_preview), make requests to Contentstack's draft API endpoint instead of the CDN endpoint.

*   **Draft API URL:** Replace the CDN URL with the draft endpoint.
*   **Headers:** Include your preview token and the live preview hash.

### Middleware Example

const headers = {  
	api\_key: 'your-stack-api-key',  
	access\_token: 'your-preview-token',  
	live\_preview: livePreviewHash  
};  
  
const url = livePreviewHash ? 'https://<your-region>-api.contentstack.io/v3/content\_types/<content\_type\_uid>/entries/<entry\_uid>' : 'https://cdn.contentstack.io/v3/content\_types/<content\_type\_uid>/entries/<entry\_uid>';  
  
fetch(url, { headers }).then(response => response.json());  

## Key Considerations

*   Always distinguish between Live Preview and regular requests in your middleware.
*   Ensure proper header management to securely interact with draft and CDN endpoints.

## Benefits

*   Real-time content updates directly within a visual editing environment.
*   Enhanced content management flexibility when using middleware layers.

## Additional Resources

*   [Contentstack Documentation](https://www.contentstack.com/docs/developers/set-up-live-preview)
*   [Contentstack Discord Community](https://www.contentstack.com:443/community)

## Supplement for indexing

### Content summary

This guide explains how to implement Contentstack's Live Preview functionality when your architecture includes a middleware layer between the CMS and your website or front end. Understanding Live Preview with Middleware Contentstack's Live Preview allows content editors to see changes in real-time. When you use middleware, you need to make specific adjustments to ensure the live preview works correctly. Requirements Contentstack account Middleware layer integrated between Contentstack and your website Basic understanding of server-side rendering (SSR) Steps for Implementation Step 1: Configure Your Middleware Your middleware should be able to handle requests differently depending on whether it's a Live Preview or a standard request. Step 2: Initialize Live Preview in Your Front-end Use the Contentstack Live Preview utilities with SSR enabled: import ContentstackLivePreview from '@content

### Retrieval tags

- Contentstack Academy
- live-preview-with-custom-middleware
- standalone content

### Indexing notes

Single-page standalone entry; index as one primary chunk. Slug: live-preview-with-custom-middleware.

### Asset references

_No image or video thumbnail URLs were extracted._

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| Contentstack Documentation | `https://www.contentstack.com/docs/developers/set-up-live-preview` |
| Contentstack Discord Community | `https://www.contentstack.com:443/community` |