Skip to main content

Preview

Preview renders the front end of the app you are building. Within Preview, several controls are available in the top navigation bar.

Home Icon​

  • For multi-page applications, the Home button lets you return directly to the main (home) page of your app.

Copy Preview URL​

  • Copies the sandbox URL of your project.
  • This link can be pasted into a browser to view your app outside of Ideavo.
  • Important: This is a temporary link.
    • It is active only while the Ideavo platform is open.
    • A continuous “heartbeat” is sent from the platform to keep the preview alive.
    • Once the platform is closed, the link expires immediately.
  • Use this link for quick sharing during development, not for publishing.

Open in New Tab​

  • Opens the same sandbox preview in a new browser tab.
  • Unlike Copy Preview URL, you don’t need to copy-paste—just click, and it launches directly.
  • Behavior is identical: the link is short-lived and will expire when the platform closes.

Device Preview (Desktop & Mobile)​

The device preview lets you see how your app renders on different screen sizes without leaving Ideavo.

What it does

  • Toggles between Desktop and Mobile preview.
  • Provides multiple mobile device presets (e.g., popular iPhone/Android sizes) for quick, realistic layout checks.
  • Helps validate responsive breakpoints, fonts, and tap targets before you ship.

How to use

  1. Open your project and switch to Preview.
  2. Click the device icon (computer screen) in the top-right of the preview area.
  3. Choose:
    • Desktop – full-width desktop preview.
    • Mobile – enables the device frame and a device preset dropdown.
  4. Pick a device preset to change width/height (Mobile only).
info
  • Preview Mode is for testing only. It is not a substitute for publishing your app.
  • For a permanent deployment with a shareable URL, use the Publish feature.

Restart Dev Server​

The Restart Dev Server option is available within Ideavo to re-initialize your local development environment. This is the refresh button next to preview tab.

What it does​

  • Stops and restarts the active development server that powers your preview in Code Mode and Preview Mode.
  • Clears temporary caches and reloads configuration (e.g., framework settings, environment variables, or dependency changes).
  • Ensures your frontend reflects the most recent updates when automatic hot reload fails.

When to use it​

  • To fix crashes or stale state: If the preview hangs, doesn’t load, or shows old data, restarting clears the session.
  • Switching configuration or frameworks: Certain changes (e.g., build commands, port updates, DB connections) require a restart.
  • Debugging issues: Helps confirm if a problem is due to cached state or genuine code errors.
info
  • Restarting the dev server does not affect your code—it only refreshes the runtime environment.
  • Use Restart Dev Server as the first troubleshooting step if your preview does not behave as expected.