scratch-blocks

Scratch Blocks is a library for building creative computing interfaces.

Version 2.0

The Scratch and Blockly teams are excited to announce the release of Scratch Blocks 2.0! This release is no longer a fork of Blockly, but rather depends on Blockly as a library. We've also updated from version (mumble mumble) of Blockly to version 12, which includes many, many bug fixes and improvements.

There will likely be a few bumps in the road as we work toward a user-facing release of this work, but we're excited to share the code and look forward to your feedback! If you see any problems, please check the issues and if you don't see it there, please consider filing an issue with as much detail as possible. Thank you!

Introduction

Scratch Blocks builds on the Blockly library from Google and the Raspberry Pi Foundation, to provide a design specification and codebase for building creative computing interfaces. Together with the Scratch Virtual Machine (VM) this codebase allows for the rapid design and development of visual programming interfaces. Like Blockly, Scratch Blocks is written in TypeScript and bundled with webpack. Unlike Blockly, Scratch Blocks does not use code generators, but rather leverages the Scratch Virtual Machine to create highly dynamic, interactive programming environments.

Documentation

The "getting started" guide including FAQ and design documentation can be found in the wiki.

Donate

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!

Development

npm ci
npm run build

Testing

Unit tests run in jsdom and need no additional setup:

npm run test:unit

Browser tests run in Chromium via Playwright. Install the browser once after npm ci:

npx playwright install chromium
npm run test:browser

To run all tests:

npm test

To debug a failing browser test with a visible browser window:

npm run test:browser -- --browser.headless=false

or, to also pause on startup and open devtools:

PWDEBUG=1 npm run test:browser

Committing

This project uses semantic release to ensure version bumps follow semver so that projects depending on it don't break unexpectedly.

In order to automatically determine version updates, semantic release expects commit messages to follow the conventional-changelog specification.

You can use the commitizen CLI to make commits formatted in this way:

npm install -g commitizen@latest cz-conventional-changelog@latest

Now you're ready to make commits using git cz.