Scribbler: A Notebook Tool for Running and Testing JavaScript Code Online

Scribbler is a JavaScript notebook tool that runs directly in your browser. It provides developers, engineers, and researchers with a simple online interface for experimenting with and running JavaScript code. The tool is open source and free to use with no registration login required. Its main feature is that it is lightweight and does not require the installation of Node.js or other complex environments; it can be run by downloading the source code and placing it on any static web server. Users can create cells containing code and documents in Scribbler, dynamically load third-party code libraries, and visualize data with an integrated charting library. It also supports a direct connection to GitHub, making it easy for users to save, share and publish their projects.

Function List

• No backend required: Runs entirely in the browser, with no need to install back-end environments such as Node.js, npm, or Python.
• free and open: An open source project that is free to use without a login or subscription.
• Interactive Cells: Users can write JavaScript code, HTML or Markdown documents in different cells and immediately execute the code to see the output.
• data visualization: Built-in charting libraries such as Plotly.js make it easy to convert arrays and other data into charts.
• Support for third-party libraries: Any third-party JavaScript library in ES6 format can be dynamically loaded from a CDN and used.
• GitHub Integration: You can push notebooks directly to GitHub repositories or pull files from them.
• Document management: Users can download notebooks in JSON format (.jsnbThe output can be exported to a file (e.g., a file of the same size as the file you are using), or to an HTML file.
• Cross-device use: The interface has a clean design and works well on modern browsers on desktop and mobile devices.

Using Help

Scribbler provides an environment for experimenting with JavaScript code without complex configuration. Users can write and run code directly on a web page and see the results immediately, perfect for quickly testing ideas or learning JavaScript.

Getting Started

You don't need to install anything, just visit the officially hosted app directly through your browser to get started:

• Online application address: https://app.scribbler.live/

If you want to use it offline or deploy it yourself, you can also download the source code from GitHub and place it on any static web server (e.g. Nginx or via the npx serve command) is run in the directory.

Core interfaces and operations

Scribbler's interface consists of a number of "Cells", which are at its core.

1. Cell Type
   • Code Cell: This is the default cell type for writing and executing JavaScript code.
   • Doc Cell: Used for writing explanatory documents, it supports Markdown, HTML and CSS syntax. You can toggle between the two types with a switch in the menu at the top right corner of the cell.
2. Execution cell
   • With a code cell selected, click on the cell menu in the Play ► Button.
   • Using shortcuts Cmd+Enter (macOS) or Ctrl+Enter (Windows) can also be executed.
   • The output of the code is immediately displayed below the cell.
3. cell management
   The menu in the upper right corner of each cell provides a set of administrative tools:
   • Move up ↑ / Move down ↓: Reorder the cells.
   • Adding a new cell ✛: Create a new code cell below the current cell.
   • Delete ☓: Delete the current cell.

Writing and experimenting with code

Scribbler has some handy functions built in that simplify common operations.

• Display Output: You can use scrib.show() function to output variables, objects, or any information, it is much more efficient than the console.log() Better suited to presenting results in a laptop environment.

  scrib.show("Hello World");
  

• data visualization: Scribbler has built-in charting libraries that make it easy to chart data. For example, using the range() function generates a sequence of numbers and then chains calls to the .map(Math.sin) cap (a poem) .plot() A sine curve can then be plotted.

  // 下面这行代码会画出一条正弦函数曲线
  range(0, 10, 0.01).map(Math.sin).plot();
  

• Loading external libraries: You can load any JavaScript library from the CDN for experimentation. For example, load tensorflow.js to perform machine learning inference, or load the brain.js to train a simple neural network.

Save and Share

You can save your work or share it with others.

• Local Preservation:
  • In the top menu select File -> Save (as .jsnb)If you want to download the entire notebook as a JSON file (with a suffix of .jsnbThis file can be uploaded back to Scribbler later to be opened.) This file can be uploaded back to Scribbler later to open it.
  • option Download (as .html) Then you can save the entire page containing the output as an HTML file.
• Loading via URL:
  If your .jsnb The file is hosted on a publicly accessible URL (e.g., GitHub Gist), which you can access by appending the Scribbler app URL to the # and file links to open it directly.
  Format:https://app.scribbler.live/#<你的文件链接>
• Post to GitHub:
  Scribbler provides the ability to publish notebooks directly to GitHub, which requires a GitHub Token.
  1. leave for File -> GitThe
  2. Follow the prompts to connect your GitHub account and provide a Token.
  3. After a successful connection, click on the top menu of the Publish Button.
  4. The system generates three links: a link to the notebook for continued editing, a link to run as a stand-alone application, and a code snippet for embedding into other web pages.

application scenario

1. Learn and experiment with JavaScript
   For beginners, Scribbler provides a sandbox environment with zero configuration. You can practice JavaScript syntax, test functions and APIs, and visualize the results of code execution directly inside.
2. Scientific Computing and Data Visualization
   Engineers and researchers can use Scribbler for complex mathematical calculations, system simulations and data analysis. It supports loading math.js and other scientific computation libraries, and the built-in charting functions make it easy to visualize the results of your calculations.
3. AI and machine learning
   You can load the tensorflow.js maybe brain.js Machine learning libraries, such as the AI Library, can be used to train simple models or to run pre-trained models for inference. Dynamic interactive AI use cases can also be created by combining HTML cells.
4. Code prototyping and API testing
   Scribbler is an ideal tool when you need to quickly verify the logic of a small piece of code or test the return results of a third-party API. You don't need to build a complete project, just write the test code directly in the cell.

QA

1. What is the difference between Scribbler and JSFiddle/Codepen?
   Scribbler focuses more on data processing and computational processes, and its multi-cell notebook format is suitable for creating longer documents and lab records, similar to Jupyter Notebook for data science, while JSFiddle and Codepen are mainly used for testing and sharing code snippets of web front ends consisting of HTML, CSS, and JavaScript. code snippets composed of HTML, CSS, and JavaScript.
2. Do I have to pay to use Scribbler?
   No. Scribbler is an open source project, is completely free, and does not require an account to use the online version.
3. Can I use npm packages in Scribbler?
   Not directly. Scribbler runs in a browser environment without Node.js and npm, but you can load npm packages that provide UMD or ES6 module formats via a CDN.
4. Where is the code executed? Is it safe?
   All code is executed directly in your local browser and is not sent to any server. This purely client-side mode of operation ensures the privacy of code and data.