Back to Overview
USING UXDLAvailable

Start from Canvas

Canvas is the fastest way to understand UXDL visually without reading or writing underlying YAML markup.

Visual Mental Model

Canvas represents your application as a spatial interaction graph. Screens render as visual node cards; actions render as output handles; relations render as directed arrows pointing to destination screens or variant states.

Flowchart
Rendering diagram...
The visual graph primitives in Canvas View.

Canvas Card Elements

Each Screen node card on Canvas displays 4 structured zones:

  • Header Chrome — Screen title, surface type badge (page, modal, sheet), and host parent link.
  • States Area — Visual tags representing variant states (default, empty, loading, error).
  • Actions Area — Port handles representing user and system triggers.
  • Metadata Badge — Quick links to Figma frames, open issues, and slice references.

Step-by-Step Canvas Workflow

  • 1. Drag 'New Screen' from the tool rail onto the infinite canvas.
  • 2. Name the screen and select its surface type (page, modal, sheet).
  • 3. Click '+ State' to define meaningful variant conditions.
  • 4. Click '+ Action' to add user buttons or system triggers.
  • 5. Drag a relation connector from an action handle directly onto a target screen card or state tag.
  • 6. Annotate the relation arrow with a natural-language 'when' condition.