PlayCode runs Node.js modules directly in your browser. No server. No installation. And it's actually faster than running Node locally.
Here's how we built it.
The Problem
Traditional code playgrounds have a fundamental limitation: they either run code on a server (slow, expensive, scales poorly) or support only vanilla JavaScript (limiting).
We wanted both: the full npm ecosystem AND instant execution. That meant running a bundler entirely in the browser.
Why This Is Hard
Bundlers like Webpack and Rollup are designed for Node.js. They assume:
- File system access (reading node_modules)
- Native modules for performance
- Server-side execution environment
Running them in a browser means reimagining every assumption. File system? Use virtual FS. Native modules? Pure JavaScript. Server environment? Service workers.
The Architecture
We built a custom bundler based on Rollup, heavily modified for browser execution:
1. Virtual File System
All project files live in memory. When you import a package, we fetch it from our npm mirror, parse it, and store it in the virtual FS. No disk access needed.
2. Intelligent Caching
Once a package is fetched and parsed, it's cached. Import React in one project, it's instant in the next. We cache at multiple levels: raw files, parsed ASTs, and bundled chunks.
3. Incremental Bundling
Change one file? We only re-bundle what's affected. The dependency graph tells us exactly which modules need reprocessing. Most edits rebundle in under 50ms.
4. Web Worker Isolation
The bundler runs in a Web Worker, keeping the main thread free for the editor. Your UI stays responsive even during heavy compilation.
The Performance Surprise
Here's what we didn't expect: our browser bundler is often faster than Node.js.
Why?
- No disk I/O — Everything's in memory. No waiting for the file system.
- Aggressive caching — Hot paths are cached at every level.
- Optimized for our use case — We don't support every Rollup plugin, just what playgrounds need.
- Modern JS engines — V8 in Chrome is incredibly fast at pure JavaScript.
For typical playground projects, we see 2-5x faster bundling compared to a local Node.js setup. The tradeoff? We're limited to web-compatible packages — no native Node modules.
What's Next: AI-Powered Coding
With PlayCode 2.1, we're adding an AI coding agent that understands your project context. It can read your files, write code, and work across multiple files — just like Cursor, but entirely in your browser.
The same architecture that makes our bundler fast makes AI integration seamless. The AI sees the same virtual file system, gets instant feedback from the same fast bundler, and streams changes in real-time.
Try It
Open playcode.io, paste any npm package import, and watch it just work. No npm install. No waiting. Just code.
That's the goal we've been building toward for 8 years. And we're just getting started.