Blockly is a client-side

library A library is a collection of materials, books or media that are accessible for use and not just for display purposes. A library provides physical (hard copies) or digital access (soft copies) materials, and may be a physical location or a vi ...

for the programming language

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...

for creating block-based

visual programming language In computing, a visual programming language (visual programming system, VPL, or, VPS) is any programming language that lets users create programs by manipulating program elements ''graphically'' rather than by specifying them ''textually''. A VPL ...

s (VPLs) and editors. A project of

Google Google LLC () is an American Multinational corporation, multinational technology company focusing on Search Engine, search engine technology, online advertising, cloud computing, software, computer software, quantum computing, e-commerce, ar ...

, it is

free and open-source software Free and open-source software (FOSS) is a term used to refer to groups of software consisting of both free software and open-source software where anyone is freely licensed to use, copy, study, and change the software in any way, and the source ...

released under the Apache License 2.0. It typically runs in a

web browser A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used o ...

, and visually resembles the language Scratch. Blockly uses visual blocks that link together to make writing code easier, and can generate code in

, Lua,

Dart Dart or DART may refer to: * Dart, the equipment in the game of darts Arts, entertainment and media * Dart (comics), an Image Comics superhero * Dart, a character from ''G.I. Joe'' * Dart, a ''Thomas & Friends'' railway engine character * Da ...

, Python, or PHP. It can also be customized to generate code in any textual

programming language A programming language is a system of notation for writing computer programs. Most programming languages are text-based formal languages, but they may also be graphical. They are a kind of computer language. The description of a programming ...

History

Blockly development began in summer 2011. The first public release was in May 2012 at

Maker Faire Maker Faire is a convention of do it yourself aka-DIY enthusiasts started by '' Make'' magazine in 2006. Participants come from a wide variety of interests, such as robotics, 3D printing, computers, arts and crafts, and hacker culture. History ...

. Blockly was originally designed as a replacement for ''OpenBlocks'' in App Inventor. Neil Fraser began the project with Quynh Neutron, Ellen Spertus, and Mark Friedman as contributors.

User interface

The default

graphical user interface The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, ins ...

(GUI) of the Blockly editor consists of a toolbox, which holds available blocks, and where a user can select blocks, and a workspace, where a user can

drag and drop In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. In general, it can be used to ...

and rearrange blocks. The workspace also includes, by default, zoom icons, and a trashcan to delete blocks. The editor can be modified easily to customize and limit the available editing features and blocks.

Customization

Blockly includes a set of visual blocks for common operations, and can be customized by adding more blocks. New blocks require a block definition and a generator. The definition describes the block's appearance (user interface) and the generator describes the block's translation to executable code. Definitions and generators can be written in JavaScript, or using a visual set of blocks, the ''Block Factory'', which allows new blocks to be described using extant visual blocks; the intent is to make creating new blocks easier.

Applications

Blockly is used in several notable projects, including: * MIT's Scratch, visual programming environment for education * MIT's App Inventor, to create applications for Android. * Code.org, to teach introductory programing to millions of students in their Hour of Code program * Microsoft's MakeCode, "a free online learn-to-code platform where anyone can build games, code devices, and mod Minecraft" *

RoboBlockly RoboBlockly is a web-based robot simulation environment for learning coding and math. Based on Blockly, it uses a simple puzzle-piece interface to program virtual Linkbot, Lego Mindstorms NXT and EV3, as well as to draw and animate for beginners to ...

, a web-based robot simulation environment for learning coding and math * PICAXE, to control their educational microchips * SAM Labs, in

STEAM Steam is a substance containing water in the gas phase, and sometimes also an aerosol of liquid water droplets, or air. This may occur due to evaporation or due to boiling, where heat is applied until water reaches the enthalpy of vaporizatio ...

learn-to-code "education solutions"

Features

* Web-based using

Scalable Vector Graphics Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium sinc ...

(SVG), no Flash * Completely client-side JavaScript * Support of major web browsers including: Chrome,

Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current ...

Safari A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an impor ...

Opera Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a libr ...

Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical web browsers developed by Microsoft which was used in the Windows line of operating systems (in ...

(IE) * Support for many programmatic constructs including variables, functions, arrays * Minimal type checking supported, designed for dynamically typed languages * Easy to extend with custom blocks. * Clean code generation * Step-by-step code execution for tracing and debugging code * Localised into 100+ languages * Support for

left-to-right A writing system is a method of visually representing verbal communication, based on a script and a set of rules regulating its use. While both writing and speech are useful in conveying messages, writing differs in also being a reliable form ...

and

right-to-left In a script (commonly shortened to right to left or abbreviated RTL, RL-TB or R2L), writing starts from the right of the page and continues to the left, proceeding from top to bottom for new lines. Arabic, Hebrew, Persian, Pashto, Urdu, Kashmir ...

languages

References

External links

* {{Google FOSS Visual programming languages Google software Free software programmed in JavaScript