Codecraft

An IDE in the browser that boots a real dev server inside the tab.

  • TypeScript
  • WebContainers
  • Monaco
  • xterm
LiveCode

The problem

The quickest way to lose someone trying a starter project is the "first, install Node" step. Removing it changes who is willing to click in and try it.

How it works

Codecraft binds Monaco and xterm to a WebContainers Node runtime, so a Vite project runs in the page and edits hot-reload in seconds.

  • Monaco is the editor. It writes to the WebContainer filesystem with debounced saves, and each save triggers a hot reload.
  • xterm is the terminal. It runs real shell commands, like npm install, against the same filesystem.
  • The page is served with cross-origin isolation headers (COOP and COEP), which is what lets a Node runtime exist inside a browser tab at all.
  • WebContainers cannot open real ports, so the preview goes through a service worker that routes requests to the server running in the tab.
  • A snapshot of the booted filesystem is cached in IndexedDB, so a repeat visit skips the cold install.

What it does not do

  • Native modules that need a compiler do not build, so packages with native addons fail.
  • Memory is capped by the browser tab, so a heavy project can run out of room.
  • It is one tab and nothing persists: close it and the running state is gone.

Links