Skip to main content
Glama

scratch4js

A pnpm monorepo of small, focused JavaScript packages for working with Scratch and TurboWarp — edit .sb3 projects programmatically, talk to the Scratch website, drive it all from an AI agent, and build & bundle TurboWarp extensions.

šŸ“– Documentation: https://playforge-coding.github.io/scratch4js/

Packages

Path

Package

What it is

packages/scratch4js

scratch4js

The core library: read/edit .sb3 files with a small, declarative API.

packages/s-api4js

s-api4js

A class-based wrapper for the Scratch website API: read public data, and log in to download/edit/publish .sb3.

packages/scratch-mcp

scratch-mcp

An MCP server exposing the library's editing surface as tools, plus a TurboWarp live-reload bridge.

packages/tw-plugin-webpack

tw-plugin-webpack

webpack/Rspack plugin that bundles a multi-file TurboWarp extension into one IIFE-wrapped file.

packages/tw-plugin-rollup

tw-plugin-rollup

Rollup/Rolldown/Vite plugin that bundles a multi-file TurboWarp extension into one IIFE-wrapped file.

packages/create-tw-extension

create-tw-extension

Scaffolder (npm create tw-extension) for a new TurboWarp extension project with your choice of bundler.

packages/web-editor

browser-ide-kit

Reusable React building blocks for in-browser IDEs: split-pane layout, Monaco, an xterm/WebContainer terminal, file tree.

packages/tw-extension-maker

tw-extension-maker

In-browser IDE (built on browser-ide-kit) that bundles a TurboWarp extension in a WebContainer and previews it live.

packages/userscript

userscript

TurboWarp Desktop userscript (ES modules → one IIFE): scratch-mcp live-reload + real-time collaboration over a WebSocket relay.

Related MCP server: rbxsync-mcp

How they fit together

  AI agent / MCP client
          │  (MCP tools over stdio)
          ā–¼
   ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”   edits in memory   ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”
   │  scratch-mcp │ ──────────────────► │ scratch4js │
   ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”¬ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜   save → .sb3 file  ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜
          │ WebSocket bridge (localhost:9060)
          ā–¼  "loadSB3" → fetch /get.sb3
   TurboWarp Desktop + userscript  ──►  live preview

An agent edits a project through scratch-mcp; on save the server writes the .sb3 and signals the userscript, which reloads it into TurboWarp Desktop instantly.

Getting started

pnpm install
pnpm build          # build every package (-r build)
pnpm lint
pnpm fmt            # prettier --write .

Then:

  1. Install the userscript into TurboWarp Desktop (pnpm --filter userscript deploy; per-OS paths in its README).

  2. Run the MCP server and point your MCP client at it.

  3. Open .sb3 files, edit, and save_project to see changes live.

Workspace layout

.
ā”œā”€ā”€ packages/
│   ā”œā”€ā”€ scratch4js/          # the core library (+ examples + example.sb3)
│   ā”œā”€ā”€ s-api4js/            # Scratch website API wrapper
│   ā”œā”€ā”€ scratch-mcp/         # the MCP server + live-reload bridge
│   ā”œā”€ā”€ tw-plugin-webpack/   # webpack/Rspack extension bundler plugin
│   ā”œā”€ā”€ tw-plugin-rollup/    # Rollup/Rolldown/Vite extension bundler plugin
│   ā”œā”€ā”€ create-tw-extension/ # extension scaffolder CLI
│   ā”œā”€ā”€ web-editor/          # in-browser IDE building blocks
│   ā”œā”€ā”€ tw-extension-maker/  # in-browser extension IDE
│   └── userscript/          # TurboWarp Desktop userscript: live-reload + collaboration
ā”œā”€ā”€ docs/                    # Rspress documentation site
ā”œā”€ā”€ pnpm-workspace.yaml
└── package.json             # workspace root (build/lint/fmt delegate to -r)

Related MCP Connectors

Related MCP Servers