JSPM

blockly

11.2.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 37099
  • Score
    100M100P100Q161453F
  • License Apache-2.0

Blockly is a library for building visual programming editors.

Package Exports

  • blockly
  • blockly/blocks
  • blockly/core
  • blockly/dart
  • blockly/javascript
  • blockly/lua
  • blockly/msg/ab
  • blockly/msg/ace
  • blockly/msg/af
  • blockly/msg/am
  • blockly/msg/ar
  • blockly/msg/ast
  • blockly/msg/az
  • blockly/msg/ba
  • blockly/msg/bcc
  • blockly/msg/be
  • blockly/msg/be-tarask
  • blockly/msg/bg
  • blockly/msg/bn
  • blockly/msg/br
  • blockly/msg/bs
  • blockly/msg/ca
  • blockly/msg/cdo
  • blockly/msg/ce
  • blockly/msg/cs
  • blockly/msg/da
  • blockly/msg/de
  • blockly/msg/diq
  • blockly/msg/dtp
  • blockly/msg/dty
  • blockly/msg/ee
  • blockly/msg/el
  • blockly/msg/en
  • blockly/msg/en-gb
  • blockly/msg/eo
  • blockly/msg/es
  • blockly/msg/et
  • blockly/msg/eu
  • blockly/msg/fa
  • blockly/msg/fi
  • blockly/msg/fo
  • blockly/msg/fr
  • blockly/msg/frr
  • blockly/msg/gl
  • blockly/msg/gn
  • blockly/msg/gor
  • blockly/msg/ha
  • blockly/msg/hak
  • blockly/msg/he
  • blockly/msg/hi
  • blockly/msg/hr
  • blockly/msg/hrx
  • blockly/msg/hsb
  • blockly/msg/hu
  • blockly/msg/hy
  • blockly/msg/ia
  • blockly/msg/id
  • blockly/msg/ig
  • blockly/msg/inh
  • blockly/msg/is
  • blockly/msg/it
  • blockly/msg/ja
  • blockly/msg/ka
  • blockly/msg/kab
  • blockly/msg/kbd-cyrl
  • blockly/msg/km
  • blockly/msg/kn
  • blockly/msg/ko
  • blockly/msg/ksh
  • blockly/msg/ku-latn
  • blockly/msg/ky
  • blockly/msg/la
  • blockly/msg/lb
  • blockly/msg/lki
  • blockly/msg/lo
  • blockly/msg/lrc
  • blockly/msg/lt
  • blockly/msg/lv
  • blockly/msg/mg
  • blockly/msg/mk
  • blockly/msg/ml
  • blockly/msg/mnw
  • blockly/msg/ms
  • blockly/msg/msg
  • blockly/msg/my
  • blockly/msg/mzn
  • blockly/msg/nb
  • blockly/msg/ne
  • blockly/msg/nl
  • blockly/msg/oc
  • blockly/msg/olo
  • blockly/msg/pa
  • blockly/msg/pl
  • blockly/msg/pms
  • blockly/msg/ps
  • blockly/msg/pt
  • blockly/msg/pt-br
  • blockly/msg/ro
  • blockly/msg/ru
  • blockly/msg/sc
  • blockly/msg/sco
  • blockly/msg/sd
  • blockly/msg/shn
  • blockly/msg/si
  • blockly/msg/sk
  • blockly/msg/skr-arab
  • blockly/msg/sl
  • blockly/msg/smn
  • blockly/msg/sq
  • blockly/msg/sr
  • blockly/msg/sr-latn
  • blockly/msg/sv
  • blockly/msg/sw
  • blockly/msg/ta
  • blockly/msg/tcy
  • blockly/msg/tdd
  • blockly/msg/te
  • blockly/msg/th
  • blockly/msg/ti
  • blockly/msg/tl
  • blockly/msg/tlh
  • blockly/msg/tr
  • blockly/msg/ug-arab
  • blockly/msg/uk
  • blockly/msg/ur
  • blockly/msg/uz
  • blockly/msg/vi
  • blockly/msg/xmf
  • blockly/msg/yo
  • blockly/msg/zgh
  • blockly/msg/zh-hans
  • blockly/msg/zh-hant
  • blockly/php
  • blockly/python

Readme

Blockly

Google's Blockly is a web-based, visual programming editor. Users can drag blocks together to build programs. All code is free and open source.

The source for this module is in the Blockly repo.

Example Usage

import * as Blockly from 'blockly/core';
Blockly.inject('blocklyDiv', {
    ...
})

Samples

For samples on how to integrate Blockly into your project, view the list of samples at blockly-samples.

Installation

You can install this package either via npm or unpkg.

unpkg

<script src="https://unpkg.com/blockly/blockly.min.js"></script>

When importing from unpkg, you can access imports from the global namespace.

// Access Blockly.
Blockly.thing;
// Access the default blocks.
Blockly.Blocks['block_type'];
// Access the javascript generator.
javascript.javascriptGenerator;

npm

npm install blockly

Imports

Note: Using import of our package targets requires you to use a bundler (like webpack), since Blockly is packaged as a UMD, rather than an ESM.

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

Requires

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} = require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

Applying messages

Once you have the message files, you also need to apply them.

Blockly.setLocal(En);

For a full list of supported Blockly locales, see: https://github.com/google/blockly/tree/master/msg/js

Docs

For more information about how to use Blockly, check out our devsite.

License

Apache 2.0