# How to import code packages in the JavaScript column

**URL:** <https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466>\
**Category:** Ask for Help\
**Created:** [November 13, 2021, 4:05pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466 "2021-11-13T16:05:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [November 13, 2021, 4:05pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/1 "2021-11-13T16:05:19Z")

</div>

The [JavaScript column](https://www.glideapps.com/plugins/hell-yes-code) already includes [`lodash`](https://lodash.com/), which provides a value named `_` with many useful utility functions. `lodash` is the most popular JavaScript library in the world, so we included it by default even if you do not use it.

@Jeff_Hager recently [requested](https://github.com/glideapps/glide-code-columns/issues/82) `mathjs` support in the JavaScript column. `mathjs` is another top JavaScript library, but including it by default means that every app that uses the JavaScript column would load this library as well, even though very few people need it.

Today I discovered how you can load _any_ JavaScript package within the JavaScript column using [skypack.dev](https://www.skypack.dev/) and a newer JavaScript feature called `async import`.

## Example: Load `mathjs` to evaluate a complex expression:

```js
// Use await import to load the package:
const mathjs = await import("https://cdn.skypack.dev/mathjs");

// Use any function in the package:
return mathjs.evaluate("sin(45 deg) ^ 2");

```

Alternatively, you could use JavaScript object destructuring syntax to import `evaluate` more specifically:

```js
const { evaluate } = await import("https://cdn.skypack.dev/mathjs");
return evaluate("sin(45 deg) ^ 2");

```

Instead of evaluating a constant string, pass a parameter to give your app calculation superpowers!

```js
const { evaluate } = await import("https://cdn.skypack.dev/mathjs");
const result = evaluate(p1);
return typeof result === 'number' ? result : result.toString();

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/5/b5977de5f18c264d33ecbaad83818abc3a1b061c.png)

You can search for thousands of popular packages on skypack and import them in this way.

Please share any interesting things you do with this power!

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [November 13, 2021, 4:22pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/2 "2021-11-13T16:22:07Z")

</div>



---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [November 13, 2021, 5:04pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/3 "2021-11-13T17:04:21Z")

</div>

Suddenly I’m feeling like less than an expert 😵‍💫

Time to learn me some JavaScript!

---

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [November 13, 2021, 5:42pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/4 "2021-11-13T17:42:54Z")

</div>

[https://getmimo.com/](https://getmimo.com/) is a good start. I used it after I had my daughter to learn the basics in between sleepless nights and diapers 🥴

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 14, 2021, 4:12am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/5 "2021-11-14T04:12:28Z")

</div>

> [@david](#):
>
> Today I discovered how you can load _any_ JavaScript package within the JavaScript column using [skypack.dev](https://www.skypack.dev/)

I could do this for hours on end… 🤣

---

<div class="post-metadata">

**Author:** ![MIKAHEL](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mikahel/32/25039_2.png) [@MIKAHEL](https://community.glideapps.com/u/MIKAHEL)\
**Post date:** [November 14, 2021, 6:09am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/6 "2021-11-14T06:09:55Z")

</div>

Ya great potential! 🖖🏼 🕶

---

<div class="post-metadata">

**Author:** ![jabid](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jabid/32/33391_2.png) [@jabid](https://community.glideapps.com/u/jabid)\
**Post date:** [November 14, 2021, 12:41pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/7 "2021-11-14T12:41:19Z")

</div>

Is there a place where we can see our code? Or … does the Glide team ever consider adding low code to the no-code platform for anyone who would like to tweak some code …?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [November 14, 2021, 11:22pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/8 "2021-11-14T23:22:40Z")

</div>

Thank you for finding this. I’ve been playing with this and its working great. One of my uses it to calculate the bearing between two sets of coordinates.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2dce1ed0354ae0342e82b042b3f8a6a5f12aa5a5.png)

```auto
const math = await import("https://cdn.skypack.dev/mathjs");

var LatA = p1.split(',')[0]
var LonA = p1.split(',')[1]
var LatB = p2.split(',')[0]
var LonB = p2.split(',')[1]

var Bearing = math.round(math.mod(math.atan2(

math.sin((LonB-LonA)*math.pi/180)* math.cos(LatB*math.pi/180)
,
math.cos(LatA*math.pi/180)* math.sin(LatB*math.pi/180)-
math.sin(LatA*math.pi/180)* math.cos(LatB*math.pi/180)* math.cos((LonB-LonA)*math.pi/180)

)*180/math.pi+360,360),0)

if (Bearing <=11.25) {return Bearing + '° ⇑ N';}
if (Bearing <=33.75) {return Bearing + '° ⇗ NNE';}
if (Bearing <=56.25) {return Bearing + '° ⇗ NE';}
if (Bearing <=78.75) {return Bearing + '° ⇗ ENE';}
if (Bearing <=101.25) {return Bearing + '° ⇒ E';}
if (Bearing <=123.75) {return Bearing + '° ⇘ ESE';}
if (Bearing <=146.25) {return Bearing + '° ⇘ SE';}
if (Bearing <=168.75) {return Bearing + '° ⇘ SSE';}
if (Bearing <=191.25) {return Bearing + '° ⇓ S';}
if (Bearing <=213.75) {return Bearing + '° ⇙ SSW';}
if (Bearing <=236.25) {return Bearing + '° ⇙ SW';}
if (Bearing <=258.75) {return Bearing + '° ⇙ WSW';}
if (Bearing <=281.25) {return Bearing + '° ⇐ W';}
if (Bearing <=303.75) {return Bearing + '° ⇖ WNW';}
if (Bearing <=326.25) {return Bearing + '° ⇖ NW';}
if (Bearing <=348.75) {return Bearing + '° ⇖ NNW';}

return Bearing + '° ⇑ N';

```

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [November 14, 2021, 11:25pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/9 "2021-11-14T23:25:31Z")

</div>

Looks good! But aren’t all of those math functions built into the JavaScript Math class? You don’t need mathjs if so.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [November 14, 2021, 11:29pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/10 "2021-11-14T23:29:10Z")

</div>

If they are built in, I haven’t been able to figure it out. At most I could only do add/subtract/multiply/divide. Everything I searched for seemed to refer to math.js or `math.xxx` functions.

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [November 14, 2021, 11:30pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/11 "2021-11-14T23:30:45Z")

</div>

Check this out: [Math - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math)

`Math` (e.g. `Math.PI`, `Math.atan2`) is built into JavaScript as a standard feature.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [November 14, 2021, 11:38pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/12 "2021-11-14T23:38:33Z")

</div>

🤦‍♂️ I just realized why I had trouble. The elusive case sensitivity of javascript. I knew about it, but it didn’t click. Big difference between `math.xxx` and `Math.xxx`. Probably saw a bunch of examples with the lowercase ‘m’ and it wasn’t working. I’m more accustomed to the more forgiving languages or IDE’s with autocomplete.

Sorry I rose a stink over this, but I’m glad you found a way to import.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 14, 2021, 11:38pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/13 "2021-11-14T23:38:52Z")

</div>

Skypack is really powerful! On the topic of importing external code packages, I did make some charts in Replit using Chart.js and Amcharts’ packages.

Jesus tweeted about it:

> <https://twitter.com/eltintero/status/1450580889830891524>

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [November 14, 2021, 11:39pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/14 "2021-11-14T23:39:34Z")

</div>

You should write a how-to post!

---

<div class="post-metadata">

**Author:** ![Antonino\_Nolasco](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antonino_nolasco/32/80601_2.png) [@Antonino\_Nolasco](https://community.glideapps.com/u/Antonino_Nolasco)\
**Post date:** [November 15, 2021, 11:36am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/15 "2021-11-15T11:36:52Z")

</div>

I love the elintero’s tweet!!! It would be great make this charts in our apps! I tried pie version, but I would like use line and bar charts. I can’t wait to see it! 😍

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [November 15, 2021, 12:11pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/16 "2021-11-15T12:11:42Z")

</div>

@ThinhDinh this is next level. A tutorial would be appreciated for sure!

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [March 18, 2022, 1:49pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/17 "2022-03-18T13:49:54Z")

</div>

> [@ThinhDinh](#):
>
> [https://twitter.com/eltintero/status/1450580889830891524](https://twitter.com/eltintero/status/1450580889830891524)

so we can use Javascript in Glide ??  
Can we load for example an audio player written in Javascript or is it for things like node.js?

---

<div class="post-metadata">

**Author:** ![Alex\_x](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alex_x/32/40495_2.png) [@Alex\_x](https://community.glideapps.com/u/Alex_x)\
**Post date:** [March 18, 2022, 1:59pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/18 "2022-03-18T13:59:32Z")

</div>

That’s cool. I’m guessing the main advantage is not to rely on the Experimental code for simple code samples? Right now, I’m using the package manager in Replit.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 18, 2022, 2:12pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/19 "2022-03-18T14:12:41Z")

</div>

For simple JS, I usually write it straight in the JavaScript code column. For advance use cases, I host it on GitHub.

> [@Manu\_Marea](#):
>
> so we can use Javascript in Glide ??  
> Can we load for example an audio player written in Javascript or is it for things like node.js?

Yes, we have been able to for a while.

Regarding your audio player, it depends on how you write it. What exactly do you want to achieve?

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [March 18, 2022, 5:04pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/20 "2022-03-18T17:04:31Z")

</div>

For example if i want to add something like this [https://codepen.io/mattgreenberg/pen/EKQoEy](https://codepen.io/mattgreenberg/pen/EKQoEy)

can i without the html?

[Next page](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466.md?page=2)