How does Custom Javascript Libraries + NPM modules work?

I am trying to add a custom library to our Retool environment which isn’t working for me. I am following the instructions here https://docs.retool.com/docs/custom-js-code.

I am adding library, https://cdnjs.cloudflare.com/ajax/libs/voca/1.4.0/voca.min.js, though after adding I can’t figure out how to access it. What’s the secret here?

For custom libraries, they need to be hosted on a CDN which it looks like you’re good on so far. Depending on the library, you’ll access it inside of {{ }} tags or Run JS Code type queries. For the built-in Moment.js and PapaParse libraries, their functions are accessed with {{ moment() }} and {{ Papa.parse() }}.

A big qualifier here is that all JS in retool runs inside of a sandbox, so if the library won’t work property if any of it’s functions depend on listening to user input, use jQuery, listen to events on the Retool page, etc.

New user. I’m having the same issue. I’ve added the https://cdnjs.cloudflare.com/ajax/libs/voca/1.4.0/voca.min.js library to Organization Settings > Advanced > Libraries, but I can’t figure out how to call the slugify() function from the library.

@alex-w, would you be willing to provide a code snippet indicating where and how to call that function or any other from the voca library the OP mentions?

I want to slugify the value of one of my text inputs, like:

const slugify = require('voca/slugify');
slugify( {{ textinput1.value }} );

Hi James!

Just checked out the Voca library, it looks like their functions are all built off of v like v.slugify(). All of the voca methods should be available after adding the library, though it looks like we do still underline the custom libraries identifier in red, while the green highlight and returned value is correct. I’ll look into getting that fixed!

You should be able to use any of the methods on their docs. At first glance, I don’t see any conflicts with the JS sandbox.

Here are some quick working examples:


1 Like