Installation

Morphic Blocks lists Blockly as a dependency, so it is installed for you:

npm install morphic-blocks

bun add morphic-blocks

pnpm add morphic-blocks

Recent pnpm versions refuse a package version during its first day on npm (the minimum release age). Right after a Morphic Blocks release, pnpm add can therefore fail with ERR_PNPM_MINIMUM_RELEASE_AGE_VIOLATION. Wait a day, or allow that one version in pnpm-workspace.yaml:

minimumReleaseAgeExclude:
  - morphic-blocks@0.3.0

Blockly’s media

Blockly’s images and sounds load from blockly-media/ next to your page. The bundler plugin that comes with the package copies them there when dev or build starts:

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

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

With Parcel, Turbopack or no bundler, run morphic-blocks copy-media public/blockly-media before dev and build instead. See Privacy & External Requests for other folders and servers.

Optional: code editor packages

The code editor and the codespaces are built on CodeMirror 6. The CodeMirror packages are optional peer dependencies — install them only if you use those views:

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

They are loaded lazily: a project that never mounts a code editor never pays for them.

@codemirror/lang-javascript is needed only for the code editor, which shows the JavaScript generated from the blocks, useful for testing and debugging. Codespaces show your own languages and work without it.

Requirements

A bundler-based setup (Vite, or anything that resolves modern ESM). The library ships ES modules plus TypeScript declarations.
TypeScript is recommended — the public API is fully typed — but not required.

Next: the Quick Start.