Interactive Coding with Scribbler - the Jupyter for JavaScript

Scribbler unlocks the full potential of JavaScript, just like Jupyter does it for Python. Try Scribbler today and discover a new way to code!

Start (No Login) Join Discord

Blog> Categories: Scribbler

Table of Contents

What is Scribbler? #

The world of data science and interactive coding has long been dominated by Jupyter Notebooks, a powerful tool for working with Python and other languages. However, JavaScript developers have been left without a similar platform - until now. Enter Scribbler, a groundbreaking JavaScript notebook tool that brings the power of interactive coding to the world’s most popular programming language.

Scribbler is a web-based JavaScript notebook tool that allows developers to write, execute, and share JavaScript code in a notebook environment. With Scribbler, developers can create notebooks that contain a mix of HTML and JavaScript code cells, which can be executed directly in the browser. This innovative approach enables developers to work with JavaScript in a more interactive and collaborative way.

What is Jupyter #

Jupyter is an open-source web application that allows users to create and share documents that contain live code, equations, visualizations, and narrative text. It’s primarily used for data science, scientific computing, and education.

Jupyter’s core features:

  1. Notebooks: Web-based documents that combine code, output, and narrative text.
  2. Interactive Code: Execute code in over 40 programming languages, including Python, R, Julia, and JavaScript.
  3. Visualization: Display plots, charts, and other visualizations inline.
  4. Collaboration: Share notebooks with others and collaborate in real-time.
  5. Extensibility: Extend Jupyter with plugins, extensions, and custom kernels.

Jupyter is widely used in:

  1. Data Science: For data analysis, machine learning, and visualization.
  2. Education: For teaching programming, data science, and scientific computing.
  3. Research: For scientific computing, simulations, and data analysis.

Jupyter’s benefits include:

  1. Reproducibility: Share and reproduce results easily.
  2. Interactivity: Explore and visualize data in real-time.
  3. Collaboration: Work with others on projects and share knowledge.

In summary, Jupyter is a powerful tool for interactive computing, data science, and education, allowing users to create and share documents that combine code, output, and narrative text.

Scribbler - The “Jupyter for JavaScript” #

Scribbler’s notebook-based approach makes it an ideal platform for JavaScript developers who want to experiment with code, visualize data, and share knowledge with others. Just like Jupyter Notebooks, Scribbler provides an interactive environment for coding, debugging, and testing. However, Scribbler takes it a step further by allowing developers to embed notebooks in other web pages, making it easy to share and collaborate on code. Scribbler allows you to write and execute JavaScript code directly in the browser, making it ideal for quick experiments, data visualization, and learning.

Here are some key features and an overview of how to use it:

Key Features: #

  1. Interactive Coding: Write and run JavaScript code interactively.
  2. Data Visualization: Create dynamic visualizations using libraries like D3.js, Plotly, and others.
  3. Notebook Structure: Organize code, notes, and visualizations in a notebook format.
  4. Export Options: Export notebooks as HTML or JSON for sharing and collaboration.
  5. Live Preview: Instant feedback with live previews of code execution.

Getting Started: #

  1. Setup: Open Scribbler in your browser (https://app.scribbler.live). You can use an online version if available or host it locally.
  2. Create a New Notebook: Start a new notebook to begin coding.
  3. Write Code: Type your JavaScript code in the cells provided.
  4. Run Code: Execute code cells to see the output immediately.
  5. Visualization: Use libraries like Plotly for creating visualizations. Include the necessary library scripts in your notebook.
  6. Save and Export: Save your notebook or export it for sharing. Use File->Save Locally or File->Download.
  7. Publish to Git: Push your notebooks to your github repository to publish them through File->Github

Example: #

Here’s a simple example of using Scribbler to create a sine chart using plotly:

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

Tips: #

  • Libraries: Make sure to include any necessary libraries by adding script tags as shown in the example.
  • Documentation: Refer to the documentation of any libraries you use for specific usage instructions.
  • Experiment: Use Scribbler to experiment with different coding techniques and visualizations.

Use Cases: #

  1. Data Visualization: Use Scribbler to create interactive data visualizations, leveraging popular libraries like D3.js and Chart.js.
  2. Code Tutorials: Create step-by-step coding tutorials and share them with others, making it easy to learn and teach JavaScript concepts.
  3. Collaborative Coding: Work with others on JavaScript projects in real-time, using Scribbler’s collaborative features.
  4. Prototyping: Use Scribbler to quickly prototype and test JavaScript ideas, without the need for a full-fledged development environment.

Scribbler vs Jupyter #

Both Scribbler and Jupyter are interactive notebook tools that allow for live coding and visualization, but they cater to different programming languages and use cases. Here’s a detailed comparison between the two:

Scribbler: #

Language Support: Primarily supports JavaScript.

Use Case: Ideal for web development, quick prototyping, and interactive data visualizations using JavaScript and related libraries.

Features:

  • Interactive JavaScript Execution: Execute JavaScript code directly in the browser.
  • Visualization Libraries: Easily integrate with libraries like D3.js, Plotly.js, and Three.js for rich data visualizations.
  • Lightweight: Typically lighter and faster to load since it runs directly in the browser.
  • Export Options: Export notebooks as HTML or JSON.
  • User Interface: Simple and focused on JavaScript development.

Environment: Runs entirely in the browser, which makes it easy to set up and use without additional installations.

Limitations:

  • Language Support: Limited to JavaScript; not suitable for users needing support for multiple languages like Python, R, etc.
  • Ecosystem: Smaller ecosystem compared to Jupyter.

Jupyter: #

Language Support: Supports multiple languages through kernels, with the most popular being Python, but also R, Julia, and others.

Use Case: Widely used in data science, machine learning, scientific computing, and education.

Features:

  • Multi-language Support: Flexibility to run code in different languages within the same environment.
  • Rich Ecosystem: Extensive ecosystem with many extensions, plugins, and integrations.
  • Visualization Libraries: Comprehensive support for Python libraries such as Matplotlib, Seaborn, Plotly, and more.
  • Notebook Format: Supports Markdown for documentation alongside code, making it great for creating detailed analyses and reports.
  • Integration: Strong integration with tools like JupyterHub for multi-user environments and cloud services for scalability.

Environment: Requires installation of Jupyter and the relevant kernels, which can be done through Anaconda or standalone packages.

Limitations:

  • Setup: Requires more setup and configuration compared to Scribbler.
  • Resource Usage: Heavier on resources, especially when working with large datasets or complex computations.

Summary: #

Scribbler is a great tool for those focused on JavaScript development and web-based visualizations. It’s lightweight, easy to set up, and perfect for quick prototyping and interactive coding directly in the browser.

Jupyter is a more versatile and powerful tool for data science, supporting multiple programming languages and offering a richer ecosystem. It’s ideal for detailed analysis, machine learning, and creating comprehensive reports with integrated code and documentation.

Choosing Between Scribbler and Jupyter: #

  • For Web Development and JavaScript Projects: Scribbler is the better choice due to its simplicity and direct integration with JavaScript libraries.
  • For Data Science, Machine Learning, and Multi-language Support: Jupyter is more suitable because of its robust features, extensive ecosystem, and support for various languages and tools.

Scribbler Documentation Overview #

Installation and Setup

  • Download: Scribbler.Live is easily accessible by downloading or cloning from GitHub and hosting it on a web server. This simplicity eliminates the need for backend frameworks like Node.js or Python, ensuring efficient and straightforward usage.
  • GitHub Pages Hosted Version: Scribbler is also available at https://app.scribbler.live, enabling users to use it without self-hosting, facilitating easy sharing and collaboration.

Cells

  • Types and Structure: Notebooks are divided into HTML cells for creating dynamic content and code cells for executing JavaScript. Each code cell consists of an input and an output block, providing an interactive coding experience.
  • Output Display: Code cells display the result of the last evaluated expression. Status indicators show execution order and time, aiding in debugging.
  • HTML Cell Editing: HTML cells can be edited directly, with content updated upon execution. Users can add, delete, and rearrange cells, enabling flexible notebook management.

Cell Interaction

  • Accessing HTML Elements: Users can interact with HTML elements via JavaScript or jQuery, enhancing functionality.
  • Cell Menu: Each cell has a menu for toggling cell types, executing cells, rearranging, adding, and deleting cells, optimizing notebook organization.

File Management

  • Saving and Opening Notebooks: Notebooks can be saved in browser storage or downloaded as .jsnb files for offline access and sharing. They can also be opened from local storage or GitHub repositories.
  • Export Options: Notebooks can be exported as HTML files, either including code and output or just the output, and code can be downloaded as JavaScript files.

GitHub Integration

  • Loading and Pushing Files: Scribbler allows seamless integration with GitHub for loading and pushing files, supporting collaboration and version control.
  • Sharing and Embedding: Notebooks can be shared via URLs and embedded in other applications using iframes.

Special Functions and Shortcuts

  • Built-in Functions: Functions like scrib.show(), scrib.currCell(), scrib.getDom(), and scrib.uploadFile() facilitate object display, DOM manipulation, file uploading, and more.
  • Keyboard Shortcuts: A variety of shortcuts are available for running cells, adding and deleting cells, and integrating with GitHub, enhancing productivity.

External Libraries

  • Loading Scripts: Users can load external JavaScript libraries with scrib.loadScript(), allowing for the integration of additional functionality.
  • Preloaded Libraries: Libraries like D3 and Plotlyjs are preloaded for data visualization. The DI-Labs project offers tools for data manipulation and scientific computing.

Sandboxed Environment

  • Security: Scribbler operates within a sandboxed iframe environment for security, with options to disable the sandbox for accessing restricted functionalities.

Scribbler Resources #

GitHub Repository:

  • Scribbler on GitHub - This repository contains the source code for Scribbler. You can find installation instructions, code examples, and contribute to the project.

Official Website:

  • Scribbler Official Website - The official website for Scribbler where you can learn more about the tool, its features, and access documentation.

App Site:

  • Scribbler App - Direct link to the online Scribbler app where you can start creating and running JavaScript notebooks.

Online Tutorials and Guides #

Tutorials and Documentation:

These resources should help you get started with Scribbler, learn more about its capabilities, and connect with the community for support and collaboration. If you have any specific questions or need further assistance, feel free to ask!

✎