AIUIaiui/docs

Canvas Basics

The AIUI canvas is an infinite workspace where you create, arrange, and iterate on your UI designs. Unlike traditional design tools with fixed page boundaries, the canvas extends endlessly in all directions, giving you unlimited space to explore ideas.

The Infinite Canvas

Think of the canvas as an endless whiteboard. You can:

  • Spread out multiple design variations side by side
  • Create visual hierarchies by positioning related screens together
  • Build flows by connecting screens with visual proximity
  • Never worry about running out of space

Nodes (your generated UI designs) can be placed anywhere on this infinite plane.

Panning

Move around the canvas by panning:

Mouse/Trackpad

  • Click and drag on any empty space to pan
  • The cursor changes to a grabbing hand while panning

Keyboard + Mouse

  • Hold Space and drag to pan (even when hovering over nodes)

Two-finger Scroll

  • On trackpads, two-finger scroll moves the viewport

Panning is smooth and momentum-based, making it easy to navigate large projects with many nodes.

Zooming

Control your view magnification to see the big picture or focus on details:

Zoom Controls

The zoom controls are located in the bottom-right corner of the canvas:

  • + Button: Zoom in one step
  • - Button: Zoom out one step
  • Fit to View: Automatically adjusts zoom to show all nodes

Zoom Methods

Scroll Wheel

  • Scroll up to zoom in
  • Scroll down to zoom out
  • Zooming centers on your cursor position

Trackpad Pinch

  • Pinch to zoom in/out
  • Natural gesture that centers on the pinch point

Keyboard Shortcuts

  • Cmd/Ctrl + = or Cmd/Ctrl + +: Zoom in
  • Cmd/Ctrl + -: Zoom out
  • Cmd/Ctrl + 0: Reset to 100%
  • Cmd/Ctrl + 1: Fit all nodes in view

Zoom Levels

AIUI uses discrete zoom steps for consistent scaling:

Level Percentage
1 25%
2 50%
3 75%
4 100% (default)
5 125%
6 150%
7 200%
8 300%

Zoom Limits

  • Minimum Zoom: 10% (0.1x) - See your entire project at a glance
  • Maximum Zoom: 300% (3x) - Inspect fine details

The current zoom level is displayed in the zoom controls. Click the percentage to open a dropdown for quick level selection.

Grid and Snapping

The canvas includes an invisible grid system that helps align nodes precisely:

Grid Specifications

  • Base Grid Size: 20 pixels
  • Nodes snap to grid intersections when moved
  • Snapping creates clean, aligned layouts automatically

Snap Behavior

When you drag a node:

  1. As you move, the node position snaps to the nearest grid point
  2. Visual guides appear when aligned with other nodes
  3. Release to place at the snapped position

Disabling Snap

Hold Alt/Option while dragging to temporarily disable grid snapping for pixel-perfect manual positioning.

Viewport and Navigation

Current Viewport

Your viewport is the visible portion of the canvas. As you pan and zoom, the viewport updates to show different areas at different scales.

Mini-map (Coming Soon)

A mini-map in the corner will show your current viewport position relative to all nodes in the project.

Quick Navigation

  • Double-click empty canvas to create a node at that position
  • Use the node list in the sidebar to jump to specific nodes
  • Canvas Search: Press Cmd/Ctrl + K or click the search icon in the top toolbar to find nodes by name or content.
  • Fit-to-view quickly shows all content

Canvas Cleanup

As your project grows, the canvas can become cluttered. The Canvas Cleanup tool (brush icon in the top toolbar) automatically organizes your nodes:

  • Structured Layout: Arranges screens into logical vertical flows and horizontal version branches.
  • Smart Stacking: Collapses variations behind nodes marked as "Designed" to reduce visual noise.
  • Instant Order: One click turns a messy exploration into a clean design specification.

Node Positioning

When you generate UI, nodes appear on the canvas at calculated positions:

Initial Placement

  • First node: Centered in the current viewport
  • Branch nodes: Positioned below and to the right of the parent
  • Independent generations: Placed in visible empty space

Arrangement Tips

  • Keep related screens close together
  • Use horizontal rows for variations of the same screen
  • Use vertical columns for user flow sequences
  • Leave breathing room between unrelated designs

Performance

The canvas handles large projects efficiently:

  • Only visible nodes are fully rendered
  • Off-screen nodes use lightweight placeholders
  • Zoom out to get a bird's-eye view of complex projects
  • Smooth 60fps panning and zooming

Next Steps

Now that you can navigate the canvas, learn how to: