A browser-based live coding environment.
Permalink
Failed to load latest commit information.
build Initialize globals (#687) Oct 1, 2018
css Changing error to warnings for unknown CSS properties Jun 25, 2018
demos Remove PJSDebugger from code paths (#683) Sep 22, 2018
external Remove visibly, replace with Page Visibility API (#670) Aug 22, 2018
images resize images and build Jun 15, 2018
js Initialize globals (#687) Oct 1, 2018
sounds New sounds for "retro" sound set for getSound Jan 10, 2015
tests Remove PJSDebugger from code paths (#683) Sep 22, 2018
testutil Add comments based on review Jun 22, 2018
tmpl Make more strings translatable (#685) Sep 21, 2018
utils Fix eslint issues Oct 21, 2015
.arcconfig Add back the "userChangedCode" event, for bingo'ing an badge'ing purp… Jun 1, 2015
.arclint Update .arclint as per csilver's instructions Oct 13, 2015
.bowerrc Move browser-polyfill.min.js from live-editor.shared.js to live-edito… Jul 17, 2018
.codeclimate.yml exclude all files in subpaths Aug 3, 2015
.editorconfig Add .editorconfig fill to maintain indents, end-line char, and blank … Aug 4, 2015
.eslintrc Address review points Jul 10, 2018
.gitattributes Add .gitattributes for ignoring build (#674) Aug 22, 2018
.gitignore Remove need for symlinks entirely. Nov 8, 2014
.gitmodules Remove visibly, replace with Page Visibility API (#670) Aug 22, 2018
.jshintrc Add "esnext": true to .jshintrc so that .codeclimate doesn't complain… Aug 1, 2015
.travis.yml try the LTS version of Node Jun 14, 2018
LICENSE Added LICENSE Oct 21, 2014
PULL_REQUEST_TEMPLATE.md Create PULL_REQUEST_TEMPLATE.md Jul 10, 2018
README.md Add Chrome command Jun 21, 2018
babel-plugin.js Remove string templating from babel-plugin.js so that it will build o… Oct 22, 2015
bower.json bump deps and rebuild because some of the deps had 2 space tabs becau… Jan 7, 2015
build-all-images.js Fix eslint issues Oct 21, 2015
build-paths.json Remove PJSDebugger from code paths (#683) Sep 22, 2018
check.js Don't use templating in build files so that tests can run on travis-ci Oct 22, 2015
gulpfile.js Remove PJSDebugger from code paths (#683) Sep 22, 2018
lint_blacklist.txt Disable linting of more files to avoid issues when merging substates … Jan 11, 2018
package.json Adding precommit hook for test and build (#673) Aug 22, 2018

README.md

Build Status Code Climate

Live Code Editor (in maintence mode)

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.

Join the chat at https://gitter.im/Khan/live-editor

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:

Running

In order to run live-editor locally you'll have run a local web server. If you have python installed this can be accomplished by running the following command from the live-editor folder:

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.

Building

WARNING: This project requires node ~6 and npm ~3 in order for npm install to 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.

Testing

The tests are in the /tests folder. They use Mocha/Chai/Sinon. Gulp typically runs the tests when relevant files change, but you can explicitly run the tests with:

npm test

You can also run single test suites at a time - see gulpfile.js for what suites are available:

gulp test_output_pjs_assert

You can run the tests in the browser runner by opening the relevant webpage:

open tests/output/sql/index.html

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.

How you can help

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. :)

Pull Requests

When submitting pull request please do the following:

  • link to an issue, if no issue exists please create one
  • write automated tests for new functionality or bug fixes
  • include build files
  • run the automated tests
  • squash your commits into a single a commit

Before we can accept any pull requests you must sign our CLA.

How it works

For a deep dive into the components of the LiveEditor, read this wiki.

You can also watch these talks that the team has given about the editor: