Sample projects showing how to integrate Blockly into your project.
blockly-requirejs-sample: Loads RequireJS from a CDN and loads Blockly using
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 (
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.
Running the samples
In order to run each of the samples, cd into each sample directoy and run:
You can then run
npm run start to start a web server.
All samples are configured to use port
so open http://localhost:3000 to view each sample in the browser.
Blockly has an active developer forum. Please drop by and say hello. Show us your prototypes early; collectively we have a lot of experience and can offer hints which will save you time. We actively monitor the forums and typically respond to questions within 2 working days.
You can install the
blockly package on npm.
npm install blockly
When you import Blockly with
import * as Blockly from 'blockly'; you'll get the default modules:
If you need more flexibility, you'll want to define your imports more carefully:
import * as Blockly from 'blockly/core';
Blockly built in blocks
If your application needs to generate code from the Blockly blocks, you'll want to include a generator.
to include the Python generator, you can also import
import * as Fr from 'blockly/msg/fr'; Blockly.setLocale(Fr);
To import the French lang files. Once you've imported the specific lang module, you'll also want to set the locale in Blockly.
For a full list of supported Blockly locales, see: https://github.com/google/blockly/tree/master/msg/js