git404hub

what is blockly fr?

raspberrypifoundation/blockly — explained in plain English

Analysis updated 2026-06-24

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

tl;dr

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.

vibe map

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

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 make with this?

VIBE 1

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

VIBE 2

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

VIBE 3

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

VIBE 4

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

what's the stack?

JavaScriptTypeScriptnpm

how it stacks up fr

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 i run it?

Difficulty · moderate time til it works · 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.

prompts (copy fr)

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 fr?

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.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.