Skip to content

Canvas

Canvas is the primary workspace where you design UI by dragging and dropping widgets.

Use live preview to verify results immediately and build responsive layouts efficiently.

Canvas Overview

Page Tab

  • Shows the currently open page.

Artboard

  • The design surface representing a target device screen.
  • Add widgets by drag and drop, then configure them in Panel.

Zoom Control

  • Zoom the artboard in and out for precise editing.

Device Setting

  • Device selection
    • Set artboard size based on a device profile.
  • Orientation
    • Switch between portrait and landscape.
  • Custom size
    • Set custom artboard width and height.

Code Editor

  • Open code editor
    • Open the code tab to inspect and edit page code.
  • Code theme
    • Configure editor theme, font, weight, size, and colors.

Board Editor

  • Build and edit multiple board states within a single page.
  • Multi-board editing: Add boards next to the selected artboard and compare states side by side (for example loading, error, or alternate tabs).
  • Templates: Create new boards from predefined templates.

Floating Widget Plate

  • Access widgets directly from Canvas.
  • Add widgets without switching to the Plate widget tab.

Theme Setting

  • Apply predefined themes across widgets for consistent design.
  • Configure both Light and Dark variants and use multiple themes.
  • Open Color Themes from Plate -> Style -> Color Themes.

Status Bar

  • Located at the bottom of Canvas.
  • Shows run status and other live project indicators.
  • Provides quick access to logs and debugging console.