Web IDE & Sandboxing Architecture
Understand how our browser-side execution sandbox works, allowing instant full-stack execution without cloud server latency.
How Sandboxing Works
CodewithChat leverages WebAssembly-based micro-runtimes directly in your browser. This means Node.js, Next.js bundlers, and npm package managers execute on your device client-side, achieving sub-second preview compilation without queue times or server cold starts.
Virtual File System
All project files live in an in-memory virtual directory. You can inspect any file, create subfolders, and review instant diffs between your previous version and the AI agent’s edits.
Monaco Editor Integration
We embed VS Code’s Monaco Editor directly into the IDE. You get full IntelliSense, syntax highlighting for TypeScript, JSX, CSS, and Markdown, and complete manual code-editing power at any moment.
Instant Hot Module Replacement (HMR)
Edits made either by the AI or manually update the live preview instantaneously without resetting your component state or scrolling position.