Add live preview to your editorial workflow — see content changes on your frontend before publishing, without leaving the Flotiq UI.
The Live Preview plugin adds a real-time preview panel directly into the Flotiq content editor. As editors make changes to content fields, the preview updates instantly — no save required, no tab switching. It works by streaming content change events to your frontend's preview API endpoint, so your actual application renders the changes live as they happen. The plugin is compatible with any Next.js, Nuxt, or Gatsby project that implements a preview route. Flotiq provides a dedicated @flotiq/nextjs-live-preview package that handles the WebSocket connection and event handling, making integration straightforward for Next.js projects. Other frameworks can implement the same event protocol manually. From the editor sidebar, you can open the live preview panel, switch between mobile and desktop viewports, open the preview in a new tab, or close it — all without leaving the content editing form. The preview reflects changes in real time, reducing the publish-preview cycle from minutes to seconds and significantly speeding up editorial workflows.
No saving drafts, opening new tabs, or waiting for deploys to check how content looks.
Preview renders inside your real application, not a Flotiq-hosted simulation.
Switch between mobile and desktop viewports in one click, inside the editor panel.
Follow these steps to get the plugin running in your Flotiq account.
Select Plugins from the left sidebar in your Flotiq dashboard.
Click the + icon next to Live Preview Plugin to install and enable it. The UI will reload.
Click Manage to open the configuration modal.
Set Page base URL (e.g. https://flotiq.com/), your Client Authorisation Key (for draft access and cache revalidation), and your API key (read-only scoped Flotiq API key for the WebSocket connection).
Deliver modern digital experiences across multiple channels.
Start free trial
Connect with other users and the Flotiq team - get help, share ideas, stay updated.
Join Discord
Click Add item under Links configuration. Select the Content types to enable preview for and set the Page route template (e.g. blog/{slug}).
Install @flotiq/nextjs-live-preview in your Next.js project and follow the setup guide to handle live streaming events.
Open a content object and click Preview in the right sidebar — the live panel opens next to the editor.
