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 like Style Guides, Blocks, and Themes.

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 Quick Settings.

Canvas toolbars

The Canvas has two toolbars: the Left toolbar runs vertically along the left side and is always visible. The Top toolbar appears horizontally at the top of the Canvas when you select a design.

Left toolbar

The left toolbar gives you access to Canvas navigation tools and the core Design Mode features.

Icon	Action
	Go to the Canvas Gallery page.
	Select and interact with designs on the Canvas. This is the default tool.
	Click and drag to pan around the infinite Canvas.
	Snip a portion of the design and attach it to the chat window.
	Open the CSS Editor sidebar to manually adjust the CSS properties of any element in the selected design.
	Open the Themes sidebar to generate, apply, edit, and delete structured design token Themes for the current Canvas.
	Open the Blocks sidebar to save and reuse designs or design elements across your projects.
	Open the Style Guides sidebar to create, apply, edit, and delete Style Guides for the current Canvas.
	Add a text node to the Canvas for annotations, labels, or notes.
	Add comments on your designs. Use comments to leave feedback or notes for yourself or your team.
	Open the Collaborate on design modal to share your canvas, themes, blocks, and style guides with your team. See 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.

Top toolbar

The top toolbar appears when you select a design. It provides five actions: Preview, Add to context, Edit, Generate, and Code design.

Preview

Opens the preview bar, allowing you to view the selected design at multiple zoom levels. You can also open the localhost version of the design in your browser.

1. Click on the design you want to preview.
2. Click the Preview button in the top toolbar.
3. Click the zoom percentage dropdown to switch between multiple zoom levels.
4. Click the icon to open the design in your browser.

Add to context

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.

Edit

It provides four options:

• Edit Design: Opens the CSS Editor sidebar so you can manually adjust the styles of the selected design.
• Extract Theme: Extracts a Theme from the selected design and saves it to the Themes sidebar.
• Change Theme: Opens a submenu with a Detach Theme option at the top, followed by a list of all available Themes. Click Detach Theme to remove the current Theme association from the design, or click any Theme to apply it.
• Change Style: Opens a submenu listing all available Style Guides. Click any Style Guide to apply it, or click Browse all to open the saved Style Guides in the sidebar.

Generate

It provides options to generate Variants or regenerate the entire design:

• Generate Variants: Generates a new Variant of the selected design. Hover and click the Generate variants option.
• Generate Versions: Generates Versions based on the selected device, breakpoint, and mode.
• Regenerate design: Regenerates the selected design.

Code design

Attaches the selected design to the chat input and sends a prompt to the agent to generate code for it.

Bottom toolbar

Icon	Action
Zoom	Click to see various zoom options for the designs.
/	Toggle between light and dark mode.
	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 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 Variants		Generate a new variant of the selected design by targeting specific aspects for improvement. See Generate Variants.
Regenerate design		Regenerate the selected design from scratch using the same original prompt.
Edit		Opens a submenu with Edit Design, Change Theme (with Enable Theme option), and Change Style (with Create new, Browse all, and saved Style Guides).
Preview		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.
Create Block		Save the selected design as a reusable Block.
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	Shortcut	Description
Add to context		Opens a submenu with Add design to context (attaches the entire design) and Add element to context (attaches only the selected element) to the chat window.
Focus	⇧2	Bring the selected element into focus on the Canvas.
Cut	⌘X	Cut the selected element.
Copy	⌘C	Copy the selected element.
Paste	⌘V	Paste a copied element onto the Canvas.
Duplicate	⌘D	Duplicate the selected element.
Delete	delete	Delete the selected element.
Viewport		Resize the element to a preset or custom dimension. Opens a submenu with Mobile (375 × 812), Tablet (768 × 1024), Desktop (1440 × 800), and Custom…
Preview		Opens a submenu with Open (opens the element in the browser) and Copy Link (copies a shareable link).
Export		Opens a submenu with Copy as PNG, Copy as HTML, Save as PNG, and Save as HTML.
Create Block		Save the selected element as a reusable Block.
Generate Image		Generate an AI image for the selected element.
Generate Video		Generate an AI video for the selected element.
Insert a block before		Insert a saved Block before the selected element.
Insert a block after		Insert a saved Block after 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.
Zoom in		Zoom into the Canvas.
Zoom out		Zoom out of the Canvas.
Focus	⇧2	Bring the selected design into focus on the Canvas.
Dark Mode / Light Mode		Toggle between dark and light mode for 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.

1. Select a device

   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.

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.

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.

Custom

The Custom option opens a dialog where you can configure exactly what to vary:

• Number of variants: Select how many variant designs to generate from the dropdown.
• Aspects to vary: Check the aspects you want Kombai to change: Layout, Colors, Typography, Text content, and Images & assets.
• Custom instructions: Provide additional instructions to guide the variation.

Click Generate variations to create the variants based on your selections.

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.