Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Live Javascript Editor (LJE) is a simple Javascript app that lets you type and execute Javascript code and snippets on the fly, best suited for speakers to present and illustrate Javascript code to an audience, like you would do during a tech conference.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
external
LICENSE.txt
README.md
demo1.html
demo2.html
editor.css
editor.html
empty_snippet.html
helper.js
html5logo.png

README.md

Live Javascript Editor

Live Javascript Editor (LJE) is a simple Javascript app that lets you type and execute Javascript code and snippets on the fly.

Its main purpose is to help a speaker present and illustrate Javascript code to an audience, like you would do during a tech conference.

I originally created LJE for Google I/O 2011 to illustrate advanced features of Google Chart Tools with some live examples. You can see how I used it in the recorded video (38m30s in), and the embedding in the original presentation.

LJE is best suited for embedding in an HTML5 presentation, like the one you can create using this template. It uses fonts and sizes that suit the average projector and conference room (so that everybody should be able to read comfortably).

Try before you buy

Try LJE live here. It is preloaded with two samples (named demo1 and demo2): the first shows some jQuery-based javascript animation, the second some graphs built using the d3 library.

Load the examples by clicking the links on the bottom. Try modifying the code and hitting the 'execute' button to see the output change on in real time.

Usage

Download the code and/or fork the repository.

LJE is best used by having code snippets prepared beforehand. To do so, prepare your snippets following the instructions in empty_snippet.html and enumerate them inside editor.html where indicated.

Once done, just open editor.html in your browser, and you should find all your snippets in the links at the bottom. Click on any of them to load and execute them. You can then modify the javascript code and execute them again (you can use the Ctrl-B shortcut to execute the current code, instead of using the mouse to click the 'Execute' button).

Notes

Tested with Chrome, FF4, Safari, Opera only.

Since the editor load the snippets using iframes, it might not work if you execute it locally, i.e. using a file:// scheme, so you better serve the editor from a local webserver running on your machine. The problem does not exist when deployed on a webserver (workarounds exist, like Chrome's --allow-file-access-from-files flag).

Something went wrong with that request. Please try again.