Skip to content
This repository

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.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 external
Octocat-spinner-32 LICENSE.txt
Octocat-spinner-32 README.md
Octocat-spinner-32 demo1.html
Octocat-spinner-32 demo2.html
Octocat-spinner-32 editor.css
Octocat-spinner-32 editor.html
Octocat-spinner-32 empty_snippet.html
Octocat-spinner-32 helper.js
Octocat-spinner-32 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.