# What is the 2022 way to display Javascript in a Python notebook in Jupyter Lab?

**URL:** <https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318>\
**Category:** extensions\
**Created:** [December 22, 2021, 10:42pm UTC](https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318 "2021-12-22T22:42:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mwouts](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mwouts/32/868_2.png) [@mwouts](https://discourse.jupyter.org/u/mwouts)\
**Post date:** [December 22, 2021, 10:42pm UTC](https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318/1 "2021-12-22T22:42:18Z")

</div>

Hello everyone!

I was looking for an update on how to display Javascript content in a notebook, opened with Jupyter Lab, so I though here was the best place to get one…

Is it correct that

1. Since 2019, the [@jupyterlab/javascript-extension](https://github.com/jupyterlab/jupyterlab/tree/master/packages/javascript-extension) is shipped with Jupyter Lab
2. The extension is always active (i.e. no need to run `npm i @jupyterlab/javascript-extension` as stated on the [npm](https://www.npmjs.com/package/@jupyterlab/javascript-extension) repository) ?

If so maybe I’d recommend to confirm that no install is required on the extension’s README. Also maybe the current example,

```javascript
Javascript('console.log("hello world");')

```

could be replaced with

```javascript
Javascript('alert("hello world");')

```

which effect is simpler to spot, at least for non-JS experts?

Last but not least, what is the recommended way to load `require` in Jupyter Lab? I am aware of a [code snippet](https://github.com/mwouts/itables/issues/3#issuecomment-688330386) that looks like this

```python
from IPython.display import HTML, display
from time import sleep

display(HTML("""
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
"""))

sleep(0.1)

```

(thanks @fcollonval !) but now I am looking for a more robust approach (i.e. without `sleep`)

Thanks!

---

<div class="post-metadata">

**Author:** ![krassowski](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/krassowski/32/1685_2.png) [@krassowski](https://discourse.jupyter.org/u/krassowski)\
**Post date:** [December 22, 2021, 11:43pm UTC](https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318/2 "2021-12-22T23:43:14Z")

</div>

2022 is here: [Improved `%%javascript` cell magic. · Issue #13376 · ipython/ipython · GitHub](https://github.com/ipython/ipython/issues/13376)

Edit: this is a forward looking statement made in 2021: no guarantee it will happen, nor that it will happen exactly as described in the linked, but looks exciting!

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [January 27, 2022, 7:37am UTC](https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318/3 "2022-01-27T07:37:44Z")

</div>

Thanks for your suggestions! I opened up [Update several extensions readme files to delete old content. by jasongrout · Pull Request #11947 · jupyterlab/jupyterlab · GitHub](https://github.com/jupyterlab/jupyterlab/pull/11947) to implement these suggestions.

As for the sleep - I think it is there just to give the frontend a bit of breathing room to load the script before processing anything after that may use the require library. If your display call is the only thing in the cell, I think you probably don’t need the sleep.

---

<div class="post-metadata">

**Author:** ![mwouts](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mwouts/32/868_2.png) [@mwouts](https://discourse.jupyter.org/u/mwouts)\
**Post date:** [January 27, 2022, 9:16am UTC](https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318/4 "2022-01-27T09:16:55Z")

</div>

Thank you @krassowski and @jasongrout !

Also I should report on the latest research that I did for the [itables](https://mwouts.github.io/itables/) package:

- ES imports work well in all the notebooks environment I have tested (Jupyter Notebook, NB convert, Lab, Jupyter Book, VS Code, PyCharm, Google Colab), so I’d recommend to use ES imports when possible.
- However for Javascript code that uses `require` we need to manually import `require.js` in some cases (with the code snippet above), as `require.js` is pre-imported only in Jupyter Notebook, NB convert and Jupyter Book.

---

<div class="post-metadata">

**Author:** ![krassowski](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/krassowski/32/1685_2.png) [@krassowski](https://discourse.jupyter.org/u/krassowski)\
**Post date:** [January 27, 2022, 10:15am UTC](https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318/5 "2022-01-27T10:15:15Z")

</div>

Thanks! I was looking at the ES imports you implemented in `itables` when writing [Transpile (optional) TypeScript, support imports (package and relative) and schema by krassowski · Pull Request #28 · jupyterlab/jupyterlab-plugin-playground · GitHub](https://github.com/jupyterlab/jupyterlab-plugin-playground/pull/28). At the time you were using ESM.js which seems brilliant, but given that it is a relatively small player, I felt that relying on it for major deployments may not be a future-proof decision (just yet); even worse, they do not offer a way to verify SRI integrity as discussed in [Support other loader mechanisms? · Issue #1 · jupyterlab/jupyterlab-plugin-playground · GitHub](https://github.com/jupyterlab/jupyterlab-plugin-playground/issues/1#issuecomment-1008037242).  
Long term we would like to purge `require.js` altogether (as it is not maintained anymore), but it is difficult due to number of users relying on it, so we would need to shim it. SystemJS might be the solution.

---

<div class="post-metadata">

**Author:** ![mwouts](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mwouts/32/868_2.png) [@mwouts](https://discourse.jupyter.org/u/mwouts)\
**Post date:** [January 27, 2022, 11:42am UTC](https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318/6 "2022-01-27T11:42:40Z")

</div>

Hi @krassowski , thanks for the feedback.

First I must say that I know very little about JS - All I know is that I was advised to use ES modules as they sound like the _modern way_ to load JS libraries.

Is the issue of SRI integrity specific to [https://esm.sh](https://esm.sh)?

Also in the case of [https://datatables.net/](https://datatables.net/) I could not find an ES version supported by the author, and that is the primary reason for using [https://esm.sh](https://esm.sh). But certainly when another version with native support for ES imports is made available (maybe on another CDN?) I’ll take that one.

---

<div class="post-metadata">

**Author:** ![krassowski](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/krassowski/32/1685_2.png) [@krassowski](https://discourse.jupyter.org/u/krassowski)\
**Post date:** [January 27, 2022, 11:47pm UTC](https://discourse.jupyter.org/t/what-is-the-2022-way-to-display-javascript-in-a-python-notebook-in-jupyter-lab/12318/7 "2022-01-27T23:47:19Z")

</div>

> First I must say that I know very little about JS - All I know is that I was advised to use ES modules as they sound like the modern way to load JS libraries.

👍

> Is the issue of SRI integrity specific to [https://esm.sh](https://esm.sh/)?

Yes (and it might change one day).

> But certainly when another version with native support for ES imports is made available (maybe on another CDN?) I’ll take that one

👍