Node workspaces in your browser

Install real npm packages, run normal dev commands, and preview Node, Vite, Next.js, and Express projects through virtual URLs.

$npm install groundpack
Get started
src/App.js
Vite dev server with React
Terminal
[--:--:--]Click Run to start the server.
Previewlocalhost:3900/
output appears here
Runtime pieces

Everything needed for browser workspaces

Virtual Filesystem

POSIX-compatible in-memory filesystem with watch, stat, snapshots, binary files, and recursive operations.

Node.js Runtime

Execute JavaScript and TypeScript with CommonJS resolution, ESM fallback transforms, and 40+ shimmed modules.

npm in the Browser

Install real packages from npm, resolve dependencies, extract tarballs, and create bin stubs entirely client-side.

Command-backed Servers

Run normal commands like next dev, vite, node, and npm test with virtual HTTP previews.

Hot Module Replacement

React Refresh, CSS updates, process output, and file watcher updates without a full reload.

Security Modes

Use same-origin execution for trusted demos or cross-origin sandboxing for user and AI-generated code.

Native examples

Start from a real package workflow

Basic
Serve an HTML page from a built-in Node.js HTTP server.node · http · preview
Angular
Run an Angular dev server with live preview in the browser.angular · vite · hmr
Astro
Run an Astro 6 dev server with live preview in the browser.astro · dev server · preview
Express
Run an Express server and request its routes inside the browser.express · http · json
Express + SQLite
Run an Express server that reads records from a SQLite database file.express · sqlite · sql.js
Hono
Run a Hono HTTP server and request its routes inside the browser.hono · http · routes
Next.js
Run a Next.js App Router dev server with live preview in the browser.next.js · npm run dev
React
Run a React dev server with live preview in the browser.react · npm run dev
Solid
Run a SolidJS dev server with live preview in the browser.solid · npm run dev
Storybook
Render Storybook CSF stories with React and a Vite-powered browser preview.storybook · csf · preview
Svelte
Run a Svelte 5 dev server with live preview in the browser.svelte · npm run dev
Vite
Run the vanilla JavaScript Vite starter with live preview in the browser.vite · npm run dev
Vitest
Run Vitest tests in the browser through npm scripts.vitest · npm run test
Void
Run a Void Pages app with React and file-based API routes.void · pages · api routes
Vue
Run a Vue dev server with live preview in the browser.vue · npm run dev
Practice workspaces

Practice questions

Angular UIRun an Angular UI question workspace with Vite and structured UI tests.angular · vite · ui testFlattenRun a GreatFrontEnd JavaScript question workspace with Vitest.arrays · recursion · vitestPromise.allRun a GreatFrontEnd async JavaScript question workspace with Vitest.async · promises · vitestReact UIRun a React UI question workspace with Vite and structured UI tests.react · vite · ui testSolid UIRun a Solid UI question workspace with Vite and structured UI tests.solid · vite · ui testSvelte UIRun a Svelte UI question workspace with Vite and structured UI tests.svelte · vite · ui testuseCounterRun a GreatFrontEnd React Hook question workspace with Vitest.react hooks · state · vitestVue UIRun a Vue UI question workspace with Vite and structured UI tests.vue · vite · ui test
FAQ

Common questions

What is Groundpack for?

Running demos, playgrounds, coding agents, and educational tools for Node.js projects directly in the browser with real npm installs and dev commands.

Can I use it for AI coding agents?

Yes. An agent can write files, install packages, run commands, inspect output, preview servers, and iterate client-side. For untrusted generated code, use a cross-origin sandbox.

Is this production-ready?

Groundpack is experimental. It covers many common Node.js APIs and package workflows, but complex native dependencies or obscure Node internals can still expose platform gaps.

How should I handle security?

Run trusted demo code same-origin when needed. Run arbitrary user code in a sandboxed iframe on a different origin so it cannot access the host page DOM, cookies, localStorage, or IndexedDB.

How does it differ from WebContainers?

Groundpack is a lightweight browser runtime focused on demos and embedded development workflows. WebContainers provide a broader Linux-like environment for complete cloud IDE use cases.

Which Node.js modules are supported?

Common modules include fs, path, http, crypto, stream, buffer, events, url, zlib, util, process, child_process, module, os, querystring, and more browser-compatible shims.