raspberrypifoundation/blockly

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

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

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

Things people build with this

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.

Tech stack

JavaScriptTypeScriptnpm

Getting it running

Difficulty · moderate Time to first run · 30min

In plain English

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?

Open on GitHub → Explain another repo

← raspberrypifoundation on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.