Live preview

One of Promake's most powerful features is the real-time preview. Watch your website come to life as the AI builds it, and interact with it just like a real visitor would.

Understanding the Preview Panel

When you're in a chat with an active project, you'll see two main areas:

1. Chat Panel (left) - Where you communicate with the AI
2. Preview Panel (right) - Where your website is displayed

Preview Features

Real-Time Updates

As the AI makes changes to your website, the preview updates automatically. You don't need to refresh – just watch it happen!

Interactive Preview

The preview isn't just a static image. You can:

• Click links to navigate between pages
• Fill out forms to test functionality
• Scroll through the entire page
• Interact with buttons and other elements

Device Preview Modes

Test how your website looks on different devices:

| Mode | Description | | ----------- | ------------------------ | | Desktop | Full-width desktop view | | Tablet | Medium-width tablet view | | Mobile | Narrow mobile phone view |

To switch modes, use the device icons in the preview toolbar.

Full Screen Mode

Want a bigger view? Click the expand icon to view your preview in full screen. Press Escape or click the minimize icon to return.

Preview Toolbar

The toolbar above the preview provides several useful functions:

Navigation Controls

• Back - Go to the previous page
• Forward - Go to the next page
• Home - Return to the homepage
• Refresh - Reload the preview

URL Bar

Shows the current page URL. You can see which page you're viewing and manually navigate to specific routes.

View Options

• Device selector - Switch between desktop, tablet, and mobile views
• Full screen - Expand the preview
• Code view - Switch to the code editor (for advanced users)

When the Preview Updates

The preview automatically refreshes when:

• The AI completes building or modifying your website
• You make changes using the Edit Tool (visual editor)
• You save changes in the code editor

Preview vs. Published Site

| Preview | Published Site | | --------------------------- | ------------------------------- | | Only you can see it | Anyone with the URL can visit | | Updates in real-time | Updates when you publish | | Development URL | Your custom domain or subdomain | | May have slight differences | Final, optimized version |

Troubleshooting

Preview Not Loading?

1. Wait a moment - The AI might still be building
2. Click Refresh - Try reloading the preview
3. Check the chat - Look for any error messages from the AI

Preview Looks Different Than Expected?

1. Be more specific - Give the AI clearer instructions
2. Use the Edit Tool - Make visual adjustments directly
3. Request changes - Tell the AI what's wrong and how to fix it

Slow Preview?

• Large images may take time to load
• Complex animations might affect performance
• Check your internet connection

Tips for Using Preview

Test Everything

Before publishing, use the preview to:

• Click all navigation links
• Test forms and buttons
• Check all device sizes
• Read through all text
• Verify images load correctly

Take Screenshots

Need to share your progress? Take a screenshot of the preview to:

• Get feedback from colleagues
• Save design iterations
• Document your website's evolution

Use Edit Mode

For quick edits, enable Edit Mode to click directly on elements in the preview and modify them. See What is the Edit Tool? for more details.