# Front-end assets and tools

> Extension templates can use the preloaded JavaScript and CSS libraries, and can ship their own files within the package

---

Site [llms.txt](/llms.txt)

---

## Libraries you can use

These are loaded by default, so any template can call them:

- [Bootstrap](https://getbootstrap.com/docs/5.3/), a CSS framework with [Bootstrap Icons](https://icons.getbootstrap.com/).
- [jQuery](https://jquery.com/), for general-purpose scripting.
- [Highcharts](https://www.highcharts.com/), for charts.
- [D3](https://d3js.org/), for data visualization beyond charting.
- [DataTables](https://datatables.net/), for sortable, searchable, paginated tables.
- [Selectize.js](https://selectize.dev/), for type-ahead and multi-select fields.
- [Lodash](https://lodash.com/), for collection and object helpers.

Extensions written for Bootstrap 3 need migrating. See [Upgrading to Release 2026.3](/docs/cmp/configure/administration/maintain/upgrade/release-2026-3/).

## Ship your own CSS, JavaScript, and images

Keep an extension's own files inside its package, so they travel with it when exported and imported. Place them in a `static` folder in the package directory, for example:

```bash
/var/opt/cloudbolt/proserv/xui/my_ext/static/css/custom.css
/var/opt/cloudbolt/proserv/xui/my_ext/static/js/custom.js
/var/opt/cloudbolt/proserv/xui/my_ext/static/img/logo.png
```

Go to **Admin** > **Manage UI Extensions** and select **Sync Static Assets**. This makes the files available to the web server. Assets do not need an Apache restart, unlike changes to your Python code.

Reference the files from a template with `STATIC_URL` followed by the package name, then the path within the `static` folder:

```html
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}my_ext/css/custom.css"/>

<script type="text/javascript" src="{{ STATIC_URL }}my_ext/js/custom.js"></script>

<img src="{{ STATIC_URL }}my_ext/img/logo.png" alt=""/>
```

A file a browser cannot find usually indicates that Sync Static Assets has not run since the file was added.

## Related

- [Package structure](/docs/cmp/developer-resources/ui-extensions/package-structure/): Package files, declaring URLs, and how packages are zipped and installed.
- [UI elements that support extensions](/docs/cmp/developer-resources/ui-extensions/supported-elements/): The decorator and arguments for each extension type.
- [Upgrading to Release 2026.3](/docs/cmp/configure/administration/maintain/upgrade/release-2026-3/): Migrating templates, UI extensions, and JavaScript from Bootstrap 3 to Bootstrap 5.