🌐 US-Proxy
>
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​

A version of Blockly's sample app, built from scratch.

Blockly workspace with a toolbox, blocks, and a code preview window that shows code generated from blocks in the workspace.

What you'll need​

  • A browser
  • A text editor
  • npm installed (instructions).
  • 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.