How to export designs to code

How to export designs to code

Export to Code lets you turn Visily screens into developer-ready code that you can download and use as a starting point for development.

Before you start

  1. Export to Code is a paid feature. Make sure your workspace is on a paid plan that supports code export (Pro and Business).
  2. Currently, only screens can be exported to code.
  3. Visily supports these code formats: React, Vue, and HTML

How to export designs to code

You can export your Visily designs to code in several ways. Open the board that contains the screens you want to export, then follow one of the methods below.

From the Export to Code dialog

  1. Click Export in the top-right corner.


  2. Select Export to Code from the menu to open the dialog.


  3. In the Code format section, choose the format you want to export.


  4. In the Layout mode section, choose your preferred export mode:
    1. AI layout: Generates responsive layout code with AI. This uses 15 AI credits per screen and may take longer.
    2. Static layout: Uses static, fixed layout conversion. This is faster and does not consume AI credits. 


  5. Select the screens you want to export.  You can export up to 10 screens at a time


  6. Click Export to download the ZIP file.

From the canvas

  1. On your board canvas, select the screen or screens you want to export.
  2. Access the export option in either of the following ways:
    1. Right-click the selected screens and choose Export to code from the menu


    2. Use the Export option in the selection toolbar, then choose Export to code.


  3. Choose whether to enable AI Layout.
  4. Select the code format you want to export. The ZIP file will download automatically after you select the code format.

From Inspect mode

  1. Switch your board to Inspect mode.


  2. Select the screens you want to export.
  3. Open the Code section in the Inspection panel.

  4. Choose whether to enable AI Layout, then select the code format you want to export. The ZIP file will download automatically after you select the code format.

How to use the exported files

After the export is complete, Visily downloads a ZIP file that includes the development files and a README file.
  1. Open the README file to follow the step-by-step instructions to run and preview the exported design in your browser.
  2. You can then continue working with the development files in your preferred development environment.

Notes

  1. When exporting multiple screens, each screen is packaged as a separate subfolder in the ZIP file.
  2. If your design uses custom fonts, you may need to add those fonts to your project after exporting so the design displays correctly.
  3. Exported code is intended as a development starting point. You may still need to review and adjust the code based on your project setup.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.