MistWarp editor

This repository contains the browser editor used by MistWarp. It is based on Scratch GUI and TurboWarp, with MistWarp's community, collaboration, project settings, and developer tools built in.

Requirements

• Node.js 20.19 or later
• pnpm 10.28.2, pinned in package.json
• The sibling scratch-vm, scratch-blocks, scratch-render, and scratch-paint repositories when changing linked editor packages

Run the editor

pnpm install --frozen-lockfile
pnpm start

Open http://localhost:8601/editor.html. Vite serves the editor and updates changed React components and styles automatically.

Run pnpm run link after installing when you need the sibling MistWarp packages. pnpm run reinstall refreshes dependencies without deleting the lockfile.

Builds

pnpm run build uses Vite to create the site in build/. Site builds and deployments compile all selected pages in one pass, sharing JavaScript and CSS between the editor, player, and community. Use pnpm run build:all to also build the GUI library in dist/, or pnpm run build:library for just the library. Use pnpm run preview to serve the production site on port 8601. Production pages use JavaScript modules and must be served over HTTP.

• pnpm run build:editor builds the editor as one JavaScript bundle and creates its index page.
• pnpm run build:community builds the community index page.
• MW_COMMUNITY=true pnpm run build includes the community, editor, player, fullscreen, embed, addon settings, and credits pages.
• pnpm run build:library builds the library alone. It exports ES modules in dist/scratch-gui.mjs and UMD in dist/scratch-gui.js. Load dist/scratch-gui.css alongside the library. React and ReactDOM are external dependencies.
• pnpm run build:stats writes module and asset sizes to stats.json in each output directory.

ROOT sets the site base URL and must end in /. BUILD_DIR changes the site output directory, PORT changes the server port, and ONLY_ENTRY selects an entry by name. ROUTING_STYLE, STATIC_PATH, EXTRA_META, ENABLE_SERVICE_WORKER, and the MW_* build values remain supported. Environment values come from Vite's .env files and the shell. Only the browser values listed in vite.config.mjs are exposed to client code.

The Vite configuration preserves the existing CSS module imports and handles the loader requests still shipped by the linked Scratch packages. GUI assets use Vite queries such as ?raw, ?url, ?inline, and ?worker; ?base64, ?arraybuffer, and ?recolor cover the editor's embedded assets.

Startup loads the block editor first and loads paint, asset catalogues, optional dialogs, and non-English translations on demand. Scratch Blocks is built from its generated Closure sources, so Vite can minify it without a nested development bundle. pnpm run build:report measures the initial JavaScript dependency graph in build/editor.html, including raw and gzip sizes.

When embedding the library with a non-English initial locale, await the exported prepareLocale() before rendering, or loadLocale(locale) when selecting the initial locale explicitly. Locale changes through the supplied Redux middleware load their dictionaries automatically.

Checks

pnpm run test:unit:ci
pnpm run test:smoke
pnpm run build

Use pnpm run test:unit:watch while working on unit-tested behavior. Use pnpm run test:unit:addons for the smaller addon settings suite.

The unit command covers every file under test/unit. Pull requests run the full unit suite and a production build.

Where editor code lives

• src/components/gui owns the main editor layout and responsive behavior.
• src/components/tw-settings-modal owns Settings pages and their navigation.
• src/components/menu-bar and src/lib/mw-menu-bar-layout.js own menu-bar rendering and saved layout.
• src/containers connects presentational components to the VM and Redux.
• test/unit tests component and library behavior. test/integration contains browser workflows against a built editor. pnpm run test:integration starts a local Vite preview server for those tests.

Keep settings destinations broad. Put related controls in tabs inside a page instead of adding another sidebar item.

License

TurboWarp's modifications to Scratch are licensed under the GNU General Public License v3.0. See LICENSE or https://www.gnu.org/licenses/ for details.

The following is the original license for scratch-gui, which we are required to retain. This is NOT the license of this project.

Copyright (c) 2016, Massachusetts Institute of Technology
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

src/lib/default-project/dango.svg is based on Twemoji and is licensed under CC BY 4.0 https://creativecommons.org/licenses/by/4.0/

Community translations

See TRANSLATING.md for catalogs, extraction, validation, and coverage. The community shares the editor language list and preference.