circuit

Znote: A markdown and JavaScript Lab inspired by Jupyter Notebook

Markdown and JavaScript Lab inspired by Jupyter




An image of Znote's interface

As a developer, you probably spend a lot of time learning and testing code, hacking API or dataset, writing documentation, both for yourself or your teammates.

In this article, I’ll show you how to use Znote to quickly prototype code or perform data exploration. Strongly inspired from the awesome Jupyter project, Znote try to give a similar experience dedicated to the JavaScript ecosystem.

What is Znote?

The Znote is a powerful tool for interactively developing/presenting data or prototyping scripts.

A note integrates code and its output into a document that combines visualizations, charts, narrative text and other media. Additionally, you can organize your work to quickly access to your notes and thoughts.

JS Playground for prototyping

The JS Playground is fully integrated with the Markdown syntax. Just create a standard JavaScript code block to start executing your code.

To speed up this action, you can use the keyboard shortcut Cmd+P

Znote in action

Note: Code blocks are async and support the latest JavaScript ES6--7 syntax. So you can directly await for an asynchronous function. Errors are automatically caught and displayed in the output.

Because the preview is a local browser, you can import and run any JS UI libraries like React - Yes, JSX is also supported!

React example

It's also possible to mix Node.js libs with the require() keyword, or run a plain Node.js code.

Others Node API are also available like fs or exec to easily interact with your local system. The possibilities are endless.

Full documentation here.

Data exploration

Znote comes with 2 awesome libraries pre-included to help you perform efficient data exploration: DanfoJS and PlotlyJS

Danfo.js is heavily inspired by the Pandas library and provides a similar interface and API. This means users familiar with the Pandas API can easily use Danfo.js.

DanfoJS graph

PlotlyJS is Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.

Diagrams

Thanks to the Mermaid integration you can create diagrams and visualizations using text and code.

Mermaid

Dynamic Markdown

Because interacting with text is important too, Znote provides plenty of dynamic helpers and adaptive completion to help you write quality documentation.

Dynamic checkbox

CSV/Table markdown helper

This is just the beginning! Znote contains a bunch of useful features that will help you be more efficient in your daily work.🧑‍💻

And now? It's already available!

You can visit the website to get the app here: https://znote.io/

The complete product documentation is available online https://doc.notebookjs.app/#/

Hope you will enjoy using this app and it will make your job a little more fun.




Continue Learning