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-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-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.