Live Preview
[Live]
See exactly what your visitors will see, before you publish.
The live preview panel shows your landing page in real time as you build and edit it. Every change you make in the chat editor updates the preview instantly, so you're never guessing what the final result looks like.
How it works
The preview panel sits alongside the chat editor in the Build interface. As you generate your initial page or make edits through the chat, the preview updates in real time — no refresh needed, no delay. What you see in the preview is what gets published.
The preview renders your page with full styling, responsive behavior, and working interactions. Links, hover states, scroll effects, and form fields all behave as they will on the published page.
Desktop and mobile preview
Switch between preview modes to see how your page adapts to different screen sizes:
- Desktop preview — full-width view showing the page as it appears on laptop and desktop screens
- Mobile preview — narrow view simulating a phone screen, including the hamburger navigation menu
Every page built in HolyShift is mobile-responsive by default. The preset handles the responsive behavior — columns stack, font sizes adjust, navigation collapses into a hamburger menu, and spacing tightens for smaller screens. The mobile preview lets you verify that everything looks right before you publish.
What to check in preview
Before publishing, review your page for:
- Readability — is the text legible against the background? Are font sizes comfortable?
- Flow — does the page tell a coherent story from top to bottom? Does each section lead naturally to the next?
- CTA visibility — are your call-to-action buttons prominent and easy to find? Can visitors reach a CTA without excessive scrolling?
- Mobile layout — do sections stack correctly? Is text still readable on small screens? Does the hamburger menu work?
- Form fields — are lead capture forms visible and functional? Are field labels clear?
- Spacing — is there enough breathing room between sections? Does anything feel cramped or too sparse?
Preview during editing
As you make changes through the chat editor, watch the preview to confirm the AI interpreted your request correctly:
- If you say "make the hero background darker," you'll see the color change in the preview immediately
- If you say "add a testimonial section," you'll see it appear in the preview in its correct position
- If something doesn't look right, you can immediately tell the AI to adjust or undo
This tight feedback loop between chat and preview is what makes the builder fast. You don't need to publish, check, come back, edit, and republish. You iterate live.
FAQ
Does the preview show the exact published version?
Yes. The preview renders the same HTML, CSS, and content that gets deployed when you publish. There are no differences between preview and production.
Can I share the preview with someone before publishing?
Not currently. To get feedback from others, you'll need to publish the page and share the live URL. Preview sharing is on the roadmap.
Can I preview on an actual mobile device?
The mobile preview mode simulates a mobile viewport in your browser. For testing on an actual device, publish the page and open the URL on your phone. Since publishing is instant and free, this is a quick workflow.
What's next
- Chat editing — make changes and see them in the preview
- Publishing — go live when you're satisfied with the preview
- Version history — revert to previous versions (coming soon)