Welcome

Welcome to the Morphic Blocks documentation. Morphic Blocks is an open-source TypeScript library built on Google Blockly that renders one block model in multiple developer-defined modes — to support the gradual transition between block-based and text-based programming. These docs cover how to install it, define your blocks, and drive its views.

One block model, many modes

Define blocks once and render them as icons, blocks, or source text — modes are fully developer-defined.

Gradual block-to-text transition

Move learners from block-based to text-based programming step by step, without switching tools.

Bring your own UI

An embeddable library, not an app: headless components you can style and arrange freely.

Built on Blockly

The proven Google Blockly engine stays authoritative underneath — with morphic rendering on top.

Start here

IntroductionWhat Morphic Blocks is and the idea behind modes.

InstallationAdd the package and its peer dependencies to your project.

Quick StartA minimal end-to-end example: definitions → behaviors → mount.

Core ConceptsBlocks, elements, modes, presets, and the definitions format.

GuidesToolbox, codespace, preview, highlighting, selection sync, and more.

Useful links

• Playground — try Morphic Blocks in the browser.
• GitHub — source, issues, and releases.
• npm — the published package.