Learn to Code With Mozilla’s ‘Thimble’ Editor

Editing Webmonkey.com in Thimble. Image: Screenshot/Webmonkey

Mozilla Thimble is a new web-based code editor, part of the company’s recently unveiled “Webmakers” project. Thimble is designed to give novice webmakers an easy-to-use online tool to quickly build and share webpages.

You can check out Thimble over at the new Mozilla Thimble website. Keep in mind that Mozilla hasn’t formally launched Thimble; the company is still testing, fixing bugs and iterating the app.

Thimble is slightly different than other online code editors you may have tried, putting the emphasis on teaching HTML to newcomers rather than catering to advanced users. Thimble offers side-by-side code editor and code output panels which help new users see immediate results. Type an <h1> and you’ll immediately see a headline. The instant feedback is not only helpful for spotting and fixing errors, but encouraging for those just starting out since you can see what you’ve created right away.

Thimble is very purposefully not aimed at veteran HTML junkies, but for those just learning how to write HTML — which is the focus of the Webmakers project — Thimble is one of the friendliest, easiest-to-use code editors we’ve seen.

Thimble can also load pre-made project templates to help users get started with some content that’s ready to build on. Currently the featured projects section of the Thimble homepage is still awaiting content, but among the coming projects is a tutorial on editing and creating your own Tumblr theme, as well as others from Mozilla’s various Webmaker partners.

To help new users get their Thimble-created projects on the web Mozilla has also bundled a publishing function directly into the editor. Once you’ve got your Thimble page looking the way you’d like it, just hit the “Publish” button and Thimble will output and host your page, offering up a URL to share with friends and another to edit your page if there’s something you need to change.