Scribbler - JavaScript Notebook

Simple Interface for Experimenting in JavaScript. Developed for Open Source using Open Source.

#

Experiment in JavaScript with Ease

Features

Scribbler is a browser-based tool to experiment in JavaScript for scientific computation/new code development/visualization/data science..

Open and Free

No login, lock-ins, or heavy deployment requirements.

Easy to Use

Runs without backend/node/npm/python. Can be loaded from a static file server.

Device Agnostic

Minimalistic UI and mobile responsive design, works on any modern browser.

Extensible

Can load third-party ES-6 libraries dynamically from CDNs.

JS+HTML

Use JS, HTML and CSS for building dynamic notebooks.

Github Friendly

Push to and pull from Github directly from the tool.

JavaScript

JavaScript is the single most popular language for development on frontend and backend.

64%

Use JavaScript

20mln

Happy developers

420mln+

JS Github Projects

one tool, several uses

Use Cases

Whether you are beginner or an advanced developer, Scribbler has some use for you.

Some sample notebboks are below.

Learn

Learn JavaScript coding easy to use interface.


Key points

  • Use HTML and JS.
  • Interact with UI elemnts.
  • Plot charts.
  • Write functions, classes and other reusable code.

Scientific Computation

Advanced computation including simulations, solving equations.


Key Points

  • Use math and scientific libraries.
  • Do complex simulations.
  • Visualize output.
  • Dynamically experiment with paramters and code.

AI and ML

Use ML libraries like tensorflo.js and brain.js for training and inference.


Key Points

  • Train ML models.
  • Do inference of pre-trained models.
  • Use Plotly etc for visualization.
  • Build dynamic AI usecases.

Financial Applications

Develop calculators, charts and simulations.


Key Points

  • Develop financial calculators.
  • Do financial simulations.
  • Get financial data using APIs.
  • Do financial charting using libraries.

Try the hosted version without login.

Just click below and start coding away!

Overview.

Explore and experiment with JavaScript, get instant output to text and iterate.


Installing

  • - No specific installation is required. You can use the git-hosted version (without downloading anything) here: https://app.scribbler.live/.
  • - Alternatively, you can download or clone the Github repo on any machine and host it in webserver.
  • - To host the app online, put the folder in web directory of the server and use the link to index.html.
  • - That’s it. No no npm, no node, no pip install, no apt-get install.

Hello-World

JavaScript: The only language where you can write the “Hello world” code in one line or in 1000.

~ Anonymous

Easy to start:

show("Hello World")

Simple interface for array manipulation and charting:

range(0,10,0.01).map(Math.sin).plot()

Example Notebooks

A hello-world notebook: https://app.scribbler.live/#./examples/Hello-world.jsnb. More examples are added in the folder examples/ in Scribbler repository. Check the Samples page for links.

Cells

  • - The notebook consists of cells. Each cell will have user inputted html/code and an output.
  • - There is a menu at the top right corner of the cell (or above the cell in case of smaller screens).
  • - There are two types of cells: code and html. The type of cell can be toggled using a switch in the cell menu.
  • - For code cells input and output are both shown. For html cells, input is hidden and opens up if you click the output.

Actions

To get the output of a cell press play ► button on the cell menu (or Cmd/Ctrl-Enter on keyboard after selecting the cell). The cell menu also has buttons for moving the cell up ↑, down ↓, adding a new cell ✛ and deleting the current cell ☓.

Saving

A notebook can be downloaded as json (has a default extension of .jsnb). IT can be loaded back into the app. The notebook or only the output can also be downloaded as html.

Loading

A .jsnb file can also be directly loaded into the app by suffixing the url of the file after “#” something like: https://app.scribbler.live/#link_to_file.jsnb. The url of the file should be accessible by the browser through GET method.