> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Canvas
export const CircleHelpIcon = props => {
return
;
};
Every design you create in Kombai is stored in a Canvas. It is where you interact with your designs, iterate on them, and access the rest of the Design Mode features.
## Open a Canvas
There are two ways to open a Canvas in Design Mode:
* **Prompt Kombai directly:** Switch to Design Mode and describe what you want to build. Kombai will generate the design in a Canvas and open it automatically.
* **Create one manually:** Switch to Design Mode, then click the icon in the chat input to go to the Canvas Gallery page. Click **Create a new Canvas**, enter a name, and click the **Create** button to open a new Canvas.
## Canvas Gallery
The Canvas Gallery page is the central hub for managing all your designs. It shows all your canvases as cards.
To open the Canvas Gallery:
* Switch to Design mode from the modes dropdown in the chat input box.
* Click the ** Canvas Gallery** icon in the chat input.
* Now create a new canvas by clicking on the **Create a new Canvas** button or open an existing canvas by clicking on the respective canvas card.
Kombai, by default, opens the Canvas Gallery page in the Kombai Browser. But you can also open it in your IDE by turning off the **Open canvas in browser** toggle in the **General settings** tab of the [Settings](/account/settings) page.
## Canvas toolbars
The Canvas has a **bottom toolbar**, a **top toolbar**, and a **zoom bar**. The bottom toolbar is always visible, floating at the bottom center of the Canvas. The top toolbar appears at the top center when you select a design. The zoom bar floats at the bottom right.
### Bottom toolbar
The bottom toolbar gives you access to Canvas navigation tools and the core Design Mode features.
| Icon | Action | Shortcut |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| / | **Select** to interact with designs on the Canvas (default), or **Pan** to click and drag around the infinite Canvas. A single merged control — click the caret to switch modes. | V / H |
| | Snip a portion of the design and attach it to the chat window. | S |
| | **Edit** tool — select any element in a design and adjust it in the [CSS Editor](./css-editor) panel. | E |
| | Add a text node to the Canvas for annotations, labels, or notes. | T |
| | Add comments on your designs. Use comments to leave feedback or notes for yourself or your team. | C |
### Top toolbar
The top toolbar appears when you select a design. It provides four actions: **Open in browser**, **Add to context**, **Generate**, and **Code design** (a **Code element** button replaces **Code design** when an element inside the design is selected). When space is limited, some actions collapse into an overflow menu.
Opens the selected design in your browser, sized to the viewport that best matches the design's width (mobile, tablet, or desktop).
Attaches the selected design to the chat window as context. This is useful when you want to reference the design in a prompt without generating code immediately.
It provides options to generate Versions or Variants, or regenerate the entire design:
* **Generate Versions:** Generates Versions based on the selected device, breakpoint, and mode.
* **Generate Variants:** Generates a new Variant of the selected design. Hover over the categories to pick a preset, or choose **Surprise Me**.
* **Regenerate Design:** Regenerates the selected design.
Attaches the selected design to the chat input and sends a prompt to the agent to generate code for it.
### Zoom bar
| Icon | Action |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Zoom | Click to see various zoom options for the designs. |
| | Open the **Collaborate on design** modal to share your canvas and Design Systems with your team. See [Collaboration](/design/collaboration) for details. |
| / | Toggle where the Canvas is displayed. Shows **Open in editor** () when viewing in the browser, or **Open in browser** () when viewing in the IDE. |
| | Open the help docs. |
## Attach Canvas and Designs in chat
You can attach an entire Canvas or individual designs to the Kombai chat as context for code generation or design questions.
**Attach a Canvas:**
1. Type `@Canvas` in the chat input.
2. Select the Canvas you want to attach.
3. Write your prompt and send.
**Attach a Design:**
1. Type `@Designs` in the chat input.
2. Select the individual design you want to attach.
3. Write your prompt and send.
## Right-click menu options
### Right-click on a design
Here are the options you see when you right-click on a design within the Canvas:
| Option | Shortcut | Description |
| ----------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Add to context | | Attach the selected design to the chat window as context. |
| Focus | ⇧2 | Bring the selected design into focus on the Canvas. |
| Cut | ⌘X | Cut the selected design. |
| Copy | ⌘C | Copy the selected design. |
| Paste | ⌘V | Paste a copied design onto the Canvas. |
| Duplicate | ⌘D | Duplicate the selected design. |
| Delete | delete | Delete the selected design. |
| Viewport | | Resize the design to a preset or custom dimension. Opens a submenu with **Content Height** (full natural height), **Mobile** (375 × 812), **Tablet** (768 × 1024), **Desktop** (1440 × 800), and **Custom...** |
| Generate Versions | | Generate device- or mode-specific versions of the selected design. See [Generate Versions](#generate-versions). |
| Generate Variants | | Generate a new variant of the selected design by targeting specific aspects for improvement. See [Generate Variants](#generate-variants). |
| Regenerate design | | Regenerate the selected design from scratch using the same original prompt. |
| Edit | | Opens a submenu with **Edit Design**, which activates the Edit tool to adjust the design in the [CSS Editor](./css-editor) panel. |
| Open in browser | | Opens a submenu with **Open** (opens the design in the browser) and **Copy Link** (copies a shareable link to the design). |
| Export | | Opens a submenu with **Copy as PNG**, **Copy as HTML**, **Save as PNG**, and **Save as HTML**. |
| Apply | | Opens an **Apply** submenu listing your saved Design Systems. Select one to regenerate the design using its tokens. |
| Select element | | Enter element selection mode to select an individual element within the design. |
### Right-click on an element
When you select a specific element within a design using the **Edit** tool, right-clicking on it shows the following options:
| Option | Description |
| ---------------------- | --------------------------------------------------------------- |
| Add element to context | Attach only the selected element to the chat window as context. |
| Generate Image | Generate an AI image for the selected element. |
| Generate Video | Generate an AI video for the selected element. |
### Right-click on an empty area
Here are the options you see when you right-click on an empty area of the Canvas:
| Option | Shortcut | Description |
| -------------- | -------- | ------------------------------------------------------------------------ |
| Paste | ⌘V | Paste a copied design onto the Canvas. |
| Import designs | | Import one or more `.html` files from disk as new designs on the Canvas. |
| Zoom in | | Zoom into the Canvas. |
| Zoom out | | Zoom out of the Canvas. |
| Focus | ⇧2 | Bring the selected design into focus on the Canvas. |
## Generate Versions vs Generate Variants
Both options create new designs from an existing one, but they serve different purposes.
| | Generate Versions | Generate Variants |
| ----------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| **Purpose** | Adapt a design to a different device size or color mode | Explore a different direction for the same design |
| **What changes** | Viewport width or light/dark mode | Visual style, layout, interactions, responsiveness, or custom aspects |
| **What stays the same** | Content and overall design intent | The core design intent and prompt |
| **When to use** | You need a mobile, tablet, or dark mode version of a finished design | You want to iterate on or improve an existing design |
| **Output** | A version optimized for the selected device and mode | One or more variant designs based on the selected improvement category |
## Generate Versions
You can ask Kombai to create device-specific and dark/light mode versions of a design using the **Generate Versions** option in the top toolbar or from the right-click menu on a design.
Choose a target device breakpoint for the version.
| Device | Width |
| ------ | ------------------------------- |
| Mobile | 390 px |
| Tablet | 768 px |
| Laptop | 1280 px |
| Custom | Enter a custom width in pixels. |
Choose **Light** or **Dark** mode for the version.
Click **Generate Version** to create the version.
## Generate Variants
Generate Variants lets you create new variants of a selected design by targeting specific aspects for improvement.
Click on the design on the Canvas you want to create a variant of.
Click the **Generate** dropdown in the top toolbar and hover over **Generate
Variants** to see the pre-defined categories of presets for variants.
Choose a category and sub-option. Kombai sends a prompt to the agent along
with your selected design and generates the variant.
The pre-defined categories for variants and their sub-options are described below:
### Improve styles
Refine the visual appearance of your design.
| Option | Description |
| ----------------------------- | ------------------------------------------------------------------------------------------ |
| **Surprise me** | Let Kombai choose a style improvement automatically. |
| **Suggest a style direction** | Get a new overall style direction for the design. |
| **Soften** | Make the design softer with gentler colors, rounded edges, and lighter contrasts. |
| **Intensify** | Make the design bolder with stronger colors, sharper contrasts, and heavier visual weight. |
| **Pop colors** | Increase color vibrancy and saturation across the design. |
| **Add depth** | Introduce shadows, layering, and dimension to create a more three-dimensional feel. |
| **Improve typography** | Enhance font choices, sizing, spacing, and typographic hierarchy. |
### Improve structure
Adjust the layout and spatial organization of your design.
| Option | Description |
| -------------------- | ----------------------------------------------------------------------------------- |
| **Surprise me** | Let Kombai choose a structural improvement automatically. |
| **Rearrange layout** | Reorganize how sections and elements are positioned on the page. |
| **Simplify** | Reduce visual clutter by removing unnecessary elements and streamlining the layout. |
| **Enrich** | Add more content and detail to make the design more comprehensive. |
| **Fix hierarchy** | Improve the visual hierarchy so the most important elements stand out clearly. |
| **Adjust density** | Change how tightly or loosely elements are spaced across the design. |
### Improve interactions
Add or enhance motion and interactive elements.
| Option | Description |
| ---------------- | --------------------------------------------------------------- |
| **All aspects** | Improve all interactive aspects of the design at once. |
| **Animations** | Add or refine animations and transitions throughout the design. |
| **Add sparkles** | Add subtle decorative micro-interactions and sparkle effects. |
### Improve responsiveness
Optimize the design for different screen sizes.
| Option | Description |
| ----------------- | ----------------------------------------------- |
| **All aspects** | Improve responsiveness across all device sizes. |
| **Mobile** | Optimize the design for mobile screens. |
| **Tablet** | Optimize the design for tablet screens. |
| **Large screens** | Optimize the design for large desktop screens. |
### Surprise Me
Below the preset categories, the **Surprise Me** option lets Kombai pick an improvement direction for the design on its own and generate a variant based on it.
## Regenerate design
Regenerates the selected design from scratch using the same original prompt. Use this when you want a completely fresh take on the design rather than an incremental improvement. Select a design, click the **Generate** dropdown in the top toolbar, and click **Regenerate design**.
## FAQs
If Kombai has generated the designs but they are not appearing on the Canvas, please reopen the current Canvas tab in your IDE.
You can reopen it in either of these ways:
1. Click the `.canvas` file directly in your repository.
2. Open the **Canvas Gallery** in Kombai and select your Canvas.
If the issue persists, please reach out to [support@kombai.com](mailto:support@kombai.com).