❯ Table of contents

• Introduction
• Installation
• Mercury Hub
• Mercury Sandbox
• Examples
• Future Features
• Releases
• Bugs
• License

❯ 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

1. Install npm package globally

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

2. 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

1. 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.

1. 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.
2. Under the action panel, Breadcrumb is placed that shows where you are.
3. 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).
4. 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

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

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

3. 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:

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

Shortcuts

Sandbox view has prepared some shortcuts for quicker work. All of the available shortcuts can be found under Options tab.

❯ Examples

All prepared examples are stored in the examples folder.

Standard Javascript function

Using HTML tags

React

❯ Future Features

1. Add presentation mode to sandbox
2. Add Sandbox for markdown
3. Add txt and js file handler
4. Separation of context for sections
5. Section inside a section

Releases

❯ Bugs

Issues

❯ License

MIT