Get Started with Python SDK and Live Preview

This guide explains how to integrate Live Preview with the Python SDK using Flask. Live Preview enables real-time content updates before publishing, helping developers and editors preview changes instantly.

Pre-requisites

Contentstack account
Python version 3
A flask environment setup

Installation and Setup

To use the Contentstack Python SDK with your existing project, perform the following steps:

Open the terminal, create a project, and move inside it as follows:
```
mkdir project_name

cd project_name
```
Create a virtual environment:
```
python3 -m venv venv
```
Activate the virtual environment:
For macOS/Linux:
```
source venv/bin/activate
```
For Windows:
```
venv\Scripts\activate
```
Install pip Contentstack as follows:
```
pip install contentstack flask
```

You can download the latest dependency version here.

Initializing the Stack with Live Preview

Since the Live Preview Utils SDK is responsible for communication, you need to initialize it within your stack.

Use the following command to initialize the stack:

import contentstack

stack = contentstack.Stack(

    api_key='your_api_key',

    delivery_token='your_delivery_token',

    environment='your_environment',

    live_preview={

        'enable': True,

        'host': 'rest-preview.contentstack.com',

        'preview_token': 'your_preview_token'

    }

)

Note: By default, the host parameter points to the North America endpoint. If your website is hosted on the European data center, then pass the European endpoint against the host parameter.

Live Preview Query Setup

The live_preview_query() method ensures that the SDK fetches draft (unpublished) content updates in real time.

stack.live_preview_query(live_preview_query={

    'live_preview': 'your_live_preview_key',

    'content_type_uid': 'your_content_type_uid',

    'entry_uid': 'your_entry_uid'

})

Parameters:

Parameter	Description
live_preview	Unique token for live preview session
content_type_uid	UID of the content type to fetch data from
entry_uid	UID of the entry being previewed

Create an Interceptor using Flask

Now, let’s create a Flask app to display the fetched entry details dynamically.

Create a File app.py

from flask import Flask, render_template

import contentstack

import logging

app = Flask(__name__)

logging.basicConfig(level=logging.DEBUG)

stack = contentstack.Stack(

    api_key='your_api_key',

    delivery_token='your_delivery_token',

    environment='your_environment',

    live_preview={

        'enable': True,

        'host': 'rest-preview.contentstack.com',

        'preview_token': 'your_preview_token'

    }

)

@app.route('/')

def fetch_data():

    logging.debug("Fetching Live Preview Data...")

    stack.live_preview_query(live_preview_query={

        'live_preview': 'your_live_preview_key',

        'content_type_uid': 'your_content_type_uid',

        'entry_uid': 'your_entry_uid'

    })

    query = stack.content_type("your_content_type_uid").entry('your_entry_uid')

    response = query.fetch()

    logging.debug("API Response: %s", response)

    if isinstance(response, list) and len(response) > 0:

        entry = response[0]

        title = entry.get('title', 'No Title')

        pdf_url = entry.get('file', {}).get('url', '')

        return render_template('index.html', title=title, pdf_url=pdf_url)

    else:

        return f"Unexpected response format: {response}", 500

if __name__ == '__main__':

    app.run(debug=True, port=5000)

Create a Template File templates/indec.html

<!DOCTYPE html>

<html>

<head>

    <title>{{ title }}</title>

</head>

<body>

    <h1>{{ title }}</h1>

    {% if pdf_url %}

        <iframe src="{{ pdf_url }}" width="800" height="600"></iframe>

        <br>

        <a href="{{ pdf_url }}" target="_blank">Download PDF</a>

    {% else %}

        <p>No PDF available.</p>

    {% endif %}

</body>

</html>

Testing the Live Preview Integration
Run the following code and start the Flask server:
```
python app.py
```
Open a browser and go to http://localhost:5000.Modify the entry in Contentstack and observe real-time changes.

For Server-side Rendered Websites

To install and initialize the Live Preview Utils SDK, you can refer to our SSR Live Preview Setup documentation.

Query Request

Contentstack SDKs let you interact with the Content Delivery APIs and retrieve content from Contentstack. They are read-only in nature. The SDKs fetch and deliver content from the nearest server via Fastly, our powerful and robust CDN.

To get an entry, you need to specify the content type UID and the UID of the entry.

entry = stack.content_type("content_type_uid").entry();

result = entry.fetch()

Timeline Preview

The Timeline Preview feature in the Python Delivery SDK allows you to preview different versions of an entry based on specific timestamps or scheduled releases—making it easier to test future or past content states.

For more information, refer to our Timeline Preview documentation