Canvas Editor

The canvas editor lets you select and interact with elements directly in the preview. Click on any element to select it and reference it in your prompts.

Selecting Elements

Click on any visible element to select it:

  • A highlight appears around the selected element
  • Element information shows in the panel
  • You can reference it in your next prompt

Selection in Prompts

After selecting an element, say things like "change this button to red" or "make this section taller" - the AI knows what you're referring to.

Hover Highlighting

As you hover over elements, they're subtly highlighted to show what can be selected. This helps you understand the component boundaries.

Element Information

When an element is selected, you can see:

  • Element type - Button, heading, image, etc.
  • Component name - The React component it belongs to
  • File location - Where in the code this element is defined
  • Current styles - Key CSS properties applied

Contextual Actions

With an element selected, you can:

  • Edit - Describe changes in the chat
  • View code - Jump to the element's code
  • Duplicate - Ask to create a copy
  • Delete - Ask to remove it

Nested Selection

For nested elements:

  • Click once to select the outermost element
  • Click again to drill down into nested elements
  • Use Esc to move back up the hierarchy

Visual Editing Tips

  • Be specific - "Make this button wider" is better than "change the button"
  • Reference by type - "All cards" or "the header"
  • Describe outcomes - "I want more spacing between these"

Keyboard Shortcuts

  • Esc - Deselect current element
  • Delete - Request deletion (needs confirmation)
  • Enter - Focus on chat input

Next Steps

PreviousCode ViewerNextAI Chat