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 https://thimble.mozilla.org (or https://bramble.mofostaging.net 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.
- Node.js (version 4.6 or later) [download]
- Virtualbox (version 5.1 or later) [download]
- Vagrant (version 1.9 or later) [download]
- Note: On Windows machines, you may need to restart your computer after installing Vagrant for it to be fully usable
The setup of Thimble can be divided into two distinct sections:
To fully use Thimble locally, you need to first setup Brackets locally first. This can be done by following the steps outlined below:
- Fork the Brackets repository and then clone it to your local machine using
git clone --recursive https://github.com/<your_username>/brackets.git(replace<your_username>with your Github username for the account you forked Brackets into) - In the cloned repository directory, run
npm installto install the dependencies for Brackets - Run
npm run buildto create the built editor files that will be used by Thimble - Run
npm startto start a server that will allow the editor to be accessed on http://localhost:8000/src - You can find out more information about setting up Brackets locally by referring to the instructions here
Thimble interacts with the Publish API (source managed in publish.webmaker.org) to store users, projects, files and other content as well as publish user projects.
For authentication and user management, Thimble uses Webmaker OAuth which consists of the Webmaker ID System (source managed in id.webmaker.org) and the Webmaker Login API (source managed in login.webmaker.org).
All three services along with Thimble are bundled together using Git subtrees and run together using Vagrant.
The first step is to fork and clone Thimble and navigate to the cloned directory in a terminal shell.
For the first time, to start all dependent services and Thimble, simply run:
vagrant up
This process can take a while depending on your internet connection speed as it needs to download all dependencies. Once you see a log that says Express server listening on http://localhost:3500, you can access Thimble on http://localhost:3500.
You can now make changes to the Thimble source code on your system and they should be automatically reflected on http://localhost:3500.
To stop running Thimble, simply press Ctrl+C twice.
To restart Thimble again, run:
vagrant reload --provision
This will take a much shorter time to setup compared to the vagrant up command.
Please refer to the Wiki for information on the localization procedures used in Thimble.
Our localization community is awesome! They work very hard to translate Thimble so that we can expand our global reach and engage even more users in other languages. We can't thank them enough!
To invalidate the production CloudFront distribution, make sure you have correct credentials set up in your env file. Then run node invalidate.js. Alternatively, if you have access to the heroku deployments, run the invalidation as a one-off dyno with heroku run npm run invalidate
Thimble uses the throng module to leverage Node's Cluster API for concurrency. To specify the number of server processes to start set WEB_CONCURRENCY to a positive integer value.
We're a friendly group, so feel free to chat with us in the "Thimble" channel on Mozilla Chat running on Mattermost. To access Mozilla Chat head to this link. Note that you will need to create an account first.
You can also download a mobile or desktop client for Mattermost here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent