# Using JS libraries
In UI Bakery, you can use either your own or any public JS library. \
Also, we have a number of libraries included out of the box - [moment.js](https://momentjs.com/docs/#/use-it/), [lodash](https://lodash.com/), and [i18next](https://www.i18next.com/). You can use these libraries straight away without any additional configurations.
In this article, we'll explore how you can use the included libraries and connect other external libraries via the *Custom code* tab.
## Libraries included in UI Bakery
The *moment.js* and *lodash* libraries are preloaded in the JavaScript Code step. You can use them to manipulate dates and other values.\
For example, to transform date to a specific format:
```javascript
return {{data}}.map(item => {
return {
...item, // put all the keys from the original object
created_at: moment(item.created_at).format('MMMM Do YYYY, h:mm:ss a')
};
});
```
Or to get deep value from an object:
```javascript
return _.get({ data }, 'birth.place.country', 'n/a');
```
We'll dive into more details about these libraries as well as *i18next* in the following sections.
### Using moment.js
To use [moment.js](https://momentjs.com/docs/#/use-it/) in your app, you don't need to configure it additionally as it comes pre-built. Simply follow the steps below:
1. In your app, create a new action of the **JavaScript Code** type and specify the following code:
```javascript
return {{ moment().format("dddd, MMMM Do YYYY, h:mm:ss a") }};
```
2. Run the action and check the **Result** tab - you will see the actual date displayed.
#### Utilizing moment.js plugins
If you need to utilize some additional plugins, you need to set up both the library and the plugins you need. \
Below is an example of how you can add a *moment-timezone* plugin that helps with timezone manipulations. Check it out:point\_down:
1. Navigate to the **Custom code** tab and specify there the script tags of *moment.js* and the *timezone* *plugin*:
2. Now, create a **JavaScript Code** action and specify the following code requiring both of the libraries:
```javascript
var moment = require('moment'); require('moment-timezone');
const now = moment();
return now.tz('America/Los_Angeles').format('ha z')
```
3. Run the action and check the **Result** tab.
### Using lodash
To use [lodash](https://lodash.com/) in your app, just like with moment.js, you don't need to configure it additionally as it comes pre-built. \
Below is an example of using lodash when you need to filter a table by several keys of the selected row of another table. You just need to create a **JavaScript Code** action step and specify the following sample code:
```javascript
const data = {{ ui.table.selectedRow.data }};
return _.filter(
{{ actions.list2.data }},
_.matches({ 'userId': data.id, 'taskType': data.taskType }),
);
```
### Using i18next
[i18next](https://www.i18next.com/) also comes pre-built so no additional configurations are required. You can use this library to add translations to your application.
Check out this example of utilizing i18next in your app:point\_down:
{% content-ref url="connect-external-js-library/internationalization-i18n-and-localization-translating-ui-bakery-apps" %}
[internationalization-i18n-and-localization-translating-ui-bakery-apps](https://docs.uibakery.io/how-tos/data/connect-external-js-library/internationalization-i18n-and-localization-translating-ui-bakery-apps)
{% endcontent-ref %}
## External third-party JS libraries
As we mentioned before, you can also connect any external JS library you need and use it in your app. In this section, we'll review an example how you can do that.
{% hint style="info" %}
If you need to use a *Node.js npm* library on the **server side**, see [UI Bakery Automations](https://docs.uibakery.io/extras/automations).
{% endhint %}
### Use case: Add a confetti blast upon Form submission
Here we'll use the [canvas-confetti library](https://github.com/catdad/canvas-confetti) as an example - upon successful Form submission, users will get a confetti blast.
Follow the instruction below to learn how to do that:
1. Start by locating the library you need on a public JavaScript CDN, for example, .
2. Click on the library to open it and copy the provided *JavaScript tag*:
```html
```
We'll be using library as an example.
IMPORTANT:Expand and read the information below before proceeding to the next step.
**It is essential to ensure that you are loading the appropriate build for browser usage.** The recommended approach is to load the minified UMD build from a CDN as opposed to the `index.js` file. This is because the index.js file may contain `imports` and `require` calls that require preprocessing before they can be utilized in the browser.
The naming conventions for builds that are suitable for loading in the browser vary among libraries, but are typically named following the "*umd/\.min.js*", "*browser/\.min.js*" or simply "<*library>.min.js*" format in the root folder.
For example, when using React:
🟢 You would want to use the file located at
🔴 Instead of , which contains require calls.
It is important to note that **some libraries may not have a browser-compatible** build available. An example of such library - .
Linking to the incorrect file may result in errors such as "require is not a function" or "module is undefined" in the browser console when starting your application. A comprehensive list of libraries and their respective browser-compatible builds can be found on the website.
Additionally, some libraries may be available as ESM builds and not available as UMD builds. If a library is not working as expected, you can check for the availability of ESM builds on , such as the example of library:
🟢 ESM **will work** - `import yup from '`[`https://cdn.jsdelivr.net/npm/yup@0.32.11/+esm`](https://cdn.jsdelivr.net/npm/yup@0.32.11/+esm)`'`
🔴 UMD generated by jsdelivr **will not work** -
3. Now, navigate to the **Custom code** tab in the Builder's footer and paste the copied tag there.
4. Add a **Form** component to the working area.
5. Next, create a new action consisting of two steps:
1. For the **first step**, add a *Create Row* action.
2. For the **second step**, add a *JavaScript Code* action and specify the following code:
```javascript
confetti({
particleCount: 500,
spread: 300,
origin: { y: 0.6 }
});
```
{% hint style="info" %}
There are several [confetti code options](https://www.kirilv.com/canvas-confetti/) listed on the site so you can choose whichever suits you best.
{% endhint %}
6. Finally, navigate to the **Triggers** section of the Form and assign your newly created action to the *On Submit* trigger.
7. Submit your changes and enjoy the confetti! :tada:
{% @arcade/embed flowId="zgdinSd1e50KeBmFXE7a" url="" %}
