Canvas

The way you interact with elements on the canvas depends on your active editor mode:

• Selection: With the Select tool (V) active, click an element to select it. This highlights it in both the canvas and the element tree, opening its properties in the right panel.
• Deselection: Press Escape or click on the background outside the canvas to deselect.
• Quick Interaction: Press C or click the hand/cursor icon on the bottom bar to switch to the Interact tool. This lets you click buttons, test hover states, and input forms directly without leaving your current mode.
• Interactive Mode: Press Cmd/Ctrl + I to toggle full-screen Interactive mode (formerly known as test mode, previously T or Option/Alt + T), hiding all sidebars and toolbars to preview and test your application.
• AI Reference: In Play mode, click elements to tag them as references in your AI prompt.
• Visual Annotations: In Play mode, press T (or P, R, O, L) to draw markup directly onto the canvas to visually guide the AI assistant.
• Direct Canvas Editing: In Design mode, use the Frame tool (F) to draw container divs, the Text tool (T) to create text elements, and the Transform tool (W) to adjust dimensions and positioning directly on the canvas.
• Hidden elements: Selecting a hidden element from the element tree makes it visible on the canvas, including any hidden parent elements.