Dev Mode

morph dev starts a development environment with live hot reload. The native window stays open while you edit — changes appear instantly without restarting.

What Happens

File save  →  File watcher  →  Pipeline  →  IR JSON  →  loopback TCP  →  morph_devrt
                                                   │
                               JS logic  →  logic.<hash>.so  →  dlopen + rewire

1. File watcher detects a change in your .mx, .css, or .ts files (100ms debounce)
2. Pipeline re-runs: Oxc parse, lightningcss, build IR, layout, serialize
3. JS logic is translated to C++ via morpher, compiled to logic.<hash>.so with g++/clang++ (configured via build.dev_cxx in morph.config.json), and loaded via dlopen
4. IR JSON is sent over loopback TCP (127.0.0.1:39573, ephemeral fallback on collision) to morph_devrt
5. Window swaps the node tree and re-wires signals — no restart needed

Starting Dev Mode

morph dev

This will:

1. Ensure runtime is installed (downloads from GitHub if missing)
2. Build the dev runtime binary (morph_devrt) via CMake if it doesn't exist
3. Launch morph_devrt
4. Launch the native window
5. Watch for file changes

Hot Reload

When you save a file:

• The IR is re-sent to the running window
• The node tree swaps instantly
• Your JS logic .so is hot-reloaded — signals and effects are re-wired in place
• DevTools state (open/closed, active tab) is preserved

The window never closes. Only the content inside it changes.

Dev Runtime Binary

morph_devrt is a pre-compiled C++ binary that:

• Opens a GLFW window
• Listens on loopback TCP (127.0.0.1:39573, ephemeral fallback)
• Receives IR JSON and builds a node tree
• Handles events, layout, and OpenGL rendering
• Supports DevTools (F12)

The binary is auto-built via CMake when first needed. It rebuilds automatically when shared runtime sources change (tracked via a source hash in .morph/hash/dev.fingerprint).

Source Hash Tracking

The dev binary monitors these runtime directories for changes:

• runtime/dev/
• runtime/core/
• runtime/render/
• runtime/ui/
• runtime/style/
• runtime/renderers/

If any file in these directories changes, morph_devrt is rebuilt before the next dev session.

DevTools

Press F12 to toggle the DevTools panel. It includes:

• Elements — inspect element tree, box model overlay, element info
• Rendering — frame stats, layout/paint diagnostics, live renderer switch (Flash ↔ Forge)
• Network — fetch() request log
• Logs — application log entries

See the DevTools section for details on each tab.

Tips

• Wayland issues — If the window doesn't open, try: GDK_BACKEND=x11 morph dev
• Slow reload — Check if your CSS files are large or if you have many Tailwind classes
• Socket errors — Make sure morph_devrt is running; kill any stale processes and restart morph dev
• Binary missing — Run morph doctor to verify cmake, g++, and make are installed