Skip to main contentDesign Tab: Preview Mode
Preview mode shows your website exactly as visitors will see it, without any editing UI.
Activating Preview Mode
Click the Preview tab in the mode switcher.
Features
Clean Preview
- No editing overlays
- No selection highlights
- No AI indicators
- Pure visitor experience
Test Interactions
- Click buttons and links
- Test navigation
- Check hover effects
- Verify animations
Responsive Testing
- Switch device sizes
- Test mobile layout
- Check tablet view
- Verify breakpoints
When to Use Preview Mode
- Final review - Before publishing
- Testing - Check functionality
- Client preview - Show without editing UI
- Responsive check - Test all devices
Device Preview
Use the device buttons in the toolbar:
| Device | Width |
|---|
| Desktop | 100% |
| Tablet | 768px |
| Mobile | 375px |
What to Check
Visual
- Layout alignment
- Image display
- Typography
- Colors and contrast
Functionality
- Button clicks
- Link navigation
- Form interactions
- Animations
Responsive
- Mobile menu
- Image scaling
- Text readability
- Touch targets
Opening in New Tab
For full browser preview:
- Click Open in new tab button
- View at actual URL
- Test in real browser environment
Tips
- Preview on actual devices when possible
- Check all pages, not just homepage
- Test forms and interactions
- Verify mobile experience
Next Steps
