Mercury-notebook NPM

❯ Table of contents

❯ Introduction

The Mercury Notebook is a interactive, web-based notebook environment for javascript and javascript libraries, frameworks. Its main purpose is to write javascript-related notes, prepare interactive lectures, or for example, quick functionality tests. Mercury Notebook is also equipped in Markdown text editor.

❯ Installation

To use Mercury Notebook

Install npm package globally

npm i -g mercury-notebook
# or
yarn global add mercury-notebook

Open terminal in directory where you want to initialize project and run

mercury-notebook serve [-p port]

by default mercury notebook uses port 7777

You can run Mercury Notebook with without installing using npx

Open terminal in directory where you want to initialize project and then

npx mercury-notebook serve [-p port]

❯ Mercury Hub

Hub View is the first page that gets loaded, and from there, you can add a new notebook or folder and manage all of your notebooks and folders.

At the top is an action panel with buttons to Add Notebook, Folder. The rename button only shows when there is one and only one file selected, and the delete button (trash icon) shows anytime one or more items are selected.
Under the action panel, Breadcrumb is placed that shows where you are.
Beneath it, all notebooks and folders that are in your current location are listed. Yellow notebook icon to the left of its name indicate that notebook is active (open in a tab).
On the right are three criteria for sorting data.

❯ Mercury Sandbox

Sandbox View is where you'll spend most of your time. The sandbox allows you to create a Markdown editor and Code (javascript) editor. This page is divided into sections (you can manage them as you want), and all of them can have multiple code and markdown editors.

Main

its own preview that presents the outcome of your code.
function show() that is used to print stuff on the right canvas

show(1 + 2);
// will show 3 on a canvas

function console.log() that prints information to the browser console.

console.log(1 + 2);
// will show 3 in a browser console

Navbar

In sandbox view, the navbar has three functionalities:

Files tab - allows to save and save as a notebook, open an existing notebook or create a new one.
Options tab - gives a possibility to disable or enable autosave and auto compile options
Name - the notebook's name is displayed in the middle. Clicking it allows changing its name