Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Online code editor geared to people teaching and learning HTML, CSS, and JavaScript.
JavaScript CSS HTML
Failed to load latest commit information.
default Fix #541 - create default empty project
frontend/src Fix #581 - Added server linting options
lib Fix #1011 - Catch JSON.parse errors without throwing and crashing the…
locale/en_US s/webmaker/Webmaker, s/css/CSS.
migrations Fix Bug 912992 - Add makeid to thimble project. Add migration scripts
public Disable button when title empty
routes Closes #770: Sort projects by date edited
screenshots Fix #741 - update README
tests/lib rebasing
views Fix #1138, #817 - user menu should open when clicked vs hovered.
.gitignore Add requirejs build step to bundle everything in dist/main.js
.jshintrc Fix #581 - Added server linting options
.travis.yml Fix grunt install location for Heroku (r=sedge)
Gruntfile.js Review fixes
Procfile heroku env var Fixed #1117 - Fix documentation to match new db schema
app.js Fast-follow to fix app.js crash on startup
bower.json Fix #645 - Don't use CDNs, improve requirejs config/loading
constants.js Make default project name configurable only by the server
env.dist Added 3 new projects to the homepage
package.json Run grunt without a path in the postinstall script
robots.txt bug1007695 - disallow /data from crawlers


Thimble is Mozilla's online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. You can try it online by visiting (or for our staging server).


You can read more about some of Thimble's main features in the wiki, or watch a demo video.

Thimble uses a modified version of the amazing Brackets code editor updated to run within web browsers. You can read more about how it works in this blog post.

Thimble requires a modern web browser, and we recommend using Mozilla Firefox or Google Chrome.


Thimble is non-trivial to run locally, due to its dependence on a number of other services. In order to run Thimble, the following things are required. The following is an abbreviated guide to getting it all set up. Please see each server's README for more details.

You'll need

  • Bramble
  • Thimble
  • Webmaker ID server
  • Webmaker Login Server
  • PostgreSQL Database
  • Webmaker Publishing Server

Installing the Parts




  • Install Postgres via Homebrew
    • Get Homebrew -
    • Run brew install postgresql to install PostgreSQL once Homebrew is installed
  • Run initdb -D /usr/local/var/postgres to initialize PostreSQL
    • If this already exists, run rm -rf /usr/local/var/postgres to remove it
  • Run postgres -D /usr/local/var/postgres to start the PostgreSQL server
  • Run createdb publish to create the Publish database

  • These steps assume you've followed the PostgreSQL steps above, including creating the publish database.
  • Clone
  • Run npm install to install dependencies
  • Run npm run env
  • Run npm install knex -g to install knex
  • Run npm run knex to seed the publish database created earlier
  • Run npm start to run the server

Getting Ready to Publish

To publish locally, you'll need to do the following...

1. Teach the ID server about the Publish server

  • Run createdb webmaker_oauth_test to create a test database
  • In your folder

    • Run node scripts/create-tables.js
    • Edit scripts/test-data.sql and replace it's contents with:

        INSERT INTO clients VALUES
          ( 'test',
            '["password", "authorization_code"]'::jsonb,
            '["code", "token"]'::jsonb,
            'http://localhost:3500/callback' )
    • Run node scripts/test-data.js

      • You'll see a INSERT 0 1 message if successful

2. Set up the local data folder

Instead of publishing to Amazon AWS, we'll be publishing to a local folder. Perform the following steps to set this up.

  • Run npm install -g http-server && mkdir -p /tmp/mox/test && cd /tmp/mox/test && http-server -p 8001
  • Run cd /tmp/mox/test && http-server -p 8001 to start the server
  • In your folder
    • Open the .env file
    • Make sure that PUBLIC_PROJECT_ENDPOINT="localhost:8001"` is set as shown here
    • Restart publish server

3. Sign In

To publish locally, you'll need an account.

  • Go to http://localhost:3000/account
  • Click Join Webmaker and complete the process, you can use a fake email
  • When you've created your account, click Set permanent password instead
    • This lets you authenticate your account without needing email
  • Go back to Thimble and Log In with your new account

Running the parts

This is the list of commands to get each part up and running.

  • Thimble npm start
  • Bramble npm start
  • PostgreSQL Database postgres -D /usr/local/var/postgres
  • Webmaker ID server npm start
  • Webmaker Login Server npm start
  • Webmaker Publishing Server npm start
  • Local publish folder cd /tmp/mox/test && http-server -p 8001

Development additionals

We handle JS, HTML and CSS linting through grunt, which is very simple to set up if you don't have it installed already:

npm install -g grunt-cli

After this, simpy run grunt before commiting code and you should be good to go.

Building the front-end

Run grunt requirejs:dist to regenerate the front-end dist/ folder if you so desire (it's only necessary in production). See Gruntfile.js for details.

NOTE: Our front-end is in transition from an older architecture using Requirejs to a new one using our build system. Check in our IRC channel ( for the latest state of development.

Something went wrong with that request. Please try again.