Live Preview
Add live preview to your editorial workflow — see content changes on your frontend before publishing, without leaving the Flotiq UI.
What this plugin does
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.
Reduce manual steps for editors
No saving drafts, opening new tabs, or waiting for deploys to check how content looks.
Preview your actual frontend
Preview renders inside your real application, not a Flotiq-hosted simulation.
Mobile and desktop viewports
Switch between mobile and desktop viewports in one click, inside the editor panel.
Install in Flotiq
Follow these steps to get the plugin running in your Flotiq account.
Go to Plugins in the Flotiq sidebar
Select Plugins from the left sidebar in your Flotiq dashboard.
Enable the Live Preview plugin
Click the + icon next to Live Preview Plugin to install and enable it. The UI will reload.
Open plugin settings
Click Manage to open the configuration modal.
Configure base URL and keys
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).
Add a links configuration
Click Add item under Links configuration. Select the Content types to enable preview for and set the Page route template (e.g. blog/{slug}).
Integrate your frontend
Install @flotiq/nextjs-live-preview in your Next.js project and follow the setup guide to handle live streaming events.
Start previewing
Open a content object and click Preview in the right sidebar — the live panel opens next to the editor.
Your content. Your rules.
Deliver modern digital experiences across multiple channels.
Start free trialNeed Help? Start Here
Discord
Connect with other users and the Flotiq team - get help, share ideas, stay updated.
Join Discord
