Skip to content
Sample projects demonstrating how to integrate Blockly into your project
JavaScript HTML TypeScript Vue CSS
Branch: master
Clone or download
samelhusseini Extend Blockly Vue Component to accept workspace options (#17)
* Extend Blocky vue sample making the component more extensible

* Pass workspace options instead

* Update svelte config
Latest commit 5c4eacb Nov 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
blockly-angular Update to Blockly v3 Oct 15, 2019
blockly-node
blockly-react Update to Blockly v3 Oct 15, 2019
blockly-requirejs Update to Blockly v3 Oct 15, 2019
blockly-svelte Extend Blockly Vue Component to accept workspace options (#17) Nov 5, 2019
blockly-umd Update to Blockly v3 Oct 15, 2019
blockly-vue Extend Blockly Vue Component to accept workspace options (#17) Nov 5, 2019
blockly-webpack
.gitignore
CODE_OF_CONDUCT.md Add blockly-samples for angular, node, react, requirejs, umd, vue and… Aug 5, 2019
CONTRIBUTING.md Add blockly-samples for angular, node, react, requirejs, umd, vue and… Aug 5, 2019
LICENSE Add blockly-samples for angular, node, react, requirejs, umd, vue and… Aug 5, 2019
README.md Style of blockly-svelte sample Oct 23, 2019
package.json Update Blockly version to use latest from npm. Aug 6, 2019

README.md

blockly-samples Built on Blockly

Sample projects showing how to integrate Blockly into your project.

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

You can’t perform that action at this time.