Execute JavaScript code in workflows

JavaScript is the primary method for manipulating and transforming data in Retool. Use Code blocks to write custom JavaScript code that can transform data and perform complex logic. You can also use popular JavaScript libraries to further extend the functionality of workflows.

Add a JavaScript Code block

To use JavaScript in a workflow, add a Code block to the canvas and select JavaScript.

Write and execute JavaScript code

You can build complex logic or manipulate data using JavaScript methods like map(). For example, you could transform an array of account records to combine separate first and last name values.

const data = query2.data;

return data.map((customer) => ({
  fullName: customer.first + " " + customer.last,
  emailAddress: customer.email,
}));

In general, Retool recommends you visually construct conditional statements with Branch blocks or filter query results using Filter blocks.

JavaScript Code blocks can also call functions—reusable blocks that operate outside the workflow control flow. Functions allow your workflow to perform actions only when required and can receive parameters to use.

Configure JavaScript libraries

Retool includes support for a selection of popular JavaScript libraries which you can use in a workflow. You can browse and add libraries, configure their imports, and use them in your workflow.

Manage libraries

Navigate to the Libraries tab to manage JavaScript libraries. This tab lists all currently enabled libraries and their version. Select a library to view more information, configure imports, or view its documentation.

Add a library

📘

Retool does not currently support adding custom libraries.

Retool enables a selection of libraries by default, such as numbro and lodash. Click the Add button to browse all available libraries. You can search the list of libraries and enable them by clicking the checkbox.

Remove a library

To remove a library from your workflow, click the ••• button for the library and select Delete. Before removing a library, ensure it is not in use anywhere in your workflow to prevent run errors.

Configure library imports

Retool automatically configures the necessary imports for JavaScript libraries. You can edit this configuration if you want to use destructured imports or change variables.

Use libraries in a workflow

You can reference libraries using JavaScript Code blocks or as inline JavaScript in other blocks using {{ }}. You can also use require() to include libraries directly within JavaScript Code blocks.

For example, you could use marked to convert Markdown into HTML. This can be useful to generate reports and send them as HTML-formatted rich emails.

const convert = require('marked')

return convert.parse(getReadme.data.message);