Use external JS libraries

Check out how to use and connect external JS libraries to UI Bakery
In UI Bakery, you can use either your own or any public JS library. Also, there are pre-built libraries in UI Bakery as well: moment.js and lodash, that can be used straight away and don't need to be configured additionally.

Using moment.js

To use moment.js in your app, no need to configure it additionally, as it comes pre-built. Just follow these simple steps:
  1. 1.
    In the Builder mode, Add a new action with Code type and paste the code :
return {{ moment().format("dddd, MMMM Do YYYY, h:mm:ss a") }};
2. Run Action, then check the Result tab - you will see the actual date as an outcome.

Using moment.js plugins

The moment.js is pre-loaded, however, if you need to use some additional plugins, you need to setup both libraries to be able to use the plugins. Let's add a moment-timezone plugin that helps with the timezone manipulations.
  1. 1.
    Copy the script tag of moment.js and the required plugin and paste it into the Code tab of the application's settings:
2. Click Save changes.
3. In the action, before using moment.js, you'll now need to require both of the libraries:
var moment = require('moment'); require('moment-timezone');
const now = moment();
return'America/Los_Angeles').format('ha z')

Using lodash

Here's an example on how to use lodash library for the case when you need to filter a table by several keys of the selected row of another table. Since it comes pre-built, no need for additional setup.
Add an action with Code type and paste the sample code:
const data = {{ }};
return _.filter(
{{ }},
_.matches({ 'userId':, 'taskType': data.taskType }),

Connecting and using 3rd party JS library

Let’s review an external JS library connection and usage on canvas-confetti library example. The case is that upon successful form submission the user gets a confetti blast
  1. 1.
    Start with copying <script> tag
<script src="[email protected]/dist/confetti.browser.min.js"></script>
2. Save the Changes
3. Add a new Form to the canvas
4. Add a new workflow:
  • the first step should be Update Row
  • next step is the Code step. Specify the sample code:
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
Please note that there are several confetti code options listed on the site, so you can choose any of those that suits you best
  • the last step would be Execute Action - select the step that loads data in the Table
5. Next, go to the Triggers tab of the form and assign the newly created action to the On Submit trigger.
6. Publish the changes and check the submission now 🎉