START HEREAvailable

Create your first UXDL in 10 minutes

A fast hands-on walkthrough to model your first user interaction graph using the UXDL visual canvas or structured document editor.

Hands-on Overview

This quick start optimizes for first value: taking a high-level feature concept and turning it into a valid 3-screen UXDL contract that can be handed to Engineering or an AI coding agent.

8-Step Quick Start

1. Open the editor at uxdl.dev/editor.
2. Select 'New Blank Canvas' or import a UXDL YAML artifact.
3. Add 3 core Screens: sign_in, dashboard, and billing.
4. Add meaningful States to each screen (e.g. default, error, past_due).
5. Add interactive Actions to screens (e.g. submit, retry_payment).
6. Drag Relation arrows to connect action outcomes to target screens and states.
7. Review validation findings in the sidebar to ensure zero dead-ends or unhandled errors.
8. Copy stable UXDL addresses or export canonical YAML.

10-Minute Starter Spec

You can paste this complete starter specification directly into the UXDL Source View to see it render on the visual Canvas:

YAML

1uxdl: "0.1"
2app: E-Commerce Store
3title: Checkout & Payment Recovery
4
5actors:
6  customer:
7    name: Workspace Owner
8    type: human
9
10screens:
11  checkout:
12    name: Order Checkout
13    type: page
14    states:
15      default: Ready for payment card entry
16      payment_failed: Card declined by gateway
17    actions:
18      submit_payment:
19        name: Submit Payment
20        actor: customer
21        relations:
22          success:
23            to: order_summary
24          failed:
25            to: checkout
26            state: payment_failed
27
28  order_summary:
29    name: Order Confirmation
30    type: page
31    states:
32      confirmed: Receipt issued
33
34slices:
35  checkout_recovery:
36    name: Retry Declined Card Flow
37    type: story
38    actor: customer
39    screens: [checkout, order_summary]
40    acceptance:
41      - Customer can resubmit payment from payment_failed state.
42      - Successful payment transitions user to order_summary in confirmed state.

Current Capabilities

UXDL clearly distinguishes available features from roadmap items:

YAML

1Available today:
2- Start from blank Canvas
3- Author in structured Document View
4- Import UXDL 0.1 YAML file
5- Contextual linter checks (dead-end states, state coverage)
6- Export canonical single-file YAML & JSON graph
7
8In development:
9- Natural-language intent generation
10- PRD & Notion requirement importer