Preview
Preview mode lets you see your project exactly as your visitors will -- with working interactions, animations, responsive layouts, and CMS content -- without leaving the Flowmo Designer. You can test across device sizes, switch between pages, zoom in on details, and share a live preview link with collaborators.
Prerequisites
A project open in the Flowmo Designer with at least one page
Familiarity with the top bar controls
Entering Preview Mode
There are several ways to launch a preview:
Method | How |
|---|---|
Keyboard shortcut | Press Cmd + Enter (Mac) or Ctrl + Enter (Windows) |
Play button | Click the Play button in the top-right area of the top bar |
Preview menu | Click the dropdown arrow next to the Play button to choose a specific preview mode |
Preview Modes
The dropdown next to the Play button offers three options:
Full Screen -- replaces the entire Designer canvas with a full-screen preview. This is the default when you press the Play button or use the keyboard shortcut.
Floating Window -- opens the preview in a resizable, draggable overlay on top of your canvas. Useful when you want to edit and preview side by side.
Share Preview Link -- copies a shareable URL to your clipboard so others can view your project in their browser (they need to be signed in to Flowmo).
Preview Controls
Once you enter preview mode, a top bar appears with the following controls:
Device Presets
Quickly resize the preview viewport to common screen sizes:
Button | Resolution |
|---|---|
Mobile (phone icon) | 390 x 844 px |
Tablet (tablet icon) | 820 x 1180 px |
Desktop (laptop icon) | Full browser width x height |
Custom Size
In full-screen preview mode, you can type exact Width and Height values in the input fields next to the device buttons. This is helpful for testing specific breakpoints or unusual screen sizes.
Zoom
Click the Zoom button (shows the current percentage, e.g., "Zoom 100%") to open a popover with:
A slider to adjust zoom from 10% to 300%.
A Reset to 100% button to snap back to actual size.
A Fit to Screen button to automatically scale the preview so it fits entirely within your browser window.
Page Switcher
Use the page dropdown to navigate between different pages in your project. The dropdown lists every page by name and highlights the currently active one.
CMS Entry Selector
If the current page is bound to a CMS collection, an additional dropdown appears showing the available CMS entries. Select an entry to preview how the page looks with that specific content populated.
Refresh
Click the Refresh button (circular arrow icon) to regenerate the preview. This is useful after making edits in floating or live mode.
Live Edit Mode
Click the Live button (lightning bolt icon) to toggle Live Edit mode. In this mode, you can click elements in the preview to select them and make CSS changes that are reflected in real time. This is particularly useful for fine-tuning spacing, colors, and typography while seeing the full rendered output.
Sharing a Preview Link
Click the dropdown arrow next to the Play button in the top bar.
Select Share Preview Link.
A toast notification confirms the link has been copied to your clipboard.
Share the URL with your team. The link opens the project in a standalone preview page at
/preview.
The shared preview link includes your project ID and current space. If you have an element selected, it also includes the object ID so the recipient sees the same context.
Tip: Preview links require the recipient to be signed in to Flowmo. They are not public URLs -- use the Publish flow to create a live public site.
Exiting Preview Mode
Method | How |
|---|---|
Close button | Click the X button in the top-right corner of the preview top bar |
Keyboard | Press Escape |
In floating window mode, you can also close the preview by clicking the X on the floating panel.
Tips
Use Cmd + Enter for quick checks. It's the fastest way to jump in and out of preview mode while designing.
Test all breakpoints. Click through Mobile, Tablet, and Desktop presets to catch responsive layout issues early.
Use floating preview while iterating. The floating window lets you tweak your design on the canvas while seeing the rendered result simultaneously.
Check interactions and animations. Preview mode runs your interactions (hover effects, click triggers, scroll animations) exactly as they will work on the published site.
Preview CMS-bound pages with real data. Use the CMS entry selector to see how your template page looks with different content entries.
Common Issues
Problem | Solution |
|---|---|
Preview shows a blank page | Make sure your project has at least one page with visible content. Check the Pages and Sections guide. |
Interactions don't play | Some interactions require user input (hover, click). Try interacting with the elements in the preview. Scroll-based animations require scrolling. |
Fonts look different in preview | Preview renders the page as HTML/CSS. If a font hasn't finished loading, refresh the preview. |
Preview link doesn't work for a colleague | The recipient must be signed in to Flowmo. Preview links are not public. |
Custom size fields are not visible | The width and height input fields are hidden on smaller screens. Expand your browser window or use the device preset buttons instead. |
Related Articles
Keyboard Shortcuts -- see the full list of shortcuts including preview