Previewing and Exporting your Designs

Bootstrap Studio has two powerful features - Preview and Export, with which you can test your design in real time across multiple browsers, and export your work as a beautiful stand-alone website.

Preview

With Preview, you can open your design in multiple web browsers and devices on the local network, and every change you make within the app will be shown instantaneously everywhere. Here is how to start it:

  1. Hit the Preview button from the Main toolbar (or press the Ctrl/Cmd + P keyboard shortcut).
  2. In the dialog that is shown, activate the preview checkbox and copy one of the URLs.
  3. Open this URL on the devices/browsers that you wish to test. This URL is only available in your local network and can't be seen from the wider internet.

Now you can experiment with a design and test it at the same time. No need to switch to a web browser and hit the refresh button, which is a great productivity increase. In a team setting, Preview is a great tool for collecting feedback from colleagues.

Exporting

Once you are happy with a design, you can export it as a regular static website, consisting of HTML, CSS, JS and images. Just hit the Export button and choose a folder on your computer.

You can also choose to minify your JS and CSS, or to use CDN versions of jQuery, Bootstrap and the icon fonts for extra performance. For the technically minded folks, there is also the option for configuring an Export Script.

After you hit the Export button, Bootstrap Studio exports your design as clean and well-structured HTML. It looks as if a professional front end developer had written it by hand!