Preloaded JavaScript libraries

Information about third-party JavaScript libraries preloaded for use in web apps.

Retool automatically imports the following utility libraries for use across Retool. These libraries are available for use in JavaScript queries and within \{\{ + + \}\} .

Name	Alias	Description
Lodash	_	A modern JavaScript utility library delivering modularity, performance & extras.
Moment.js	moment	Parse, validate, manipulate, and display dates and times.
UUID	uuid	Generate and validate RFC-compliant UUIDs.
Numbro	numbro	Convert, format, and manipulate numbers.
PapaParse	Papa	Parse CSV data, and convert between CSV and JSON.
i18next 1	i18n	Manage the translation of a web application.

Footnotes

1. Available in web apps only. Not available in workflows or mobile. ↩

Lodash

Lodash is a modern JavaScript utility library delivering modularity, performance, and extras. It is available using the _ alias.

Chunk an array

Live Editor

function chunkArray() {
  
  const array = query1.data; // [1, 2, 3, 4, 5, 6, 7, 8]
  const chunkedArray = _.chunk(query1.data, 2); // [[1, 2], [3, 4], [5, 6], [7, 8]]
  return chunkedArray[2][1];

}

Result

Loading...

Convert string to camel case

Live Editor

function camelCase() {
  
  const customerName = getUsers.data[1].name; // Jane Smith
  return _.camelCase(getUsers.data[1].name);

}

Result

Loading...

Moment

Moment.js is a library for parsing, validating, manipulating, and displaying dates in JavaScript. It is available using the moment alias.

Format date

Live Editor

function adjustDate() {

  const selectedDate = dateInput1.value // Current date
  const futureDate = moment(selectedDate).add(7, 'days'); // Add 7 days

  return futureDate.format('MMMM Do YYYY');
  
}

Result

Loading...

Parse date

Live Editor

function parseDate() {

  const selectedUser = table1.selectedRow.createdAt; // Created date from selected table row

  return moment(selectedUser, 'YYYY-MM-DD').format('MMMM Do YYYY');
  
}

Result

Loading...

UUID

UUID is a library for generating universally unique identifiers (UUID). It is available using the uuid alias.

Generate v4 UUID

Live Editor

function generateUuid() {
  
  return uuid.v4();

}

Result

Loading...

Validate UUID

Live Editor

function validateUuid() {
  
  if (uuid.validate('9db0126a-271b-4137-8842-c47f4257080d')) {
    return 'Valid';
  } else {
    return "Invalid";
  }

}

Result

Loading...

Numbro

Numbro is a library for transforming number values. It is available using the numbro alias.

Add thousands separator

Live Editor

function thousandsSeparator() {
  
  return numbro(1000).format({thousandSeparated: true});

}

Result

Loading...

Format as percentage

Live Editor

function validateUuid() {
  
  return numbro(0.423).format({
    output: "percent",
    mantissa: 1
});

}

Result

Loading...

PapaParse

PapaParse is a library for parsing CSV files. It is available using the Papa alias.

Convert CSV to JSON

Live Editor

function thousandsSeparator() {

  const csvData = `Order ID,Customer Name,Product,Quantity,Order Date
  1,John Doe,Widget A,3,2024-07-10
  2,Jane Smith,Gadget B,2,2024-07-11
  3,Jim Brown,Thingamajig C,5,2024-07-12
  4,Susan White,Doohickey D,1,2024-07-13
  5,Emily Black,Whatsit E,4,2024-07-14`;

  const jsonData = Papa.parse(csvData); // Convert CSV to JSON

  const customer = jsonData.data[2][1]; // JSON available on `data` property

  return customer;

}

Result

Loading...

Convert JSON to CSV

Live Editor

function thousandsSeparator() {

  const jsonData = [ [ "Order ID", "Customer Name", "Product", "Quantity", "Order Date" ], [ " 1", "John Doe", "Widget A", "3", "2024-07-10" ], [ " 2", "Jane Smith", "Gadget B", "2", "2024-07-11" ], [ " 3", "Jim Brown", "Thingamajig C", "5", "2024-07-12" ], [ " 4", "Susan White", "Doohickey D", "1", "2024-07-13" ], [ " 5", "Emily Black", "Whatsit E", "4", "2024-07-14" ] ];

  return Papa.unparse(jsonData);

}

Result

Loading...

i18next

i18next is an internationalization framework that you can use for translation management of a web application. It is available using the i18n alias.

i18n is available in web apps only. It is not available in mobile apps or workflows.

Live Editor

function I18nextExample() {
  const [text, setText] = React.useState("");

  React.useEffect(() => {
    i18n.init({
      lng: "en",
      resources: {
        en: { translation: { greeting: "Hello, world!" } },
        fr: { translation: { greeting: "Bonjour le monde!" } },
      },
    }).then(() => {
      setText(i18n.t("greeting"));
      i18n.changeLanguage("fr").then(() => {
        setText(i18n.t("greeting"));
      });
    });
  }, []);

  return <div>{text}</div>;
}

Result

Loading...