Front-end assets and tools
Extension templates can use the preloaded JavaScript and CSS libraries, and can ship their own files within the package
2 minute read
Libraries you can use
These are loaded by default, so any template can call them:
- Bootstrap, a CSS framework with Bootstrap Icons.
- jQuery, for general-purpose scripting.
- Highcharts, for charts.
- D3, for data visualization beyond charting.
- DataTables, for sortable, searchable, paginated tables.
- Selectize.js, for type-ahead and multi-select fields.
- Lodash, for collection and object helpers.
Extensions written for Bootstrap 3 need migrating. See Upgrading to 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:
/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:
<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: Package files, declaring URLs, and how packages are zipped and installed.
- UI elements that support extensions: The decorator and arguments for each extension type.
- Upgrading to Release 2026.3: Migrating templates, UI extensions, and JavaScript from Bootstrap 3 to Bootstrap 5.