Here are two simple examples to get started:

Hello World! SVG Hellow World! Three.js

For more complicated applications, this template into the body of the page:

<div class="mathcell" style="height: 4in">

var parent = document.currentScript.parentNode;

var id = generateId(); = id;

MathCell( id, [ { type: '' } ] );

parent.update = function( id ) {

  var x = getVariable( id, 'x' );

  var data = [];

  // additional JavaScript here

  var config = { type: '' };

  evaluate( id, data, config );


parent.update( id );


The template automatically assigns an id to each cell, which is then available to the interactive input elements that are added to the cell. This relieves the end user of the need to manually add tags to cells.

Input elements are specified as an array of dictionaries inside the MathCell() command. Code for processing the input is added to the body of the update() function. The output element is specified in the config dictionary inside the update function.