# Preview Your ProjectDevice Preview resizes the WebPros Nova editor canvas to simulate mobile, tablet, and desktop viewport widths for layout review before publishing a website or web app. It simulates viewport width, responsive layout reflow, typography scaling, image resizing, and navigation layout changes. It does not replicate real device hardware, touch behavior, browser-specific rendering differences (e.g., Safari on iOS), or network conditions. Use the Preview link or a real device for final cross-browser checks.

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:

1. Click _Preview_ in the navigation bar. The preview panel displays your project.
2. 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 (![mobile icon](/images/icons/mobile-icon.svg)) — Simulates a narrow smartphone view.
   - Tablet (![tablet icon](/images/icons/tablet-icon.svg)) — Simulates a mid-size tablet view.
   - Desktop (![desktop icon](/images/icons/desktop-monitor-icon.svg)) — Simulates a full-width desktop view.

{{< callout context="note" icon="outline/info-circle" >}}

Click _Preview link_ in the navigation bar to open your project in a real browser tab for additional testing.

{{< /callout >}}

## 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](/en/features/design/edit-mode/) but the preview panel still shows old content, try the following options:

- Click the refresh icon (![refresh icon](/images/icons/refresh-icon.svg)) 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](/en/features/design/code-editor) icon (![code icon](/images/icons/code-icon.svg)) 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_.