Skip to main content
Version: 2.25.0

Import external libraries using RunJS

ToolJet allows you to integrate external JavaScript libraries into your application using RunJS queries. This guide walks you through the process of importing and utilizing these libraries effectively.

Choosing Libraries​

You can import various JavaScript libraries using their Content Delivery Network (CDN) links. Find the CDN links for your desired open-source projects on jsDelivr.

Creating a new app and runJS query​

Start by creating a new application in ToolJet. Then, proceed to create a new RunJS query from the query panel.

Create a new RunJS query

Importing Libraries​

Here's a step-by-step guide to importing libraries and displaying an alert upon successful import.

// Function to add script dynamically
function addScript(src) {
    return new Promise((resolve, reject) => {
        const scriptTag = document.createElement('script');
        scriptTag.setAttribute('src', src);
        scriptTag.addEventListener('load', resolve);
        scriptTag.addEventListener('error', reject);
        document.body.appendChild(scriptTag);
    });
}

try {
    // Importing MathJS
    await addScript('https://cdn.jsdelivr.net/npm/[email protected]');

    // Importing FlattenJS
    await addScript('https://cdn.jsdelivr.net/npm/[email protected]/lib/flatten.min.js');

    // Showing a success alert
    await actions.showAlert("success", 'Mathjs and Flatten imported');
} catch (error) {
    console.error(error);
}

After creating and running the query, an alert should pop up with the message "Mathjs and Flatten imported."

tip

Enable the Run this query on application load? option to make the libraries available throughout the application as soon as the app is loaded.

Import Successful

Examples​

1. Flattening JSON Objects using FlattenJS​

Create a new RunJS query using the Flatten library (imported earlier) to flatten a JSON object.

return flatten({
    key1: {
        keyA: 'valueI'
    },
    key2: {
        keyB: 'valueII'
    },
    key3: { a: { b: { c: 2 } } }
});

Preview the output in the query manager or run the query to see the flattened JSON.

Use FlattenJS

2. Computation using MathJS​

Create another RunJS query utilizing the MathJS library for a calculation.

return math.atan2(3, -3) / math.pi;

Preview the output, or Run the query to see the result of the calculation.

Use MathJs

This guide provides a clear and detailed walkthrough for importing external JavaScript libraries into your ToolJet application.