How to export app mockups

Four ways to export a mockup

App Builder gives you four outputs and they are not variations on the same thing. Two are pictures, one is the editable project, and one is a website. The choice depends on what the person receiving the file is going to do with it, so it is worth deciding that before you click anything.

The picture exports cover the whole project at once. The JSON export is the project itself in a form Canvasola can read back. The HTML and CSS export is a static rendering of the frames. Each one answers a different need, and the mockup tutorial covers the design work that comes before any of them.

• PNG: every frame in one image, drawn at 2x
• JPG: the same picture, compressed, with no transparency
• JSON: the project, re-importable into App Builder
• HTML and CSS: static pages with no JavaScript

Export all frames as PNG

Choose File, then Export Mockups PNG, or use the Export PNG button in the App Builder toolbar. The export lays out every frame in the project on a single canvas and draws them at 2x scale, so a 390 by 844 mobile frame becomes an image of 780 by 1688 pixels.

The file downloads as canvasola-mockups.png. The frames appear in the order they sit in the project, each with its name above it, and the stage behind them uses the current theme background, so the picture looks like the editor rather than a stack of cut-out screens.

Two details are worth planning around. The export resolves auto-layout before it draws, so what you see is what the frames really look like, and the 2x scale means the picture stays sharp on a high density screen and in a slide deck.

• The file is named canvasola-mockups.png
• Every frame in the project is included
• Frames are labeled with their names
• The current theme supplies the background

Export a single frame as JPG

The honest detail here is that the JPG export in the File menu covers the whole project, exactly as the PNG does, and the file is canvasola-mockups.jpg. It is the same image with the frames on it, saved as a JPEG, which is a good choice for email and for document pages where the transparency of a PNG buys nothing.

To take one frame on its own, open the frame's own menu and choose Export frame PNG. That writes a separate file named after the frame, for example login.png, drawn at 2x with that frame's background and components but none of the others.

If you need that single frame as a JPG, export the PNG and convert it in an image editor. A JPG of one screen is a common request for a slide or a ticket, and doing it in two steps is quicker than rebuilding the project with a single frame in it.

• Export Mockups JPG covers all the frames at once
• Export frame PNG takes one frame on its own
• The single frame file is named after the frame
• Convert the PNG if the recipient needs a JPG

Export JSON you can re-import

Choose File, then Export Mockups JSON, or use the Export JSON button. The file is canvasola-mockups.json, and it holds the frames, the components, the layout, the constraints and the theme, which makes it the project rather than a rendering of it.

The point of this export is the round trip. App Builder can read the file back in, so you can hand the JSON to a colleague, they import it, and they carry on editing the same screens with the same components and the same layout. Importing replaces the current mockup project, and the app asks for confirmation first when you already have frames on the canvas.

The JSON is also the format to keep when the design will keep changing, because a picture of a screen cannot be changed at all. The project backup guide covers the larger .canv file, which carries the mockups together with the rest of the project.

• The file is named canvasola-mockups.json
• It can be imported back into App Builder
• The import asks before it replaces existing frames
• The file keeps the theme and the constraints

Export static HTML and CSS

Choose File, then Export Mockups HTML/CSS, or use the Export HTML/CSS button. The file is canvasola-wireframes.html, and it is a single HTML document: each frame becomes a group of absolutely positioned divs with inline styles, and a small stylesheet at the top of the file holds the theme tokens.

The result opens in any browser and looks like the design, which is why it is the useful export when you want someone to look at the screens without installing anything. The light and dark toggle in the App Builder toolbar decides which token set the export uses, so set the theme the way you want it before you export.

It is also the export to use when the mockup has to become real code. The HTML is ordinary markup with absolute positioning, so a developer can read the structure and rebuild the screen properly with a layout system, a component library and real content.

• The file is named canvasola-wireframes.html
• Frames become absolutely positioned divs with inline styles
• A small embedded stylesheet carries the theme tokens
• The toolbar theme toggle decides which tokens are used

Know what the HTML cannot do

The HTML export contains no JavaScript at all, and nothing in it responds. There is no navigation between screens, no animation, no state and no behavior, because a static file cannot have any of those. It is a picture of the screens in a form you can read and edit as code.

The prototype links you can set in the editor are frame-level, and they are used by Present mode inside Canvasola, which is keyboard driven. The exported file does not carry them, so if a handover expects something that responds, the HTML export is the wrong file and the honest thing to say is that the design is delivered as static screens.

For the same reason, do not promise interaction in the handover. The prototype guide explains what Present mode does inside the app, and the App Builder guides cover the rest of the workflow.

• No JavaScript ships with the HTML export
• No screen-to-screen navigation is included
• Prototype links stay inside Present mode
• Deliver it as static screens and say so plainly

Note: What you can promise is the visual design: type, spacing, color, component choice and layout. That is what the HTML file demonstrates, and it is what a developer needs to rebuild the screen properly.

A checklist you can reuse

• The export was chosen based on what the recipient will do with it
• The PNG export includes every frame in the project
• A single screen was taken with Export frame PNG when one was needed
• The JSON was used when the design still has to change
• The theme was set before the HTML and CSS export ran
• The HTML file was opened in a browser and read once
• The handover says plainly that the HTML has no interaction

Common mistakes to avoid

• Promising a working prototype. The HTML export has no JavaScript and nothing responds. Say that the design is delivered as static screens, and use Present mode to walk through the flow in the app.
• Sending a PNG to a developer. A picture cannot be changed. Send the JSON when the screens still have to move, and the HTML and CSS file when somebody has to read the design as code.
• Forgetting the theme toggle. The light and dark toggle changes the HTML export as well as the editor. Check which theme is active before you export, or the file lands in the other one.
• Importing JSON over live work. An import replaces the mockup project in the editor. Save the project file first, and confirm the import when the app asks.

Frequently asked questions

Which export should I send to a developer?

The HTML and CSS file, with the JSON beside it. The HTML shows the frames as ordinary markup with absolute positioning, so somebody can read the structure and rebuild the screen properly, and the JSON keeps the project editable if they want to import it and work inside App Builder instead.

Does the exported HTML include the prototype links?

No. Prototype links are set per frame in the editor and used by Present mode inside Canvasola, which is keyboard driven. The exported file is a static document, so it carries the screens and their styling but none of the links between them, and it ships with no JavaScript at all.

Can I import a PNG back into App Builder?

No, a picture cannot be read back into a project. The JSON export is the one that comes back in: choose the file, confirm the import, and the frames, components, layout and theme return to the editor as they were.

What resolution is the PNG export?

Every frame is drawn at 2x, so the default 390 by 844 mobile frame becomes 780 by 1688 pixels in the image, and a 1280 by 800 web frame becomes 2560 by 1600. The same file also contains the space between the frames and the background, since it is one picture of the whole project.

This guide is part of the export and import collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.