Live Preview
The Lygotype builder includes a live preview that reflects every change you make — no save button required.
How to open preview
Click Preview in the builder top bar. The preview opens in the right panel (or full-screen, depending on your layout).
Device breakpoints
The preview has three device modes:
| Mode | Width | Use for | |---|---|---| | Desktop | Full width | Default layout | | Tablet | 768px | Mid-size screens | | Mobile | 375px | Small phones |
Toggle between them using the device icons at the top of the preview panel.
What updates in real time
Everything. As you make changes in the builder, the preview updates instantly:
- Theme changes — Colour, font, pattern, card style, animations all reflect immediately
- Question order — Drag to reorder; the preview follows
- Conditional logic — Visibility rules apply in the preview so you can test flows without submitting
- Question settings — Required toggles, labels, descriptions, choice options
- Page navigation — Use the Next/Back buttons in the preview to step through pages
Testing logic in preview
The preview evaluates visibleIf rules just like the live form. To test a conditional path:
1. Open the preview 2. Answer the trigger question with the value that activates the rule 3. The dependent question or page appears/hides as configured
Payment fields in preview
Payment questions show a placeholder in preview mode — Stripe is not charged. To test a real payment flow end-to-end, publish the form and use your Stripe test keys with a test card number.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| D | Switch to Desktop preview |
| T | Switch to Tablet preview |
| M | Switch to Mobile preview |
| Esc | Close full-screen preview |