Introducing the New Thimble, an Educational Code Editor for Teaching and Learning the Web

Hannah Kane

Today, Mozilla is introducing the new Thimble, an upgraded tool for teaching and learning web literacy in a simple, hands-on and visual fashion.

We believe the Web is a better place when everyone can read, write and participate online, a belief that served as our inspiration for first creating Thimble in 2012. With Thimble, users write and edit HTML, CSS, and JavaScript on the left side of their screen, and watch their code come to life on the right. Learners can start with simple remixes, changing words and images on a page to familiarize themselves with code and build confidence. Learners can also work their way toward creating entire web pages from scratch. We’ve seen Thimble used by educators in amazing ways: middle schoolers in Virginia building apps, activists in Barcelona designing net neutrality posters, and university students in Mombasa hacking together projects.

Thimble editor and preview paneThimble exemplifies the hands-on, collaborative learning philosophy at the core of Mozilla’s work. Thimble can be used by educators to create a customized and interactive classroom experience, or used by independent learners eager to teach themselves via step-by-step tutorials. All of Thimble’s creations are open source and fully remixable. And Thimble itself is free and open source, always. In 2014, Thimble was recognized with the ON for Learning Award from Common Sense Media, an accolade for outstanding digital media products that educate and engage young people.

So, what’s new with this version of Thimble? We’ve built enhancements that transform Thimble into not just a better code editor, but also a rich platform for educators to build curriculum on. Updates include:

  • Expanded capabilities. Users can now build and link multiple web pages, rather than just one, within a single project
  • A helping hand. A more guided learning experience featuring easy-to-use tutorials, auto-closing tags and autocomplete
  • A streamlined interface. A sleeker look and feel with light and dark theme options, an easy-to-use color picker, and easy access to all of your files and projects
  • Drag, drop and unzip. You can now drag and drop a zipped website into the editor, expand it, and start hacking immediately
  • Better previews. A mobile browser preview mode, to see how your project will appear on the mobile Web
  • So much more. Auto save, extensions, a selfie-taker and other new features

The new Thimble is the result of collaboration between Mozilla and the Seneca College Centre for Development and Open Technology, and research was funded by the Natural Science and Engineering Research Council of Canada (NSERC). The new, more powerful Thimble is also made possible through our incorporation of the open source text editor Brackets. Read more about Seneca and Brackets here.

The Thimble community has a rich history of creativity: teachers create template projects for their students to remix; students remix each others projects for collaborative learning; and educators share their curriculum and teaching activities with colleagues. We’re excited to see what educators and learners create next. Use Thimble to help others read, write and participate online — and make the Web a better place.

https://thimble.mozilla.org/

Questions? Reach us anytime at @MozTeach or teachtheweb@mozilla.com, and watch our introduction video below:

 

7 responses

Post a comment

  1. Kevin Hodgson wrote on ::

    Does the new Thimble require us to create an entirely new Webmaker account? Is there a way for students to access and post without the need of email?
    Thanks
    I like the changes and improvements …
    Kevin

    Reply

  2. Hannah wrote on :

    Currently, publishing on Thimble does require a Webmaker account, which requires an email address. (You should not need to create a *new* Webmaker account, though you may need to create a new password, if you haven’t logged in since we updated our authentication system.) We’re exploring adding functionality that would allow an educator, for example, to create a single “classroom” account, and students could post projects to that account without having their own.

    Reply

  3. Jason Jurotich wrote on ::

    Will togethersj be added to Thimble (or something similar) so that students can collaborate easier? It was really helpful in the past. Thanks.

    Reply

    1. Hannah wrote on :

      We don’t have any immediate plans to integrate TogetherJS, though it’s definitely been raised as a useful idea. Feel free to follow along or comment on this ticket: https://github.com/mozilla/thimble.mozilla.org/issues/485

      Reply

      1. brendon wrote on :

        Is this Thimble web editor also available to use on any high Android mobile version?

        Reply

  4. solace wrote on ::

    when will thimble b built as an offline app? so one cn operate it wit ease,or network problem

    Reply

    1. Hannah wrote on :

      We don’t currently have this is our roadmap, but it’s an intriguing idea. Thanks for sharing.

      Reply

Post Your Comment