Sample projects showing how to integrate Blockly into your project.

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

In order to run each of the samples, cd into each sample directoy and run:

npm install

You can then run npm run start to start a web server.

All samples are configured to use port 3000
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: Blockly core, Blockly built-in blocks, the JavaScript generator and the English lang files.

If you need more flexibility, you'll want to define your imports more carefully:

import * as Blockly from 'blockly/core';

import 'blockly/blocks';

If your application needs to generate code from the Blockly blocks, you'll want to include a generator.

import 'blockly/python';

to include the Python generator, you can also import blockly/javascript, blockly/php, blockly/dart and blockly/lua.

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

Apache 2.0