> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibely.sh/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas

> The infinite workspace where your designs live. Pan, zoom, multi-select, generate variations side by side.

The canvas is your workspace in Design Mode. Designs land here as you generate them; you arrange, edit, and compare from one infinite surface.

## Moving around

| Action             | How                                     |
| ------------------ | --------------------------------------- |
| Pan                | Drag empty canvas, or hold space + drag |
| Zoom in / out      | Scroll, or pinch on trackpad            |
| Zoom to fit        | `Z` or **Fit to screen** button         |
| Reset zoom (100%)  | `0`                                     |
| Centre on a design | Double-click empty space near it        |

Zoom range is 10% to 400% — enough to see a full-site layout zoomed out and pixel detail zoomed in.

## Selecting

* **Click** a design to select it. Selection handles appear at the corners.
* **Shift-click** to add to selection — works on any number of designs.
* **Drag a box** on empty canvas to lasso-select everything inside.
* **`Esc`** clears selection.

## Resizing

Drag any corner handle to resize a design's frame. The content inside re-flows to the new dimensions — it's not a flat image. Hold `Shift` while resizing to constrain to the preset breakpoints (390, 768, 1440).

## Right-click menu

Right-click any design to get:

* **Duplicate** — copy alongside the original
* **Variants** — generate 3 alternative takes from the same brief
* **Edit** — opens the inline prompt for that design
* **Build** — exports to React and spins up a live preview project
* **Download** — raw HTML
* **Bring to front / Send to back** — z-order for overlapping designs
* **Delete** — gone (with undo)

## Generating side by side

Every new prompt drops a new design onto the canvas next to your current one — it doesn't replace anything. This is the whole point: you accumulate options instead of overwriting them.

A typical session ends with 6–10 designs on the canvas; you cluster the keepers, delete the rejects, and pick your favourite to **Build**.

## Canvas sizes

Pick a preset that matches what you're designing. Sizes drive defaults (typography scale, padding, expected content density) so a slide doesn't look like a phone screen and vice versa.

| Preset    | Dimensions  | Best for                                   |
| --------- | ----------- | ------------------------------------------ |
| Desktop   | 1440 × auto | Web pages, dashboards, landing pages       |
| Tablet    | 768 × 1024  | iPad layouts, responsive checks            |
| Mobile    | 390 × 844   | Phone screens, mobile app flows            |
| Slide     | 1920 × 1080 | Pitch decks, presentations (16:9)          |
| Animation | 1280 × 720  | Standalone motion designs, loaders, intros |
| Custom    | any         | Whatever you need                          |

You can mix sizes on the same canvas — drop a mobile screen next to a desktop layout next to a slide. Useful for designing a marketing site and its pitch deck in one session.

Set the size before generating, or change a design's size from the right-click menu after the fact. Changing size re-flows the content responsively.

## Saving

The canvas auto-saves continuously. There's no save button. If you close the tab and come back, every design and its position is exactly where you left it.

## Sharing

The **Share** button generates a read-only link to the canvas. Anyone with the link can pan, zoom, and view your designs, but can't edit. Useful for stakeholder reviews without needing them to sign up.

## Keyboard shortcuts

| Shortcut               | Action              |
| ---------------------- | ------------------- |
| `Cmd/Ctrl + Z`         | Undo                |
| `Cmd/Ctrl + Shift + Z` | Redo                |
| `Cmd/Ctrl + D`         | Duplicate selection |
| `Cmd/Ctrl + A`         | Select all designs  |
| `Delete` / `Backspace` | Delete selection    |
| `Z`                    | Zoom to fit         |
| `0`                    | Reset zoom          |
| `Esc`                  | Clear selection     |