Skip to main content

Export a design as PNG or HTML

You can also export your designs as an image or as HTML. This is particularly useful when you want to iterate on the design externally. Once done, you can bring the design back to Kombai and continue the design iteration or generate code.

For this walkthrough, we will start with a landing-page concept, export it as an HTML and make some changes using another tool, bring the design back to Kombai to continue the design iteration, and finally generate code for the design.

Before you begin

You’ll need to have:

  1. The Kombai desktop app or the IDE extension installed. See the Kombai Quickstart.
  2. A design opened in a Canvas. If you do not have a design, prompt Kombai to make one. Kombai opens the generated design in a new Canvas automatically.

Export the design

1. Open the export menu

On the Canvas, right-click the design you want to export. Make sure you right-click the design itself and not an element inside design. Kombai shows different menus when you right-click an element inside a design.

If Export doesn’t appear in the right-click menu, you may have selected an element within the design. Press Esc, then right-click the design again.

Select Export to open the export submenu.

2. Choose the format and action

The Export submenu contains four options: Save as PNG, Save as HTML, Copy as PNG, Copy as HTML.

Choose the option that matches what you need next. For this example, we will Save as HTML.

Note: Exporting the design as HTML allows you to bring the design back to Kombai for further iteration.

Make the external change and import the exported design back to Kombai

All designs in Canvas are created as HTML code. So you can also bring saved HTML designs back onto a Canvas. Right-click an empty area of the Canvas or click + Add on the top-left section of canvas, then select Import designs to import one or more .html files from disk as new designs. Alternatively, you can also copy the HTML file and paste it onto the canvas.

Next steps