CLI tool
RaspberryPiFoundation/blockly avatar
RaspberryPiFoundation/blockly

Blockly: the visual editor library behind drag-and-drop programming tools

The web-based visual programming editor.

13,578 stars3,879 forksTypeScriptApache-2.0

At a glance

What is it?
Blockly is a TypeScript library that adds a block-based code editor to a web app. This review covers how it installs, how the block model maps to generated code, and where a block editor is the wrong choice.
Who is it for?
Adopt Blockly if you are embedding a block-based editor into a web application and you are willing to own the block definitions, the code generator and the toolbox. Do not adopt it if you want a finished teaching product with lessons and levels, because Blockly is a library and the README points elsewhere for games and samples.
Can I use it commercially?
Yes. Apache-2.0 is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 1 day ago.
What is it written in?
Mainly TypeScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on September 30, 2026, and from our analysis. They are not legal advice.

Editorial analysis

What Blockly actually is, and who ends up using it

Blockly is not a product you open and program in. It is a library that adds a visual code editor to web apps, per the README, and the block model covers variables, logical expressions, loops and other code concepts. The audience is therefore application developers, not learners. Someone building a robotics dashboard, a spreadsheet formula builder, an internal automation tool or a classroom platform picks up Blockly so their users can assemble logic without typing syntax.

The README frames the benefit in user terms: people apply programming principles without worrying about syntax or a blinking cursor on the command line. That framing matters for scoping. Blockly gives you the editor surface. It does not give you a curriculum, an account system, a code runner or a sandbox. Those are the parts you build around it, and the README points to the separate blockly-samples repository for examples that show how others have done it.

How blocks become code: workspace, toolbox and generator

The architecture visible in the repository is a monorepo. The root package.json declares workspaces for packages/* and packages/plugins/*, and the root is private, so the published artifacts come from inside those workspaces. That layout is the first thing to understand: the library you install is one package inside a larger set, and plugins are separate packages rather than a folder you copy.

A Blockly integration has three moving parts. The workspace holds the blocks the user has assembled. The toolbox is the palette they drag from, and it is configuration you write, not something Blockly invents for you. The generator turns the block arrangement into text in a target language. Because the generator is a component you select or write, Blockly does not commit to JavaScript, Python or anything else by default. The plugin documentation describes plugins as self-contained code that can add fields, define themes and create renderers, which is where custom block appearance and behaviour live.

That split is the design trade-off. You get a stable editing surface and a lot of freedom in what the blocks mean. You also get the work of defining each block, its inputs, its serialization and its generated output. Nothing in the repository suggests a shortcut around that.

Installing Blockly and getting a first workspace on screen

There are two documented paths. For a new project, the README bootstraps with the create-package tool, which scaffolds an app rather than dropping a library into an empty directory:

bash
npx @blockly/create-package app my-cool-blockly-app --typescript

That command creates a project named my-cool-blockly-app with TypeScript already configured, so you skip the bundler and type setup that a bare library install leaves to you. For an existing application, the README's alternative is a plain npm install:

bash
npm install blockly

After either path, the README's next step is not a code snippet but a pointer: the developer site at docs.blockly.com holds the getting-started article and a codelab, and the live demo at the project's GitHub Pages URL shows a working editor you can compare against. That is where configuration of the toolbox and the initial workspace is documented, and it is the honest answer to how you get blocks on screen. The README itself stops at installation.

One practical note on versions. The README states that releases follow semantic versioning, that breaking changes get a new major version, and that patch versions are reserved for bug-fix patches between scheduled releases. If you are adding Blockly to a production application, the README is explicit that you should use the npm or GitHub release rather than the main branch, because features and APIs in main are subject to change until released.

Where Blockly is the wrong tool

Blockly assumes you are writing code around it. If you want a ready-made environment where a child opens a page and works through levels, Blockly is the wrong layer. The search traffic around Blockly games, mazes and turtles points at the demo and teaching experiences built on top of the library, not at the library itself, and the README does not present Blockly as a finished game or course.

The second limitation is API stability in the short term. The README says a newly released API is considered beta until the following release, that unreleased APIs may change radically, and that anything in main but not released is subject to change without warning. If your product depends on a Blockly API that landed in the current major version, you are exposed until the next one ships. The README's guidance is that an API which has been around for at least two releases will, as far as the maintainers can manage, avoid breaking changes. That is a reasonable policy and still a real constraint on how fast you can build against new surface area.

The third is triage capacity. The README states that bugs are typically triaged within one week and that the team is small, so feature requests may not be prioritized even when everyone agrees they are worthwhile. If your roadmap depends on an upstream feature, that dependency carries schedule risk you cannot control.

Blockly compared with Scratch, and what changes in practice

Scratch is the obvious point of comparison, and the difference is where the boundary sits. Scratch is a complete environment: editor, runtime, sprite and stage model, project format and sharing site. Blockly is the editor layer only. Choosing Blockly means you supply the runtime, the persistence format and the surrounding UI, and in exchange you control what the blocks mean and what language they generate.

That control is the reason to pick Blockly over embedding a finished block environment. If your users are configuring a data pipeline or writing rules for a device, a Scratch-shaped product is the wrong metaphor and its runtime is dead weight. If your users are children making animations, the extra work of building a runtime around Blockly is work someone else has already done in Scratch.

The second comparison worth making is between Blockly and a plain text editor with autocomplete. A text editor is smaller, faster to integrate and familiar to anyone who can already program. Blockly earns its place when syntax is the obstacle rather than the goal, which is exactly the case the README describes.

Maintenance, releases and what the Apache-2.0 licence means for you

The repository is not archived, and the last push was on 2026-09-21, so the project is being worked on. Recent releases are on a steady cadence: blockly-v13.3.0 on 2026-09-10, preceded by two beta builds of blockly-v13.2.2 in August 2026. The README describes a beta channel on npm, installed with npm install blockly@beta, for testing upcoming releases, with the caveat that it may be less stable and its APIs are subject to change.

Upgrade cost follows from the versioning policy. Major versions carry breaking changes, patch versions are bug fixes between scheduled releases, and the README notes that the team cherry-picks fixes into patch releases when there are breaking regressions such as a crash on a standard action or a rendering issue that makes Blockly unusable. That is a useful commitment to note when you plan a version pin, because it means a serious regression has a documented path to a patch.

On licensing, the repository is Apache-2.0 and the README links the LICENSE file. Apache-2.0 is a permissive licence that includes an explicit patent grant, which is often why companies accept it where they would hesitate over other terms. This is a description of the licence identifier, not legal advice; if your organization has a policy on permissive licences, run the LICENSE file past whoever owns that policy.

Editorial conclusion

Adopt Blockly if you are embedding a block-based editor into a web application and you are willing to own the block definitions, the code generator and the toolbox. Do not adopt it if you want a finished teaching product with lessons and levels, because Blockly is a library and the README points elsewhere for games and samples. Before committing, read the plugin overview and the getting-started codelab on docs.blockly.com, and check whether the generated code target you need already exists in blockly-samples.

Frequently asked questions

What is Blockly used for?

Blockly is a library that adds a visual code editor to web apps, using interlocking graphical blocks to represent concepts like variables, logical expressions and loops. Developers embed it so users can apply programming principles without dealing with syntax.

Is Blockly free?

The README states that all code is free and open source, and the repository is licensed under Apache-2.0. The README links the LICENSE file for the full terms.

Is Blockly for kids?

The README does not describe Blockly as a children's product. It describes a library for adding a visual editor to web apps, and points to a separate blockly-samples repository for examples and demos.

How do I install Blockly?

For a new project the README uses the create-package tool with npx @blockly/create-package app, and for an existing project it uses npm install blockly. The README then points to docs.blockly.com for getting-started guides and a codelab.

What is Blockly in computer terms?

It is a TypeScript library that renders a block-based programming editor inside a web page. The README describes it as a library that adds a visual code editor to web apps, with blocks representing code concepts such as loops and logical expressions.

Official sources

  1. License: Apache-2.0
  2. Project website
  3. RaspberryPiFoundation/blockly on GitHub
  4. README
  5. Releases
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/raspberrypifoundation-blockly.svg)](https://hysenlabs.com/projects/raspberrypifoundation-blockly)