Product · 2025

Browser-Based Coding Environment Running Claude Code (WebContainers)

Overview

WebCode is an internal tool that brings a full coding environment, and Claude Code, into the web browser using WebContainer technology, with no local install or backend dev server. It runs a complete sandboxed terminal experience on desktop or mobile, deployed to the edge on Cloudflare Workers.

Why It Exists

Setting up a coding environment (and an AI coding agent) traditionally requires local installs, toolchains, and configuration. WebCode removes that friction: open a browser, get an instant, sandboxed terminal with package-manager support, and code with Claude Code’s assistance from anywhere, including phones. It is the studio’s exploration of “vibe coding” from any device.

What We Built

A TypeScript + React app (Vite, Tailwind, Radix UI, React Compiler) that boots a StackBlitz WebContainer in the browser and drives an interactive terminal via xterm.js (@xterm/xterm, @xterm/addon-fit). The frontend is organized around terminal components (WebContainerTerminal, Terminal, TerminalHeader, TerminalPage) and hooks (useTerminal), with a small utility layer for environment/registry/host detection. A Hono server layer targets Cloudflare Workers (via @cloudflare/vite-plugin) for edge deployment, and @slack/webhook provides notification hooks. The result runs entirely client-side, no persistent backend dev server, with sandboxed code execution and pnpm support.

Technologies & Approach

TypeScript end-to-end. WebContainers provide the in-browser, sandboxed Node runtime; xterm.js renders a real terminal; Hono on Cloudflare Workers handles edge serving; and React + the React Compiler keep the UI fast and responsive across form factors. The design goal is instant boot and cross-platform (including mobile) usability.

Outcome / Impact

Demonstrates a genuinely novel developer experience, running Claude Code and a real terminal in the browser, deployable to the edge, and showcases the studio’s strengths in WebContainers, edge runtimes, and AI-agent tooling. Actively developed through late 2025.

Capabilities Demonstrated

In-browser, sandboxed development environments (WebContainers)
Full terminal UX in the browser (xterm.js) on desktop and mobile
Edge deployment on Cloudflare Workers with Hono
AI coding-agent (Claude Code) integration in a web product
Modern React tooling (Vite, React Compiler, Tailwind)

More work See all →

Product 2026