This directory includes self-contained sample projects demonstrating techniques to include and extend the Blockly library.
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 interpretergraph-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.
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.
blockly-requirejs-sample: Loads RequireJS from a CDN and loads Blockly usingAMD.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.
blockly-rtc: Real-time collaboration environment on top of the Blockly framework.
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.
npm run boot
This will run npm install on every example.
npm run update
This will run npm update on every example.
npm run audit
This will run npm audit fix on every example.