examples

Blockly Examples

This directory includes self-contained sample projects demonstrating techniques to include and extend the Blockly library.

Samples

Usage Demos

• backpack-demo: A demo of two Blockly instances with a shared backpack.
• custom-dialogs-demo: A demo overriding Blockly browser dialogs with custom implementations.
• custom-tooltips-demo: An example of using a custom tooltip renderer.
• fixed-demo: A demo injecting Blockly into a page as a fixed element.
• generator-demo: A demo of generating code from blocks and running it in a sandboxed JavaScript interpreter
• graph-demo: A demo of giving instant feedback as blocks are changed.
• headless-demo: A demo of generating Python code from XML with no graphics.
• interpreter-demo: A demo of executing code step-by-step with a sandboxed JavaScript interpreter.
• max-blocks-demo: A demo limiting the total number of blocks allowed for academic exercises.
• mirror-demo: A demo using two Blockly instances connected as leader-follower.
• pitch-field-demo: A demo of creating custom block fields.
• resizable-demo: A demo of injecting Blockly into a page as a resizable element.
• rtl-demo: A demo of what Blockly looks like in right-to-left mode (for Arabic and Hebrew).
• single-direction-scroll-demo: A demo of configuring single-direction scrollbars.
• toolbox-demo: A demo of a complex category structure for the toolbox.
• turtle-field-demo: A demo of creating custom block fields.

Codelabs

The Blockly Codelabs refer to this example code.

• context-menu-codelab: Starter code and completed code for the codelab on context menu options.
• custom-toolbox-codelab: Starter code and completed code for the codelab on how to customize your toolbox.
• getting-started-codelab: Code for the Blockly getting started codelab.
• theme-extension-codelab: Starter code and completed code for the codelab on applying themes.
• validation-and-warnings-codelab: Starter code and completed code for the codelab on validating blocks and displaying warnings.

Integrating Blockly

• blockly-requirejs-sample: Loads RequireJS from a CDN and loads Blockly using AMD.
• blockly-umd-sample: Loads the UMD build of Blockly (blockly.min.js), both from node_modules and from Unpkg.
• blockly-webpack-sample: Using Blockly in Webpack.
• blockly-node-sample: Using Blockly in Node.js, loaded using require (CommonJS).
• blockly-angular-sample: Blockly in an Angular project, defines an Angular Blockly Component.
• blockly-react-sample: Blockly in a React project, defines a React Blockly Component.
• blockly-svelte-sample: Blockly in a Svelte project, defines a Svelte Blockly Component.
• blockly-vue-sample: Blockly in a Vue project, defines a Vue Blockly Component.
• blockly-vue3-sample: Blockly in a Vue3 project, defines a Vue Blockly Component.
• blockly-parcel: Using Blockly with Parcel.

Real-time Collaboration

• blockly-rtc: Real-time collaboration environment on top of the Blockly framework.

Prerequisites

Install node and npm.

Running

cd <any sample folder>
npm install
npm run start

Browse to http://localhost:3000

You may need to refer to a sample's README for further setup and running instructions.

Development

Bootstrap

npm run boot

This will run npm install on every example.

Maintenance

npm run update

This will run npm update on every example.

npm run audit

This will run npm audit fix on every example.