Visual Builder

The visual builder is your creative workspace. Preview your application in real-time, view generated code, and interact with elements directly on the canvas.

Interface Overview

The visual builder consists of three main areas:

  • Preview Panel - See your application as users will see it
  • Code Viewer - Browse and inspect generated code
  • AI Chat Panel - Communicate with the AI to make changes

Builder Sections

Preview Modes

Preview your app on desktop, tablet, and mobile devices.

Code Viewer

Browse and understand your generated code.

Canvas Editor

Select and interact with elements visually.

Real-Time Updates

As the AI generates code, you see changes instantly in the preview. This immediate feedback loop helps you iterate quickly and refine your application.

Keyboard Shortcuts

  • 1 - Switch to desktop preview
  • 2 - Switch to tablet preview
  • 3 - Switch to mobile preview
  • Tab - Toggle between preview and code view
  • R - Refresh preview

Next Steps

Explore each section of the visual builder to become a power user.

PreviousVoice InputNextPreview Modes