Kanon

Kanon is a live programming environment for data structures. While you write JavaScript code in the editor on the left-hand side, the data structures constructed during the execution of the code appears as a graph on the right-hand side.

How to use

Kanon runs on your browser. Open the following page: https://prg-titech.github.io/Kanon/.

How to build

To build Kanon in your local environment, execute the following command.

git clone https://github.com/prg-titech/Kanon.git

This will copy the source code of Kanon. After downloaded, go to the Kanon directory and execute the following command.

npm install

Then, execute a following command and open http://localhost:8000/ to view the application.

npm start

(You can change the port by using npm start -- --port=8001).

Desptop Application

You can also use Kanon by desktop application.

npm run-script app

Samples

it is recommended that you try to use sample code that is in samples directory if you have never used Kanon.

Notes

Kanon uses the following libraries.

• vis.js (https://github.com/almende/vis)

• Ace (https://github.com/ajaxorg/ace)

• esprima (https://github.com/jquery/esprima/tree/3.1.1) [*]

• escodegen (https://github.com/estools/escodegen)

• jQuery (https://github.com/jquery/jquery)

• jQuery UI (https://github.com/jquery/jquery-ui)

References

• Live Editor (https://github.com/Khan/live-editor)

LICENSE

Kanon is distributed under the MIT License. See LICENSE for more information.

[*]: Our repository includes esprima.js in the externals directory, which is taken from https://unpkg.com/esprima@3.1.1/dist/esprima.js .