gitmyhub

scratch-gui

JavaScript ★ 4.8k updated 27d ago ▣ archived

Graphical User Interface for creating and running Scratch 3.0 projects.

The official browser-based editor for Scratch 3.0, where beginners and children build programs by snapping together visual code blocks, installable as an npm package for embedding.

JavaScriptReactnpmJestsetup: moderatecomplexity 3/5

Scratch GUI is the official interface for creating and running Scratch 3.0 projects. Scratch is a programming environment designed for beginners, especially children, where users build programs by snapping together visual code blocks. This repository contains the front-end user interface that users interact with in a browser: the block editor, the stage where projects run, the sprite and costume library, and the controls for saving and sharing projects.

The codebase is built using React, a JavaScript library for building browser interfaces. Developers who want to embed the Scratch editor in another website can install it as an npm package and include the components in their own project. Those who want to modify or experiment with the interface locally can clone the repository, install dependencies with npm, and run a local server that serves the editor at a localhost address in their browser.

The project is closely tied to other Scratch repositories: the underlying virtual machine that actually runs Scratch programs lives in a separate repository called scratch-vm, and the rendering engine and sound library are also separate packages. The README explains how to link a local copy of scratch-gui into those other repositories during development so changes can be tested without publishing to npm first.

Testing is done with a framework called Jest. The README walks through running unit tests, integration tests, and linting checks. Integration tests use a headless browser to load the built interface and simulate user interactions, so they require building the project first before they can run.

The README also covers common setup problems, including warnings about optional dependencies during installation and how to resolve peer dependency conflicts. There is a wiki page with steps for publishing the interface to GitHub Pages for anyone who wants to share a custom version of the editor publicly.

Where it fits