Installation

Morphic Blocks führt Blockly als Dependency, es wird also automatisch mitinstalliert:

npm install morphic-blocks

bun add morphic-blocks

pnpm add morphic-blocks

Aktuelle pnpm-Versionen lehnen eine Paketversion an ihrem ersten Tag auf npm ab (Mindestalter einer Version). Direkt nach einem Release von Morphic Blocks kann pnpm add deshalb mit ERR_PNPM_MINIMUM_RELEASE_AGE_VIOLATION scheitern. Warte einen Tag oder erlaube genau diese Version in pnpm-workspace.yaml:

minimumReleaseAgeExclude:
  - morphic-blocks@0.3.0

Blocklys Medien

Blocklys Bilder und Sounds werden aus blockly-media/ neben deiner Seite geladen. Das Bundler-Plugin, das mit dem Paket kommt, kopiert sie dorthin, sobald dev oder build startet:

// vite.config.ts (auch morphic-blocks/webpack, /rspack, /rollup, /esbuild)
import blocklyMedia from "morphic-blocks/vite";

export default { plugins: [blocklyMedia()] };

Mit Parcel, Turbopack oder ohne Bundler führe stattdessen morphic-blocks copy-media public/blockly-media vor dev und build aus. Andere Ordner und Server beschreibt Datenschutz & externe Anfragen.

Optional: Pakete für den Code-Editor

Der Code-Editor und die Codespaces basieren auf CodeMirror 6. Die CodeMirror-Pakete sind optionale Peer-Dependencies — installiere sie nur, wenn du diese Views nutzt:

npm install @codemirror/state @codemirror/view @codemirror/lang-javascript

bun add @codemirror/state @codemirror/view @codemirror/lang-javascript

pnpm add @codemirror/state @codemirror/view @codemirror/lang-javascript

Sie werden verzögert geladen (lazy): Ein Projekt, das nie einen Code-Editor einbindet, zahlt auch nicht dafür.

@codemirror/lang-javascript braucht nur der Code-Editor. Er zeigt das aus den Blöcken erzeugte JavaScript, nützlich zum Testen und Debuggen. Codespaces zeigen deine eigenen Sprachen und kommen ohne das Paket aus.

Voraussetzungen

Ein bundler-basiertes Setup (Vite oder alles, was modernes ESM auflöst). Die Bibliothek liefert ES-Module plus TypeScript-Deklarationen.
TypeScript wird empfohlen — die öffentliche API ist vollständig typisiert — ist aber nicht erforderlich.

Weiter zum Schnellstart.