Znote logo
Znote

Jupyter Notebook Tutorial

How to run Javascript in Jupyter Notebook

Last updated on July 06, 2024

Banner Jupyter notebook

Jupyter Notebooks are a staple for data scientists and developers, providing an interactive platform to mix code and narrative text in a seamless way. This flexibility makes a good choice for creating dynamic, interactive documentation.

With support for over 100 programming languages (referred to as “kernels”),
Jupyter allows for a diverse range of coding experiences beyond its popular Python and R environments, including languages like Java, Julia, Matlab, and Scala.

You can explore the full list of supported languages here.

In this article, we’ll dive into using Deno, a modern JavaScript kernel, within Jupyter Notebooks.

What is Deno?

Deno is an open-source runtime for JavaScript and TypeScript that emphasizes security, simplicity, and compatibility with modern web standards.

Deno's integration with Jupyter as a kernel allows you to leverage its strengths directly within your Jupyter Notebooks.

Once Deno is installed, you can create new Notebooks using the Deno kernel, making it straightforward to write and execute JavaScript code interactively.

Deno kernel in Jupyter

Getting Started with Deno in Jupyter

Installing Deno

To start using Deno in Jupyter, you need to install Deno on your system. Here’s how:

On Windows

irm https://deno.land/install.ps1 | iex

On macOS/Linux

curl -fsSL https://deno.land/x/install/install.sh | sh

For more details on the installation process, visit the Deno installation guide.

Installing Jupyter

Next, install Jupyter Lab, the modern interface for Jupyter Notebooks:

pip install jupyterlab

You can find more information on the Jupyter installation page.

Installing the Deno Kernel

Finally, install the Deno kernel for Jupyter:

deno jupyter --unstable --install

Running JavaScript with Deno in Jupyter

Once installed, you can create a new Notebook with the Deno kernel. This allows you to run and display JavaScript code directly within your notebook.

Running JavaScript in Deno kernel

Manipulating Data

Deno supports installing and running NPM packages, making it easy to use libraries like nodejs-polars for data manipulation.
This particular package allows you to transform data into DataFrames to offer a similar Python experience for Javascript.

Deno provides utilities such as the display module to show results neatly within the notebook.

Displaying data with Deno

Creating Graphs

With this kernel, you can also generate plots and graphs to visualize data, enhancing your ability to analyze and present information effectively.

Creating graphs with Deno

For those interested in exploring and visualizing data with JavaScript and Deno's Jupyter integration, you can find more about getting started with Jupyter on Deno's documentation.


Considering a Dedicated App for JavaScript Notebooks

While Jupyter is versatile and powerful, it was originally designed with server-side languages like Python and R in mind. For those focused on JavaScript, you might find a dedicated app offers a more tailored experience.

Introducing Znote: A Note-Taking App with JavaScript Integration

Znote is designed specifically for JavaScript developers, providing a seamless coding experience combined with robust note-taking capabilities. Here’s what makes Znote stand out:

Code Completion: With Znote, writing JavaScript is smoother thanks to its code completion feature that suggests useful functions and commands.
Code completion in Znote

Advanced Components: Znote includes ready-to-use components like built-in Datagrids, complete with search and pagination functionalities, making it easier to handle data directly within your notes.
Datagrid example in Znote

NPM Package & Demos: Znote provides useful demos for relevant NPM packages, helping you quickly understand how to manipulate data using popular libraries.
NPM package example in Znote

Integrated Graph Libraries: Easily create and integrate charts and graphs into your notes, making data visualization a breeze.
Graph example in Znote

Comprehensive Note Management: Organize all your dynamic notes with ease, making them searchable and neatly categorized.
Znote app screenshot

If you're looking for a tool that combines the best of both worlds — a robust note-taking system with advanced JavaScript coding capabilities:
Znote could be the perfect solution.

Check out Znote to streamline your workflow and keep your notes organized and dynamic.


Want to try something new for your notes?

Discover our Note app designed for doers to create cool notes with actions 💎️

Znote screenshot

Discover Znote 💡