Oak Studio 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 single component.

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

<script src='https://oakframe.org/dist/bin.oakframe.js'></script>

Not every project will require an interactive interface like the one below. In cases like NodeJS where Oak Studio can be imported, you are able to use mostly the same syntax as shown in the editable areas, and it will run without loading any additional modules.

Javascript for Innovators

We've built a nitro charged JavaScript framework and tailored the experience for independent programmers, technologies services, and content media production houses.

Also, while you're on the OakFrame website, our OakFrame + WordPress Integrated Editor (another open source project by us, called Scraps-JS) have some unique features, including virtualized execution contexts. This means you can write some variables somewhere:

my_variable = "Hey, I'm the variable we set! Try updating me!";return my_variable;

And then pick it up somewhere else.

return `



Interactive for Technologists, Editors, and Readers

Go ahead, change one of the numbers below. Then, run the cell.

let a = {type:'fruit',name:'banana',height:24,wealth:12}; let b = {type:'vegetable',name:'carrot',age:22}; let c = {type:'fruit',name:'apple',wealth:1000}; let items = [a,b,c]; let div = document.createElement('div'); div.innerHTML = Oak.Utils.HTML.arrayToTable(items); Scrap.print(div);

All Topics in Oak Studio Documentation


    let graph_container = document.createElement("div"); graph_container.id = "graph-render-area";...


    Networks are a CPU based implementation of a simple feed-forward / back-propagation Neural Network. Network.ts...


    Cameras are a way to transformations when rendering images to a surface. It relies on the Projection class to...


    A SHIPP (Shift Pattern Properties) is a wrapper around 2-dimensional arrays so that they may be used in cases such...


    RoomObjects are entities that exist within a Room. They generally share behaviors with clones of themselves or...


    Sprites are used for loading images into the javascript context. Because animated GIFs are not native to javascript...


    Vec3 ( Vector3 ) is a scalar of 3 dimensions, x, y, and z. vec3 = new Oak.Math.Vec3(); return vec3; Vec3 Methods...


    Surfaces are an abstracted way to use the 2d context from within a single interface. Surfaces provide the...

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...