Selecting Elements

Everything on your page is an element. Headings, images, buttons, sections. To edit any part of your app, you first need to select it.

How to Select an Element

1. Move your mouse over the canvas. Elements highlight as you hover.
2. Click on an element to select it. A blue border appears around it.
3. The edit panel opens on the right with styling and settings for that element.

You can also select elements by clicking them in the Layers panel in the left sidebar. This is useful for small or overlapping elements.

Editing Text Inline

To edit text content directly on the canvas:

1. Double-click on any text element.
2. The text becomes editable. Type your new content.
3. Click outside or press ESC to finish editing.

Replacing Images

Double-click any image element to open the Choose Image dialog. You have five options:

Library - Browse images you've already uploaded to your project.

Unsplash - Search and insert free photos from Unsplash. Attribution is handled automatically.

Upload - Drag and drop or browse to upload a new image. Supports JPG, PNG, GIF, and WebP up to 10 MB.

URL - Paste a direct image URL.

AI Generate - Describe the image you want and choose a style (Realistic, Cartoon, Minimal, Abstract). Set the width and height, then click Generate.

Replacing Videos

Double-click any video element to open the Choose Video dialog. Drag and drop or browse to upload a video file. Supports MP4, WebM, and MOV up to 100 MB.

Changing Icons

Double-click any icon element to open the Choose Icon dialog. Browse or search the Lucide icon library, then click an icon to apply it.

Deselecting

Press ESC to deselect the current element, or click on an empty area of the page.

Triggering Click Events

To test interactive elements without selecting them, hold ⌘ (Mac) or ⌃ (Windows) and click the element. This triggers the element's actual click event.