Tag Archives: Blockly

Blockly Summit 2019: Rendering, Accessibility, and More!


It has been over eight years since we started work on Blockly, an open source library for building drag-and-drop block coding apps. In that time, the team has grown from a single developer to a small team and a large community. Blockly is now a standard in the CS education space, used by Scratch, MakeCode, AppInventor, and hundreds of other developers to enable tens of millions of kids around the world to create and express themselves with code.

But Blockly isn't only used for education. The library provides everything an app developer needs to create rich block coding languages and is highly customizable and extensible. This means Blockly is also used by hobbyists and commercial companies alike for business logic, computer games, virtual reality, robotics, and just about anything else you can do with code.


The work we do on Blockly wouldn't be possible without the many folks who contribute back with code, suggestions, and support on the forums. As such, we were very excited to welcome around 30 members of the Blockly open source community to our second annual Blockly User Summit and to be able to make all of the talks available online!

The summit spanned two days in October and included 16 talks, over half of which were given by external contributors, and a Q&A with the Blockly team. The talks covered everything from Blockly's brand new rendering framework and building custom fields to explorations in performance and debugging block code. Check out the full playlist.

We also held a hackathon on the second day of the summit, with quick start guides for using our new rendering and accessibility APIs. If you're new to Blockly and you'd like a good starting point, take a look at our CodeLab and if you build your own cool demo let us know on our forums.



By Erik Pasternak, Kids Coding Team

Scratch 3.0’s new programming blocks, built on Blockly

Posted by Erik Pasternak, Blockly team Manager

Coding is a powerful tool for creating, expressing, and understanding ideas. That's why our goal is to make coding available to kids around the world. It's also why, in late 2015, we decided to collaborate with the MIT Media Lab on the redesign of the programming blocks for their newest version of Scratch.

Left: Scratch 2.0's code rendering. Right: Scratch 3.0's new code rendering.

Scratch is a block-based programming language used by millions of kids worldwide to create and share animations, stories, and games. We've always been inspired by Scratch, and CS First, our CS education program for students, provides lessons for educators to teach coding using Scratch.

But Scratch 2.0 was built on Flash, and by 2015, it became clear that the code needed a JavaScript rewrite. This would be an enormous task, so having good code libraries would be key.

And this is where the Blockly team at Google came in. Blockly is a library that makes it easy for developers to add block programming to their apps. By 2015, many of the web's visual coding activities were built on Blockly, through groups like Code.org, App Inventor, and MakeCode. Today, Blockly is used by thousands of developers to build apps that teach kids how to code.

One of our Product Managers, Champika (who earned her master's degree in Scratch's lab at MIT) believed Blockly could be a great fit for Scratch 3.0. She brought together the Scratch and Google Blockly teams for informal discussions. It was clear the teams had shared goals and values and could learn a lot from one another. Blockly brought a flexible, powerful library to the table, and the Scratch team brought decades of experience designing for kids.

Champika and the Blockly team together at I/O Youth, 2016.

Those early meetings kicked off three years of fun (and hard work) that led to the new blocks you see in Scratch 3.0. The two teams regularly traveled across the country to work together in person, trade puns, and pore over designs. Scratch's feedback and design drove lots of new features in Blockly, and Blockly made those features available to all developers.

On January 2nd, Scratch 3.0 launched with all of the code open source and publicly developed. At Google, we created two coding activities that showcase this code base. The first was Code a Snowflake, which was used by millions of kids as part of Google's Santa Tracker. The second was a Google Doodle that celebrated 50 years of kids coding and gave millions of people their first experience with block programming. As an added bonus, we worked with Scratch to include an extension for Google Translate in Scratch 3.0.

With Scratch 3.0, even more people are programming with blocks built on Blockly. We're excited to see what else you, our developers, will build on Blockly.

Introducing Blockly 1.0 for Android and iOS

Posted by Erik Pasternak and the Kids Coding Team

Over the past five years, developers have created hundreds of projects with Blockly, our open source library for creating block-based coding experiences. These have ranged from education platforms like Code.org to electronics kits like littleBits and even Android app creation tools like MIT App Inventor. Last year, we also announced our collaboration with the Scratch Team to develop Scratch Blocks—a fork of Blockly optimized for creating coding apps for kids.

Today, we're finalizing our 1.0 release of Blockly on Android and iOS. These versions have everything you need to use Blockly natively in your mobile app, including:

  • Blockly's standard UI
  • Custom blocks, toolbox categories, and layouts
  • Functions, variables, mutators, and extensions
  • Code generation in JavaScript, Python, Dart, PHP, and Lua
  • Internationalization support (including for RTL languages)

While our 1.0 update today is focused on native mobile, we've also made several updates to the web project over the past six months. We've made major improvements to performance and testing, added more structured APIs, and improved touch support for the mobile web. In addition, we improved Internet Explorer and Edge support; Blockly is fully supported on IE10+.

We've done a lot of work to ease cross platform development, too! All blocks can now be defined by JSON, allowing a single set of block definitions to be used for web, iOS, and Android. Check out the documentationfor more details on all three platforms.

Get started right away with our iOS Codelab (Android coming soon)! To learn more about Blockly, check out the above intro video, visit our developer site, join our mailing list, or jump right into the code for web, Android, or iOS.

Blockly for iOS

Posted by Champika Fernando, Product Manager, Kids Coding

At Google I/O, we announced our ongoing investment in Blockly with the release of a native Android version. We also highlighted significant improvements to the performance of web Blockly, which enables better rendering performance on mobile devices. Now iOS developers will have access to an open-source developer preview of Blockly for iOS that supports building better experiences on mobile, including multi-touch and enhanced animations as new experimental features.

Today’s release supports our ongoing efforts to enable developers to create consistent, high-quality, beginner programming experiences - as block-based programming interfaces can make coding more accessible by removing syntax errors and supporting “tinkerability.” We believe that coding is more than just a set of technical skills; coding is a valuable tool for everyone, empowering users from around the globe to imagine, invent, and explore.

Blockly Turtle running on iOS

With Blockly for iOS, developers can add Blockly views and fragments directly into their iOS app. This will offer tighter integration and improved performance compared to using a WebView. In this developer preview, blocks are currently optimized for tablets, but ready to customize for any app.

In addition, if you already use Blockly we're releasing a major update to the tools for creating custom blocks and configuring Blockly for your app, check out the new Blockly Developer Tools. The new tools allow you to edit and maintain a library of custom blocks, quickly configure toolboxes, and export and import files to local storage.

Click here to learn more, and get started on Blockly for iOS today. And to share feedback and get news, we welcome you to join the Blockly mailing list. We look forward to seeing your future builds!

Project Bloks: Making code physical for kids

Posted by Joao Wilbert, Creative Lead and Zebedee Pedersen, Creative Technologist, Google Creative Lab

When we were kids, physical things like toys and blocks helped us learn—inspiring curiosity and imagination in a fun, playful way. We think there’s no reason that shouldn’t also be possible when it comes to Computer Science.

When kids learn to code, they’re not just learning how to program computers, they’re learning a new language for creative expression and developing computational thinking: a skillset that will help prepare them to solve all kinds of problems. Making code physical — known as tangible programming — offers a unique way to combine the way children innately play and learn with computational thinking.

Earlier this week we announced a new research initiative called Project Bloks. The project is a collaboration between Google, IDEO and Stanford’s Paulo Blikstein, inspired by — and building upon — a long history of educational theory and research in the field of tangible programming.

The ultimate goal of Project Bloks is to create an open hardware platform for physical programming experiences to help kids develop computational thinking through play. By creating an open platform, Project Bloks will allow designers, developers and researchers to focus on innovating, experimenting and creating new ways to help kids develop computational thinking. Our vision is that, one day, the Project Bloks platform could become for tangible programming what Blockly is for on-screen programming.

As a first step, we’ve created a system for physical programming and built a working prototype with it. We’re sharing our progress before conducting more research over the summer to inform what comes next.

Want to get involved?
We are currently looking for participants (educators, developers, parents and researchers) from across the globe who are interested in helping shape the future of Computer Science education by remotely taking part in our research studies later in the year. If you would like to be part of our research study or simply receive updates on the project, please sign up here.

For more detailed information about the technology behind Project Bloks, check out our recent post on the Google Research Blog and our position paper. And to learn more about our other initiatives aimed at driving CS education forward and helping kids develop computational thinking skills, check out programs like CS First and Made with Code; and tools like Coding with Chrome, Blockly and Pencil Code.