Bootstrap Studio

# JavaScript Editing

With our JavaScript editor you can turn your pretty design into a fully functional website. You get access to powerful Sublime Text-like editing with multiple cursors and keyboard shortcuts.

# JS Files

To start, you need to create a JavaScript file in the Design panel. You can do this by right clicking on the "JavaScript" group and choosing the New > JS File menu.

Create JS File

In the same menu, there are also a couple more options:

  • JSON File - Create a JSON file (opens new window) for storing data. These files can be edited in the app just like normal JS files, but are used for the purpose of holding static data.
  • JS Module - Add a MJS file to your project. This is a file type that is mostly interchangeable with regular JS files but is specifically used when writing JS modules (opens new window).
  • Folder - Create a folder for organizing your assets. Folders can be nested inside each other.

Note

If you are using OS X and right clicking the "JavaScript" label doesn't do anything, try the Ctrl + Click method, or check whether right clicking is enabled in your computer's settings.

# Importing JS Files

To import an existing JS file, just drag and drop it onto the application window or right click the JavaScript group and select Import JS File.

You can create/import as many files as you wish, and organize them into folders to make them easier to manage.

Notes

  • When importing js files, you make a copy of them in your project. Any changes made in the original file will not be displayed in your project. If this is not what you want, you can link JS files instead.
  • Keep in mind that jQuery (if enabled) and the Bootstrap JS files are imported in Bootstrap Studio automatically, there is no need to included them again.

# JS File Order

When working with multiple JS files, sometimes it's required to specify the include order. To do this, right click the JavaScript group and select Include Order.

JS Include Order

Here you can reorder the files as you need them and then click the Save button. These changes will be applied to all pages in your design.

Note

The Bootstrap framework's JS file is always included first in the page, before any other code.

# Visibility

When right clicking a JS file, selecting the Visibility option will open a dialog where you can control its visibility on the different pages of your design.

Asset Visibility

# Editing JS

To edit your JavaScript file, just double click it. This will open the file in the Editor panel in a new tab.

Create JS File

When you click the Apply button (or hit Ctrl/Cmd + S) the Preview is automatically reloaded so you can try out your changes immediately (see our tutorial about Preview and Export for more).

# Editor Settings

The built-in editor offers color highlighting, multiple selections, search & replace (Search and Replace) with regex support, and other helpful features.

There are also a number of customization option that are accessible from the editor context menu.

JS Editor Settings

These settings allow you to adjust the font size, switch between tabs or spaces, and open the JS file in an External Editor.

# Linking External JS

Bootstrap Studio allows you to link external JS files without importing them, which can be useful for things like JS libraries. Right click the JavaScript group and choose Link External JS.

Link External JS

In the dialog you can paste a URL to an externally hosted JS file and it will be added to your design. Externally linked resources are not stored as files in your project, instead they're included in <script> tags before the page's closing <body> tag.

Bootstrap Studio caches external JS files for some time. If you want to get the latest version of the linked file, you need to right click it, and choose the Refresh option.

JS File Refresh

← External Editors →