Skip to main content
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: Ensure Design pill is selected in the chat input and describe what you want to build. Kombai will generate the design in a Canvas and open it automatically.
  • Create one manually: Click the Designs button below the chat input to go to the Canvas Gallery page. Click Create a new Canvas, select a folder, enter a name for the canvas, and click the Create button.
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, click the Designs button below the chat input. From there, click Create a new Canvas to start a new one, or click a canvas card to open an existing one.

​
Organize canvases with folders

Canvases can live in folders to keep large projects tidy. These folders are created inside your project directory, so your canvas organization is reflected in your repo as well.

​
Create a canvas in a folder

  1. Open the Canvas Gallery and click Create a new Canvas.
  2. In the dialog, click the Folder field to pick an existing folder, or type a new folder path to create the folder inline.
  3. Enter a Name and click Create.

​
Browse canvases by folder

If All Canvases is selected in the top folder dropdown in the Canvas Gallery, the page lists all your canvases as cards. To filter the list to a specific folder, click the top folder dropdown on the Canvas Gallery page and select a specific folder. The list will update to show only canvases in that folder.

​
Move or rename a canvas

  • From the gallery: open the canvas card’s ⋮ menu and choose Move to folder or Rename. Moves apply immediately and can be undone from the confirmation toast.
  • From the canvas editor: use the folder path in the breadcrumb bar to move or rename the canvas you have open.

​
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.

​
Draw tools

Draw is a canvas markup and sketching tool that lets you quickly outline concepts, annotate layouts, and diagram flows directly on your workspace. Press D or select Draw to open the drawing bar above the bottom toolbar. Use Draw to add text, shapes, frames, and freehand strokes. Every element you create functions as a canvas object that can be grouped, attached to chat, or converted directly into a design.
Frames and shapes can be drawn on empty canvas areas or over other drawn objects, but not inside a generated design.

​
Grouping elements with Frames

Frames act as containers for your canvas elements. Any text, shape, or stroke created inside a frame automatically becomes a child element and moves, duplicates, copies, deletes, and exports with it.

​
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

​
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:

​
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:

​
Right-click on a drawn object

Right-clicking any element created with the Draw tool opens a context menu with the following options:
Cut, Copy, Paste, and Duplicate aren’t in this menu, but standard keyboard shortcuts work on all drawn objects.

​
Order

Order controls the layer stacking of overlapping elements on a design. Right-click on an element to check the stacking options: Options are disabled when an action would have no effect (for example, Bring to Front on an object that is already frontmost). Stacking inside frames: Child elements stack exclusively within their parent frame and cannot be raised above objects outside it. Attempting to do so prompts Bring frame to front, which raises the entire frame along with all of its child elements.

​
Right-click on an empty area

Here are the options you see when you right-click on an empty area of the Canvas:

​
Generate Versions vs Generate Variants

Both options create new designs from an existing one, but they serve different purposes.

​
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.
1

Select a device

Choose a target device breakpoint for the version.
2

Select a mode

Choose Light or Dark mode for the version.
3

Generate

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.
1

Select a design

Click on the design on the Canvas you want to create a variant of.
2

Open Generate Variants

Click the Generate dropdown in the top toolbar and hover over Generate Variants to see the pre-defined categories of presets for variants.
3

Select an option

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.

​
Improve structure

Adjust the layout and spatial organization of your design.

​
Improve interactions

Add or enhance motion and interactive elements.

​
Improve responsiveness

Optimize the design for different screen sizes.

​
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.