Skip to main content

Getting started with Blockly

1. Codelab overview​

What you'll learn​

This codelab will teach you how to modify a simple web app to include the Blockly visual programming library.

What is Blockly?​

Blockly is a library for building block programming apps.

Block programming allows users to create scripts and programs by using visual blocks, even if they do not know any programming language.

Blockly includes everything you need for defining and rendering blocks in a drag-n-drop editor. Each block represents a chunk of code that can be easily stacked and translated into code.

What you'll build​

MusicMaker, a web app where you can program buttons to play different sounds, using Blockly.

image image

What you'll need​

  • A browser
  • A text editor
  • Basic knowledge of HTML, CSS and JavaScript

This codelab is focused on Blockly. The app structure, non-relevant concepts and code are glossed over and are provided for you to simply copy and paste.