A browser-based live coding environment.
WARNING: This project is currently in maintenance mode. Please feel free to file bug reports. If determine that the issue is serious enough we will fix it. Please do not submit PRs. We don't have the resources to review them and they'll be closed.
This is the live coding environment developed for the Khan Academy Computer Programming curriculum. It gives learners an editor on the left (either ACE or our Blocks-based drag-and-drop editor) and an output on the right (either JS+ProcessingJS, HTML, or SQL). Here's a tour of how it's used on KA.
You can find various demos in the
demos/directory, and start playing immediately with the simple demo:
In order to run
live-editorlocally you'll have run a local web server. If you have python installed this can be accomplished by running the following command from the
python -m SimpleHTTPServer
You should see the following console output:
Serving HTTP on 0.0.0.0 port 8000 ...
Open up a browser and navigate to http://0.0.0.0:8000/demos/simple.
WARNING: This project requires node ~6 and npm ~3 in order for
npm installto work correctly.
You can use the pre-built copies of everything inside the
build/directory. If you wish to make some changes and re-build the library from scratch you'll need to install some dependencies:
git submodule update --init --recursive npm install bower install
Build the Ace editor files (This is usually not needed)
cd bower_components/ace npm install node Makefile.dryice.js -nc
At this point you can make a fresh build, using Gulp:
npm run build
If you have an issue with "this.merge" is undefined, then
rm -rf node_modules/gulp-handlebars/node_modules/handlebars.
The tests are in the
/testsfolder. They use Mocha/Chai/Sinon. Gulp typically runs the tests when relevant files change, but you can explicitly run the tests with:
You can also run single test suites at a time - see gulpfile.js for what suites are available:
You can run the tests in the browser runner by opening the relevant webpage:
TravisCI also runs those tests when new commits are made.
In order to run the tests that create Worker threads, you'll need to run Chrome with a flag:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
Please add tests whenever possible for any change that you make or propose.
We have many open issues here. The top priority are those marked as regressionbug, since those are things that used to work. After that, the ones marked as browserbug may be the easiest to take on, and there are also plain old bugs. All the issues are tagged according to their environment, pjs, webpage, sql, or if they're generally about the ACE editor, editor. There are also a few bugs specifically about the demo pages, since those can get behind, and requests for more tests, since we can always use more of those!
Some aspects of the editor are in subrepos with their own issue trackers, like structuredjs and structuredblocks, so be sure to poke around those and see if they're more up your bug-fixing alley.
There are also a handful of ideas floating here from our community. You are welcome to take them on, but it's possible we won't merge them if we worry about their effect on the programming experience on Khan Academy, like if they may introduce backwards compatibilities or performance regressions.
We have no full-time resource working on the editing environment right now, so we will do pull requests when we find ourselves with time between other projects. We thank you for your contribution, even if we may be slow to acknowledge it at times. :)
When submitting pull request please do the following:
Before we can accept any pull requests you must sign our CLA.
For a deep dive into the components of the LiveEditor, read this wiki.