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

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