Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

A browser-based code editor for WebPPL (requires version 0.9.0 or higher)



<meta charset="UTF-8"> <!-- tell the browser that editor.js contains unicode -->
<script src="webppl.js"></script> <!-- compiled webppl library; get this from -->
<script src="webppl-editor.js"></script>
<link rel="stylesheet" href="webppl-editor.css">
// find all <pre> elements and set up the editor on them
var preEls ="pre")); { editor.setup(el, {language: 'webppl'}); });

webppl-editor installs these functions in the global namespace:

  • editor.setup(): converts a DOM element into an editor
  • editor.makeResultContainer(): used to insert custom output into the results section of the editor
  • editor.put([key,] object): supports working across multiple code boxes. Stores an object (using an optional key) for use in other code boxes. If no key is specified, you'll get an automatically generated one.
  • editor.get([key]): retrieves the object with key key. When called with no key, returns the entire store.
  • editor.MCMCProgress(): displays a progress bar during MCMC inference (work in progress).
  • print prints an object the results section (works both in WebPPL and vanilla Javascript).

We also ship the editor as editor.ReactComponent.


grunt browserify # makes webppl-editor.js
grunt css        # makes webppl-editor.css
grunt uglify     # makes webppl-editor.min.js
grunt bundle     # = browserify + css
grunt watch-js   # reruns browserify when it detects file changes
grunt watch-css  # reruns css when it detects file changes