explaingit

scratchfoundation/scratch-gui

4,784JavaScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

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.

Mindmap

mindmap
  root((scratch-gui))
    What it is
      Scratch 3.0 editor
      Block coding interface
      Browser-based
    Features
      Block editor
      Stage and sprites
      Costume library
      Save and share
    Development
      React components
      npm package
      Link to scratch-vm
    Testing
      Jest unit tests
      Integration tests
      Headless browser
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed the Scratch 3.0 block editor into your own website using the npm package.

USE CASE 2

Modify the Scratch interface locally to add custom blocks, categories, or features.

USE CASE 3

Run the full Scratch editor in your browser during development by starting a local server.

USE CASE 4

Test changes to the editor with Jest unit tests and headless browser integration tests.

Tech stack

JavaScriptReactnpmJest

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js and npm, linking to other Scratch repos during development requires npm link steps.

In plain English

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.

Copy-paste prompts

Prompt 1
How do I embed the Scratch 3.0 editor into my own React application using the scratch-gui npm package?
Prompt 2
Show me how to run scratch-gui locally for development and link it to a local copy of scratch-vm.
Prompt 3
How do I add a new block category to the Scratch 3.0 editor by modifying scratch-gui source code?
Prompt 4
How do I run scratch-gui integration tests that simulate user interactions in a headless browser?
Open on GitHub → Explain another repo

← scratchfoundation on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.