DEV Community

Alex Spinov
Alex Spinov

Posted on

WebContainers Has a Free API — Run Node.js Natively in the Browser

What if you could run a full Node.js environment inside the browser — npm install, file system, and all — without any server?

WebContainers by StackBlitz lets you boot Node.js in a browser tab. It powers StackBlitz, and you can use it in your own apps.

Why WebContainers

Traditional online IDEs run code on remote servers. WebContainers runs everything locally in the browser using WebAssembly:

  • Full Node.js — npm, yarn, pnpm all work
  • Real file system — in-memory file system with full POSIX API
  • No server — everything runs client-side
  • Instant boot — starts in milliseconds, not seconds
  • Secure — sandboxed in the browser, no remote execution

Quick Start

import { WebContainer } from "@webcontainer/api";

const webcontainer = await WebContainer.boot();

// Mount files
await webcontainer.mount({
  "index.js": {
    file: { contents: 'console.log("Hello from the browser!")' },
  },
  "package.json": {
    file: { contents: JSON.stringify({ name: "demo", type: "module" }) },
  },
});

// Run Node.js
const process = await webcontainer.spawn("node", ["index.js"]);
process.output.pipeTo(new WritableStream({
  write(data) { console.log(data); }
}));
Enter fullscreen mode Exit fullscreen mode

Install npm Packages in the Browser

const install = await webcontainer.spawn("npm", ["install", "express"]);
await install.exit;

// Now run an Express server — IN THE BROWSER
await webcontainer.mount({
  "server.js": {
    file: {
      contents: `
        import express from "express";
        const app = express();
        app.get("/", (req, res) => res.send("Running in the browser!"));
        app.listen(3000);
      `
    }
  }
});
const server = await webcontainer.spawn("node", ["server.js"]);
Enter fullscreen mode Exit fullscreen mode

Real Use Case

An education platform needed interactive coding exercises. They originally spun up a Docker container per student — expensive at scale ($2K/month for 500 concurrent users). After switching to WebContainers, all computation happened client-side. Server costs dropped to $0 for the compute layer.

When to Use WebContainers

  • Interactive tutorials and documentation
  • Online code editors and playgrounds
  • AI-powered coding assistants (run generated code safely)
  • Code review tools with live previews

Get Started

Visit webcontainers.io — free for open source, commercial licenses available.


Need custom data pipelines or scraping solutions? Check out my Apify actors or email me at spinov001@gmail.com for custom solutions.

Top comments (0)