Title here
Summary here
Preview Your Project
Nova’s device preview mode lets you view your project across mobile, tablet, and desktop sizes directly in the editor. The preview panel resizes to approximate each device’s screen width so you can catch layout issues before publishing.
Switching between preview modes
To switch between device preview modes:
- Click Preview in the navigation bar. The preview panel displays your project.
- Click the device preview icon in the navigation bar to switch between mobile, tablet, and desktop views. The displayed icon changes depending on which view you currently have selected.
- Mobile (
) — Simulates a narrow smartphone view. - Tablet (
) — Simulates a mid-size tablet view. - Desktop (
) — Simulates a full-width desktop view.
- Mobile (
Click Preview link in the navigation bar to open your project in a real browser tab for additional testing.
What preview simulates and what it doesn’t
The preview panel approximates device widths by resizing the canvas. It does not replicate a real device environment.
What preview simulates
The preview panel simulates the following functionality:
| Feature | What it shows |
|---|---|
| Viewport width | Resizes the preview panel to approximate screen widths for each device class. |
| Responsive layout | Shows how content reflows, stacks, or hides at each breakpoint. |
| Typography scaling | Reflects font size and line-height changes per breakpoint. |
| Image resizing | Shows how images scale or crop at different widths. |
| Navigation layout | Shows collapsed hamburger menus or expanded navigation bars. |
What preview does not simulate
The preview panel does not simulate the following functionality:
| Limitation | Why it matters |
|---|---|
| Real device hardware | The preview panel cannot replicate actual pixel density, GPU rendering, or touch behavior. |
| Browser-specific quirks | Safari® on iOS® and Google Chrome™ on Android™ may render fonts and layouts differently. |
| Touch interactions | Hover states and touch gestures may not behave as they do on a real device. |
| Network conditions | Load times may not reflect slow mobile connections. |
| Native device UI | Previews cannot simulate browser chrome, address bars, and operating system overlays. |
Troubleshooting
Preview panel not updating
If you made changes in Edit Mode but the preview panel still shows old content, try the following options:
- Click the refresh icon (
) in the navigation bar to force the preview panel to reload. - Switch to a different device view and back to cause Nova to re-render the page.
- Click Edit in the navigation bar, save your work, and then click Preview again.
- If the issue persists, refresh the full browser page (
Cmd+R/Ctrl+R).
Layout issues in the preview panel
If elements are overlapping, misaligned, or broken at a specific breakpoint, try the following options:
- Click Edit in the navigation bar and inspect the affected section.
- Check for elements with fixed widths or manual overrides that do not scale responsively.
- Review spacing and padding settings — pixel values may not adapt as well as percentage-based units.
- Click the
code editor icon (
) in the navigation bar to inspect your project’s underlying structure. - Remove and re-add the affected component to reset its responsive defaults.
- Use the prompt text box in the chat panel to describe the issue. Nova’s AI can suggest fixes.
Preview link shows different results than the preview panel
This is expected behavior. The preview renders within the preview panel and approximates device widths. The Preview link opens in a full browser context and may display differently as a result. Use the Preview link or test on a real device for final checks before you click Publish.