AIUIaiui/docs

Working with Nodes

Nodes are the building blocks of your AIUI projects. Each node contains a generated UI design—the HTML and Tailwind CSS that make up a screen, component, or section. This guide covers everything you need to know about managing nodes on the canvas.

What is a Node?

A node is a container for a single generated design. It displays:

  • A live preview of the HTML/CSS output
  • The node name (editable)
  • Status indicators
  • Connection lines to parent/child nodes

Think of nodes as cards on your canvas, each holding one piece of your design system.

Selecting Nodes

Single Selection

Click on any node to select it. Selected nodes display:

  • A highlighted border
  • Resize handles at corners and edges
  • The node toolbar (rename, preview, delete)

Multi-Selection

Select multiple nodes using:

Shift + Click Hold Shift and click additional nodes to add them to your selection.

Selection Box Click and drag on empty canvas space to draw a selection box. All nodes within the box are selected when you release.

Select All Press Cmd/Ctrl + A to select all nodes on the canvas.

Deselecting

  • Click on empty canvas space to deselect all
  • Shift + Click a selected node to remove it from multi-selection
  • Press Escape to clear selection

Moving Nodes

Drag selected nodes to reposition them on the canvas:

  1. Select one or more nodes
  2. Click and drag from the node body (not the edges)
  3. Release to place

Nodes snap to the 20px grid by default. Hold Alt/Option while dragging to disable snapping for precise positioning.

When moving multiple nodes, they maintain their relative positions to each other.

Resizing Nodes

Adjust node dimensions to fit your content:

  1. Select a node
  2. Grab a resize handle (corner or edge)
  3. Drag to resize
  4. Release when satisfied

Resize handles:

  • Corner handles: Resize width and height simultaneously
  • Edge handles: Resize in one dimension only

The preview inside the node reflows to match the new dimensions, showing how your design responds to different viewport sizes.

Renaming Nodes

Give nodes meaningful names for organization:

Quick Rename

  1. Select a node
  2. Double-click the node name in the toolbar
  3. Type a new name
  4. Press Enter to save

Context Menu Rename

  1. Right-click the node
  2. Select Rename
  3. Enter the new name
  4. Press Enter

Good naming conventions:

  • "Homepage - Hero Section"
  • "Login Form - Dark"
  • "Dashboard v2"
  • "Mobile - Settings"

Previewing Nodes

Expand a node to full-screen preview for detailed inspection:

Full Preview Mode

Press Shift + Space with a node selected (or double-click the node) to enter full preview mode:

  • The design expands to fill your screen
  • Browser or mobile chrome displays based on project type
  • Interact with the preview (hover states, scroll behavior)
  • Press Escape or click outside to exit

In-Canvas Preview

The node thumbnail on the canvas shows a live, scaled preview. Zoom in on the canvas to see more detail without entering full preview mode.

Copying Code

Extract the generated code for use in your projects:

Quick Copy

With a node selected, press Cmd/Ctrl + C to copy the HTML to your clipboard.

Copy from Context Menu

  1. Right-click the node
  2. Select Copy Code
  3. Paste into your editor

The copied code includes:

  • Complete HTML structure
  • All Tailwind CSS classes
  • Inline comments (if enabled in settings)

Deleting Nodes

Remove nodes you no longer need:

Delete Selected

  1. Select one or more nodes
  2. Press Delete or Backspace
  3. Confirm deletion if prompted

Context Menu Delete

  1. Right-click the node
  2. Select Delete

Deleting Connected Nodes

When you delete a node with children:

  • Child nodes remain on the canvas
  • Connection lines are removed
  • Children become independent nodes

Deletion is permanent within the session but can be undone with Cmd/Ctrl + Z immediately after.

Copying and Pasting Nodes

You can copy and paste nodes to move designs between projects or create duplicates.

Cross-Project Copy/Paste

  1. Select the nodes you want to copy.
  2. Press Cmd/Ctrl + C.
  3. Open a different project.
  4. Press Cmd/Ctrl + V.
  5. The nodes, including their code and state, will be pasted into the new canvas.

Pasting External Content

  • Images: Paste an image directly from your clipboard to create a new Image Node.
  • HTML/Code: Paste code snippets to create a UI Node containing that code.
  • URLs: Paste a website URL, and AIUI will offer to capture a screenshot of that site as a new node.

Connection Lines

Connection lines visualize the relationship between nodes:

Understanding Connections

  • Lines connect parent nodes to their children
  • Parent = the node you selected before generating
  • Child = the node created from that generation

Visual Indicators

  • Solid lines: Direct parent-child relationship
  • The line origin: Parent node
  • The line destination: Child node
  • Hover over a line to highlight the relationship

Working with Connections

Connections are automatic—created when you branch from a node. They help you:

  • Track design evolution
  • Understand which variations came from where
  • Navigate complex iteration histories

Context Menu

Right-click any node to access the context menu:

Action Description
Rename Change the node name
Duplicate Create an exact copy of the node
Copy Code Copy HTML to clipboard
Preview Open full-screen preview
Mark as Designed Flag as complete
Delete Remove the node

The context menu provides quick access to common actions without keyboard shortcuts.

Status Indicators

Nodes display status indicators to show their state:

Generation Status

  • Loading spinner: Currently generating
  • Checkmark: Generation complete
  • Error icon: Generation failed

Design Status

  • No indicator: Work in progress
  • Designed badge: Marked as complete

Selection Status

  • Blue border: Currently selected
  • Faded blue: Part of multi-selection
  • No border: Unselected

Marking as "Designed"

Flag nodes as complete to track your progress and organize your canvas. Marking a node as designed has several effects:

  1. Visual Badge: A "Designed" badge appears in the node header.
  2. Progress Tracking: Helps you and your team identify finalized screens versus work-in-progress iterations.
  3. Canvas Organization: When you use the Canvas Cleanup feature, the designed node becomes the primary representative of its entire version history (see below).

To mark a node as designed:

  • Right-click the node and select Mark as Designed.
  • Or click the checkmark icon in the node's top toolbar.

Version Stacking and Collapsing

AIUI uses the "Mark as Designed" status to help declutter your workspace. When you have multiple variations or branches of a design:

  • Marking one node as "Designed" signals that it is the chosen version for that particular flow.
  • Other variations in the same family tree are effectively "collapsed" behind it when the canvas is organized, keeping your workspace clean and focused on final designs.

To unmark, right-click and select Unmark as Designed.

Canvas Cleanup

The Canvas Cleanup button (located in the top toolbar with the brush icon) automatically arranges your nodes into a structured layout.

  • Vertical Arrangement: Primary screen flows are arranged vertically.
  • Horizontal Versions: Different branches or versions of a screen are arranged horizontally.
  • Designed Stacking: If a node is marked as "Designed," its sibling variations are stacked behind it to save space and reduce visual noise.

This is the fastest way to organize a messy canvas into a readable design specification.

Keyboard Shortcuts Summary

Action Shortcut
Select all Cmd/Ctrl + A
Delete selected Delete / Backspace
Copy code Cmd/Ctrl + C
Undo Cmd/Ctrl + Z
Redo Cmd/Ctrl + Shift + Z
Full preview Shift + Space
Deselect Escape

Next Steps

With node management mastered, explore more canvas features: