Virtual Machine for Clip CC
Last updated a month ago by alexcui .
BSD-3-Clause · Repository · Original npm · Tarball · package.json
$ cnpm install clipcc-vm 
SYNC missed versions from official npm registry.


ClipCC VM is a library for representing, running, and maintaining the state of computer programs written using ClipCC Blocks.


This requires you to have Git and Node.js installed.

To install as a dependency for your own application:

yarn install clipcc-vm

To set up a development environment to edit clipcc-vm yourself:

git clone
cd clipcc-vm
yarn install

Development Server

This requires Node.js to be installed.

For convenience, we've included a development server with the VM. This is sometimes useful when running in an environment that's loading remote resources (e.g., SVGs from the Scratch server). If you would like to use your modified VM with the full Scratch 3.0 GUI, follow the instructions to link the VM to the GUI.

Running the Development Server

Open a Command Prompt or Terminal in the repository and run:

yarn start


To view the Playground, make sure the dev server's running and go to http://localhost:8073/playground/ - you will be directed to the playground, which demonstrates various tools and internal state.

VM Playground Screenshot

Standalone Build

yarn run build
<script src="/path/to/dist/web/clipcc-vm.js"></script>
    var vm = new window.VirtualMachine();
    // do things

How to include in a Node.js App

For an extended setup example, check out the /src/playground directory, which includes a fully running VM instance.

var VirtualMachine = require('clipcc-vm');
var vm = new VirtualMachine();

// Block events

// Run threads

Abstract Syntax Tree


The Virtual Machine constructs and maintains the state of an Abstract Syntax Tree (AST) by listening to events emitted by the scratch-blocks workspace via the blockListener. Each target (code-running object, for example, a sprite) keeps an AST for its blocks. At any time, the current state of an AST can be viewed by inspecting the vm.runtime.targets[...].blocks object.

Anatomy of a Block

The VM's block representation contains all the important information for execution and storage. Here's an example representing the "when key pressed" script on a workspace:

  "_blocks": {
    "Q]PK~yJ@BTV8Y~FfISeo": {
      "id": "Q]PK~yJ@BTV8Y~FfISeo",
      "opcode": "event_whenkeypressed",
      "inputs": {
      "fields": {
        "KEY_OPTION": {
          "name": "KEY_OPTION",
          "value": "space"
      "next": null,
      "topLevel": true,
      "parent": null,
      "shadow": false,
      "x": -69.333333333333,
      "y": 174
  "_scripts": [


yarn test
yarn run coverage

Publishing to GitHub Pages

yarn run deploy

This will push the currently built playground to the gh-pages branch of the currently tracked remote. If you would like to change where to push to, add a repo url argument:

yarn run deploy -- -r <your repo url>


We provide Scratch free of charge, and want to keep it that way! Please consider making a donation to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!

Current Tags

  • 3.0.0-7                                ...           latest (a month ago)

10 Versions

  • 3.0.0-7                                ...           a month ago
  • 3.0.0-6                                ...           4 months ago
  • 3.0.0-5                                ...           4 months ago
  • 3.0.0-4                                ...           4 months ago
  • 0.1.0-alpha.4                                ...           8 months ago
  • 0.1.0-alpha.3                                ...           8 months ago
  • 3.0.0-3                                ...           8 months ago
  • 0.1.0-alpha.2                                ...           10 months ago
  • 0.1.0-alpha.1                                ...           10 months ago
  • 0.1.0                                ...           2 years ago
Maintainers (2)
Today 0
This Week 0
This Month 26
Last Day 0
Last Week 0
Last Month 2
Dependencies (21)
Dev Dependencies (33)
Dependents (0)

Copyright 2014 - 2016 © |