Scraps-JS Realtime Javascript Notebook + Source

Scraps-JS, a state-driven interactive javascript notebook/workspace app.

Add this HTML code to the <head> section of your Web App.

<link rel="stylesheet" href="dist/scraps.css" type="text/css" />

This is a Scrap. Place them in the body.

<div class="scraps-js">hello="hello";</div>

Then, place the script at the bottom of your page, preferably near the end of the <body> tag, after all defined Scraps.

<script src=''></script>

This will initialize Scraps when it has loaded, producing something to the effect of the following interactive Scrap.

hello = "hello";

You can also add as many scraps to your page as you'd like, we've included a few examples below.

// You can edit me apples = (Math.random()*10) | 0; return ["I have" , apples , `Apple${apples!=1?"s":""}.`].join(" ");
project_name = `Scraps-JS`; username = `Robin`; link = `OakFrame`; Scrap.print( Scrap.h2( `Welcome ${username}, to your first ${project_name} Project` ) ); Scrap.print( Scrap.p( `As you can see, much of this website is controlled by code, written in this area below called a Leaf.
It's just javascript, and a few little features we've added as a state management system.` ) ); return {a:true, b:false};
Scrap.print( Scrap.p( `We are able to make variable definitions in one leaf, and pick it up later in any other leaf after.
Only variables not prefixed with let, var, or const are kept in State, so your print function calls and strings will be unaffected.` ) ); Scrap.print( Scrap.p( `Copyright ${link} © ${new Date().getYear()+1900} — ${project_name}` ) );

Here's an example of a Scrap with an error.


Source code available on GitHub.

Explore OakFrame

    Basic Programing with Javascript

    Welcome to the OakFrame Interactive Basic Programming with Javascript course. This course is provided through an...


    Play games in your browser for free, handcrafted by us here at OakFrame!

    Oak Studio Documentation

    Simple to Embed and Integrate We designed OakFrame to be easy to extend in order to provide further integration...

    Design Systems

    A complete, reliable, flexible, and cost-effective infrastructure is a fundamental requirement in modern companies....

    About OakFrame

    OakFrame is a design, development, and research firm located in Dallas, Texas, developing experiences for audiences...