Quickstart

Install Startpod in a Vite application and run a project entirely in the browser.

This guide adds Startpod to a Vite application, installs a project's dependencies, and starts its development server in the browser.

Prerequisites

A Chromium-based browser, such as Chrome or Edge.
Node.js 20 or later, or Bun 1.3 or later, for your host application.

Install Startpod

npm install startpod@alpha

Startpod includes its workers and WebAssembly toolchain. You do not install esbuild, Rollup, or framework compiler packages in the host application.

Add the Vite integration

vite.config.ts

import { defineConfig } from "vite"
import { startpod } from "startpod/vite"

export default defineConfig({
  plugins: [startpod()],
})

The integration configures the browser isolation headers used by the Vite development server. Startpod manages the sandbox origins for you.

Initialize Startpod

import { Startpod } from "startpod"

const startpod = await Startpod.init()
startpod.mountPreview(document.querySelector("#preview")!)

A page can have one live pod. Call teardown() before booting another one. init() starts the runtime. mountPreview() places the live project in your interface; you can call it after initialization.

Mount and run a project

await startpod.mount({
  "package.json": {
    file: {
      contents: JSON.stringify({
        scripts: { dev: "vite" },
        dependencies: { vite: "^5.4.0" },
      }),
    },
  },
  "index.html": {
    file: {
      contents: "<main><h1>Hello from Startpod</h1></main>",
    },
  },
})

const install = await startpod.spawn("npm", ["install"])
if ((await install.exit) !== 0) throw new Error("npm install failed")

await startpod.spawn("npm", ["run", "dev"])

Add a host element wherever you want the managed preview to appear:

<div id="preview" aria-label="Project preview"></div>

You now have project files, package installation, a real Vite development server, and a live preview running in the browser. Continue with Build your first app to connect Startpod to your product interface.