Skip to main content

Use External JS Libraries

The Appsmith platform includes built-in JavaScript utility libraries, which can be used to work with data within {{ }} bindings or within JSObjects. You can also install and use other custom libraries to manipulate or transform data. These external libraries provide additional methods to help you build complex applications and business logic.

How To Use JavaScript Libraries

Custom JavaScript Libraries​

Custom Javascript libraries provide far more advanced capabilities for complex use cases like PDF generation, CSV Parsing, analytics, authentication, error logging, etc. You can browse and install a JS library of your choice by pasting a valid URL to the library’s index file.

Use a URL that points to the library's index file. Ensure that your library supports a UMD build for it to work on Appsmith. Here’s the basic pattern of a UMD build. Most libraries have a .min.js under the root, /umd or /browser folders. If a library you wish to use doesn't support a UMD build, you may use browserify to generate one and host it in a CDN of your choice.

Library compatibility​

Appsmith is only compatible with libraries that support UMD builds. If a library supports the UMD build format, the source code of a library’s index file should conform to this basic pattern. The index file for most compatible libraries can be found under the root, /umd or /browser folders and have a .min.js file extension. If a library you wish to use doesn't support a UMD build, you may use browserify to generate one and host it in a CDN of your choice.

✅ Valid URL: https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js

❌ Valid URL. Unsupported build format: https://cdn.jsdelivr.net/npm/uuid@9.0.0/dist/index.js

❌ Invalid URL. Doesn't point to the index file: https://www.jsdelivr.com/package/npm/datejs

Install external library​

Appsmith makes it easy to install an external JavaScript library with just a few simple steps

Installing External JavaScript libraries

There is a selection of recommended libraries that you can install by simply clicking on the install icon. However, if you want to install a specific library with a URL, the process is just as simple. To install other libraries:

  • Find a compatible library on popular CDN services like jsDelivr or UNPKG.
  • Copy the URL to its index file and paste it on Appsmith to start the installation.
  • Navigate to the Explorer tab
  • Click the + sign next to Libraries.
  • Paste the URL into the designated field. For example:
https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js
  • Click Install.

Using external libraries​

External libraries can be used within {{ }} in the same way JavaScript is used elsewhere in the application. For more information about the signature of the JavaScript libraries, see their official documentation.

Examples​

Here are some examples of how to use external JavaScript libraries:

lodash​

Following is an example of the Lodash _.map utility, in use. fetchFruits is the name of the API / Query

{
  {
    _.map(fetchFruits.data, (fruit) => {
      return { label: fruit.name, value: fruit.id };
    });
  }
}

moment​

An example of the moment.js format utility, in use in a query.

insert into users (name, email, createdDate) values
('John', 'john@appsmith.com', {{moment().format("YYYY-MM-DD")}})

excelJS​

You can install excelJS library using this URL .

createWorkbook: async () => {
  const workbook = new ExcelJS.Workbook();

  workbook.creator = "Tomato";
  workbook.lastModifiedBy = "Tomato";
  workbook.created = new Date();
  workbook.modified = new Date();
  workbook.calcProperties.fullCalcOnLoad = true;

  const worksheet = workbook.addWorksheet("Tomato page 1", {
    properties: { tabColor: { argb: "#FF0000" } },
    pageSetup: { paperSize: 9, orientation: "landscape" },
  });

  worksheet.getCell("A1").value = "Hello, World!";
  worksheet.getCell("B1").value = "What time is it?";
  worksheet.getCell("A2").value = 7;
  worksheet.getCell("B2").value = "12pm";

  const buf = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buf], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  });
  const url = URL.createObjectURL(blob);

  await download(url, "test.xls");
};

General notes​

You may not be able to install or use methods of certain libraries due to platform limitations:

Troubleshooting​

If you are experiencing difficulties with connecting external libraries, you can refer to the JavaScript Errors troubleshooting guide for assistance or seek help on Discord. You can also ask questions and get support on the community forum.