Skip to main content

Use External JS Libraries

You can install custom libraries to help you build complex applications and business logic. Custom Javascript libraries enable complex use cases like PDF generation, CSV Parsing, & authentication.

How To Use JavaScript Libraries

Install external library​

Appsmith provides a set of recommended libraries that you can install by clicking the + icon next to libraries in the entity explorer and clicking on the install icon next to the library. If you want to install a specific library that you found online, the steps are:

  • Find a compatible distribution of the library on a popular CDN service like jsDelivr or UNPKG
  • Copy the URL to its index file
  • Navigate to the Explorer tab
  • Click the + sign next to Libraries
  • Paste the URL into the designated field
  • Click Install

Example URL:

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

Library compatibility​

Appsmith only supports libraries that have UMD builds. 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

❌ Invalid 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

Appsmith also does not support libraries

  • Libraries that manipulate the DOM
  • Libraries that reply on making XHR requests
  • Libraries that try to invoke or access certain browser methods
    • setInterval
    • clearInterval
    • localStorage
    • setImmediate
    • navigator

Accessing installed libraries​

External libraries once installed can be accessed as an object anywhere you can write Javascript in Appsmith. For information about the signature of the JavaScript libraries, see their official documentation.

Example​

You can install excelJS library using this URL

https://www.jsdelivr.com/package/npm/exceljs

You can write code to create a workbook in a JS function as below

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");
};