blockly-samples

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.

Running the samples

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.

Support

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.

Get Blockly

You can install the blockly package on npm.

npm install blockly

Importing 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:

Blockly Core

import * as Blockly from 'blockly/core';

Blockly built in blocks

import 'blockly/blocks';

Blockly Generators

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.

Blockly Languages

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

License

Apache 2.0