whatisgithub

What is blockly?

raspberrypifoundation/blockly — explained in plain English

Analysis updated 2026-06-24

13,404JavaScriptAudience · developerComplexity · 3/5Setup · moderate

In one sentence

A JavaScript library from the Raspberry Pi Foundation that lets developers embed a drag-and-drop visual code editor, where users snap together graphical blocks instead of typing, into any website or app.

Mindmap

mindmap
  root((repo))
    What it does
      Visual block editor
      Drag and drop coding
      Embeds in web apps
    Features
      Plugin system
      Custom block types
      Visual themes
    Tech Stack
      JavaScript
      npm package
      Semantic versioning
    Audience
      Educators
      App developers
      No code builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a kid-friendly visual block coding editor to an educational website without building a custom code editor.

USE CASE 2

Build a no-code automation tool where users visually assemble logic blocks that execute as real code.

USE CASE 3

Extend the block editor with custom block types using the plugin system for a specialized domain or language.

USE CASE 4

Embed an interactive coding tutorial into a learning platform that lets students construct programs by snapping blocks together.

What is it built with?

JavaScriptTypeScriptnpm

How does it compare?

raspberrypifoundation/blocklyrwaldron/johnny-fivemishoo/uglifyjs
Stars13,40413,40413,393
LanguageJavaScriptJavaScriptJavaScript
Setup difficultymoderatemoderateeasy
Complexity3/53/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

So what is it?

Blockly is a JavaScript library that lets developers add a visual code editor to a website or mobile app. Instead of typing code, users drag and snap together graphical blocks that represent programming concepts like variables, loops, and logical conditions. The idea is to lower the barrier to learning programming by removing the friction of syntax errors and the unfamiliar look of a text editor. The library is embedded in your own application. Developers add it to a project via npm (a standard package manager for JavaScript) and configure it to fit their needs. The documentation lives at a dedicated developers site run by Google, which includes getting-started guides, step-by-step tutorials called codelabs, and reference material. Blockly supports a plugin system. Plugins are self-contained add-ons that extend the editor with new block types, visual themes, custom rendering, or other features. A companion repository called blockly-samples provides official examples, codelabs, and a library of published plugins. This particular repository is the Raspberry Pi Foundation's fork of the original Blockly project from Google. The README does not explain how or why it differs from the upstream Google version, the code and structure otherwise appear the same. Releases follow semantic versioning, meaning a new major version number signals a breaking change. A beta channel is available on npm for testing upcoming features. For support, there is a developer forum where the maintainers say they typically respond within two working days. Bug reports and feature requests go through GitHub issues, and the team triages new issues within about a week.

Copy-paste prompts

Prompt 1
Show me how to embed a Blockly editor into a plain HTML page and export the generated JavaScript code when the user clicks a button.
Prompt 2
How do I create a custom block type in Blockly that represents a specific action in my app and generates valid JavaScript?
Prompt 3
How do I add the Blockly editor to a React web app using npm and configure it to show only specific block categories?
Prompt 4
What is the difference between the Raspberry Pi Foundation fork of Blockly and the original Google Blockly, should I use this fork?
Prompt 5
How do I install and use a Blockly plugin to add a custom visual theme or rendering style to the block editor?

Frequently asked questions

What is blockly?

A JavaScript library from the Raspberry Pi Foundation that lets developers embed a drag-and-drop visual code editor, where users snap together graphical blocks instead of typing, into any website or app.

What language is blockly written in?

Mainly JavaScript. The stack also includes JavaScript, TypeScript, npm.

How hard is blockly to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is blockly for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.