Interactive Javascript Notebook (0-install)

[toc]

Introduction

A jsNotebook is an interactive web page using JavaScript - like a Jupyter Notebook, except that it runs Javascript instead of Python ('cause I'm a Javascript fan 😁). This particular implementation is more simplistic. jsNotebooks are serverless, 0-install, and require no special tools - a simple text editor can be used to create or edit a jsNotebook. (A few lines of boilerplate text must also be added to each jsNotebook page to accomplish this).

jsNotebook pages are stored as Markdown (text) files to allow quick and easy formatting. Showdown is used to render the Markdown text as HTML for display in the browser, where it can then be viewed or edited interactively (not there yet).

jsNotebook pages can be as simple as static Markdown/text, or as complex as an entire web app. They can contain HTML tags (including <script>), or pull in additional HTML, CSS, Javascript, or other files from a web server or public CDN. For example, here is a 100 x 50 px cyan rectangle using an HTML <div> tag:

jsNotebook pages are intended to be compact and self-contained (except for CDNs), similar in concept to TiddlyWiki. They are "serverless" and can be stored in a local file system or on a web server, or shared easily as a text file attachment in an email.

jsNotebooks can be created from scratch, but the easiest way is to simply open an existing/example jsNotebook and then edit and save it with a different file name. The first jsNotebook filename opened must end with ".html" (so the browser knows how to render it), but subsequent jsNotebooks do not have this restriction if they are dragged and dropped onto a previously open jsNotebook.

Example Directives

The Markdown syntax is described on the Showdown syntax wiki page. Here are a few examples:

Code fragment:

void main() {
    gl_FragColor = vec4(1,0,0,1);	// ERROR
}

Bullet list:

first item
second item
third item

Table:

Column 1	column 2	col 3
first	row	...
second	row	...

Tasklists (GFM Style):

write this intro
create more examples

For a complete description of Markdown syntax, see the Showdown syntax wiki page.

Status

jsNotebook is still under construction, but the current status is: usable.

Current status/TODO:

etc

trying other types of footnotes ... foo bar[^1] is a very[^n] foo bar[^n] [^1]: This is my first footnote [^n]: Visit http://ghost.org [^n]: A final footnote

References

(0-install boilerplate)

ERROR: This jsNotebook can't be displayed unless JavaScript is enabled.

djulien/jsNotebook