Realtime Javascript Editing Notebook + Source

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

Add this HTML code to footer section of your Web App.

<script src=''></script>

Now, wherever you want to include a Redact-JS embed instance, you can use this HTML code anywhere in the <body> section.

<div class='kno-core oakframe' data-core='terminal'>return Oak;</script>

Now you're rocking! That code will produce something like this:

return Oak; //pssst.. you can edit me!
project_name = `Redact-JS`; username = `John Doe`; link = `OakFrame`; print( h2( `Welcome ${username}, to your first ${project_name} Project` ) ); print( 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};
print( 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.` ) ); print( p( `Copyright ${link} © ${new Date().getYear()+1900} — ${project_name}` ) );

Source code available on GitHub.

Explore OakFrame


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

    Unread — 1 minute read

    OakFrame Living Documentation

    Simple to Embed and Integrate We designed OakFrame to be easy to extend in order to provide further integration opportunities. If you prefer to run your own code in web development environments, you will be able to download the entire source from GitHub. You can build a full web application with OakFrame or a simple […]

    Unread — 2 minute read

    Design Systems

    A complete, reliable, flexible, and cost-effective infrastructure is a fundamental requirement in modern companies. Design Systems are a philosophy focused on creating reproducible results in a wide range of industries. By following design systems, your organization will more strongly align its service and products, and eliminate time spent re-building or designing infrastructure as much as […]

    Unread — 1 minute read

    About OakFrame

    OakFrame is a design, development, and research firm located in Dallas, Texas, developing experiences for audiences around the globe. We provide technology that helps you engage with the most amazing people online. With a proven track record of building interactive digital experiences across desktop and mobile to connect people, our mission is to provide people […]

    Unread — 1 minute read