Codecraft

An in-browser IDE. A Vite + React dev server runs inside the browser tab through WebContainers, with a Monaco editor, an xterm terminal and a live preview. There is no server behind the editor: the dev server runs on the visitor's machine, in a sandbox the browser isolates with COOP and COEP headers.

Open the Vite + React playground

The first visit runs npm install in your tab and is slow. Later visits restore a stored snapshot when it fits the storage budget.

Shell demo

Boots a WebContainer in this tab and runs ls && node -v in it.

Not run yet. Nothing boots until you press Run.

Stack

  • Next.js 16 and React 19 in TypeScript for the host pages
  • WebContainers (@webcontainer/api) for Node.js inside the tab
  • Monaco, bundled with the app instead of loaded from a CDN
  • xterm.js, wired to the container's jsh shell
  • react-resizable-panels for the three panes
  • Vite and React 18 for the project that runs in the container