GSoC/GCI Archive
Google Summer of Code 2015

Pencil Code Foundation

License: MIT license

Web Page:

Mailing List:

Pencil Code is a programming tool for beginning coders. We help beginners learn professional languages with a novel block-and-code editor for Javascript and Coffeescript, a jQuery turtle library, and a node.js server that provides storage and services.  Pencil Code has been used in classrooms from K-12 to college.

Pencil Code is fully open source; it is implemented in Javascript and Coffeescript, incorporating several major components including Iced Coffeescript, the Droplet and ACE editors, and


  • Block Editing for HTML and CSS I want to work on the suggested project 'Block Editing for HTML and CSS' this summer. The aim is simple, to implement a good parser and an adapter for both the languages and modify droplet to add any feature that goes well with the concept and enhances productivity. This will be a great way for kids to start learning Web Development.
  • Visual Debugger for Pencil Code Pencil Code has a simple debugger that shows some visual information about how your program executed, but it is very limited in what it can do. It would be very helpful to users of Pencil Code to be able to follow the execution of their programs both forward and backward, step by step, with much more information about the program state displayed to them, all with a beginner-friendly UI. My proposal is to work with the Pencil Code team to implement this visual debugger.
  • Visual Thumbnails of Projects This project is to generate thumbnails for student programs and display them when browsing projects. As stated on the ideas page, this task can be performed in either the server side or the browser side. Both these approaches have their challenges, as they might not render the output faithfully to what the student sees when actually running the program. My approach is to combine these two ways to make them complement each other so as to overcome the drawbacks.