Canvas

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.

​

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, 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. To find a canvas, type in Search canvases (press ⌘K or / to focus it). Use the sort menu to order canvases by Alphabetical, Date created, or Last edited (the default), and switch between Grid view and List view.

​

Organize canvases with folders

Canvases can be stored 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. You can even use folders excluded by your .gitignore to organize canvases.

​

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 a folder, or type a path to create one 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.

​

Delete a canvas

On the Canvas Gallery page, open the canvas card’s ⋮ menu and choose Delete.

​

Canvas toolbars

The Canvas has a bottom toolbar, a top toolbar, a document actions bar, and a zoom bar. The bottom toolbar is always visible, floating at the bottom center of the Canvas. The top toolbar floats beside your selection, with controls for the selected design, drawing, text, or frame. The document actions bar sits at the top right, and 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. Select a drawn object to access its editing and styling controls in the top toolbar. Every element you create functions as a canvas object that can be grouped, attached to chat, or converted directly into a 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 is a floating action bar that appears when you select an object in the canvas. It appears above the selected design or drawn object, or below it when there isn’t enough room above. Its controls change based on what you select.

​

Select a single design

The top toolbar shows Add to chat, Open in browser, Export, Generate, and Code design. If you select an element inside a design, the toolbar switches to Add element to chat and Code element. These actions apply to the selected element, not the whole design.

​

Quick-edit an element

To make a quick style change without opening the full design editor, switch to the Edit tool (E) and click an element in a design. The top toolbar turns into a quick-edit bar with these controls:

• Add to chat adds the element to your chat.
• The font control sets the font family, weight, size, line height, and letter spacing.
• The text color control sets the element’s text color.
• For text elements: bold, italic, underline, link, and alignment.
• For all other elements: background color, padding and margin, border radius, and border.
• Open edit panel opens the full design editor.

Quick edits aren’t saved right away. While the edit panel is closed, a strip at the top of the canvas shows how many unsaved edits you have. Use Undo and Redo to step through them, Discard to drop them, or Save to save every edited design.

​

Select multiple designs

The top toolbar shows Add to chat, Open N tabs, Export, and Code designs when you select multiple designs. The actions apply to the whole selection, not individual designs.

​

Select a Draw tool item

The top toolbar shows Add to chat alongside text formatting, color controls, Style, Add text, or the frame name, depending on the selected item. See Draw tools for each item’s editing and styling options.

​

Document actions bar

The document actions bar holds actions for the whole Canvas. While something is selected, its buttons collapse to icons. Import HTML… isn’t available when the Canvas is open in a standalone browser tab.

​

Zoom bar

The zoom bar shows the current zoom level. Click it to open a menu with these options: Open in Browser appears when you view the Canvas in the desktop app or IDE, and Open in Editor appears when you view it in the browser. Help opens these docs.

​

Node header

Each design on the Canvas has a header with its name and these controls:

• Viewport presets: Switch the design to Content height, Mobile (375 × 812), or Desktop (1440 × 800), the same presets as the right-click Viewport submenu. With several designs selected, a preset applies to all of them.
• Focus node: Zoom to the design so its width fills most of the Canvas, up to 100%, and select it. A tall design is aligned to its top.
• Scroll position: For a fixed-height design whose page is taller than its frame, a track shows where you are on the page. Drag it to scroll the design.

When you zoom far out, the header hides some of these controls to fit.

​

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 multiple designs

When you select several designs and right-click the selection, the menu applies to every selected 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:

​

Right-click on a drawn object

Right-clicking an object created with the Draw tool opens a context menu. What it holds depends on whether you right-click a single object or a multi-selection, and a frame carries two differences of its own. A frame’s menu differs in two ways: it adds Rename, and its Delete removes the frame’s child elements along with it. When you right-click a selection of drawn objects, the menu holds Convert to design node, Order, Focus, Arrange (Row, Column, or Grid), and Delete. If the selection has two or more text items or drawings, it also shows Group in frame, which wraps them in a new frame.

​

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: The first three options sit under Add to canvas and the rest under View. Import HTML… isn’t available when the Canvas is open in a standalone browser tab.

​

Paste or drop content

You can add content to the Canvas from your clipboard or from files:

• Copied Canvas items: Press ⌘V to paste designs, drawings, text, or frames you copied or cut on a Canvas.
• Images: Paste an image from the clipboard, or drag image files onto the Canvas. Each image becomes an image object at the pointer position.
• HTML: Paste HTML markup to create a design from it.

If the clipboard holds only plain text, Kombai shows Nothing to paste. To add plain text, use the Text tool in Draw tools.

​

Export a design

In the desktop app or IDE extension, save a design as PNG or HTML anywhere on your computer through your system’s native save dialog:

1. Right-click the design and choose Export > Save as PNG or Export > Save as HTML. You can also use Export in the design’s toolbar.
2. In the save dialog, choose a location and name, then save.

With several designs selected, Kombai opens one save dialog per design, in order. Closing a dialog without saving skips the rest. To put a single design on your clipboard instead, choose Export > Copy as PNG or Export > Copy as HTML. When the Canvas is open in a standalone browser tab, the save options are Download as PNG and Download as HTML, which download the file through your browser.

​

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.

​

Generate Variants

Generate Variants lets you create new variants of a selected design by targeting specific aspects for improvement. 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