Canvas / Visual Edit
Select an element on your running page, adjust it directly — position, style, text — and export the change straight to the source file it came from.
How it works
01 // ACTIVATE
Click the pencil icon in the side panel's input toolbar to turn on Visual Edit for the current page.
02 // EDIT
Click an element to select it, then reposition, restyle, or edit its text right on the page.
03 // EXPORT
Click Export → Code in the floating toolbar. Trace maps the element back to its source file and writes the change.
Keyboard shortcuts
These work whenever Visual Edit is active on the page:
SSelectClick to pick elements on the page.
MMoveDrag or use arrow keys to reorder siblings.
PPositionDrag to any position; arrow keys to nudge (hold Shift for 10px).
TStyleAdjust font, color, and spacing, including keyboard-driven nudges.
ETextDouble-click any text to edit it inline.
EscExitDeselect the current element, or exit text editing.
Selections survive the page changing under you
Trace assigns each edited element a stable reference so the same element still gets found and updated even if the page re-renders between when you select it and when you export.