Multipane

Preview a URL at every viewport size at once. Point it at your dev server and see mobile, tablet, laptop, and desktop side by side in a single page — no window juggling, no devtools toggling.

npx multipane localhost:3000

That starts a tiny local server, opens the app in your browser, and loads http://localhost:3000 into every pane.

Install

Run it on demand:

npx multipane

Or install it globally:

npm install -g multipane
multipane localhost:3000

Requires Node 20 or newer. Multipane has no runtime dependencies.

Use it in a project

Multipane is a viewer — it never touches your build, config, or output. Add it as a dev dependency and give it a script:

npm install --save-dev multipane

{
	"scripts": {
		"dev": "vite",
		"dev:responsive": "multipane localhost:5173"
	}
}

Then run your dev server in one terminal and Multipane in another:

npm run dev
npm run dev:responsive

Both at once, if you already use concurrently:

{
	"scripts": {
		"dev:all": "concurrently \"npm:dev\" \"npm:dev:responsive\""
	}
}

Point it at whatever port your framework uses:

| Dev server | Command | | --------------------------- | -------------------------- | | Vite, SvelteKit | multipane localhost:5173 | | Next.js, Nuxt, Remix, Rails | multipane localhost:3000 | | Astro | multipane localhost:4321 | | Angular | multipane localhost:4200 | | Storybook | multipane localhost:6006 | | Local (WordPress) | multipane mysite.local |

Multipane's own server defaults to port 4321, which is also Astro's dev port. That is not a problem — it takes the next free port when 4321 is busy — but pass --port if you want it somewhere predictable.

Checking a preview deploy or a staging URL works the same way, as long as the site allows embedding (see below):

multipane https://my-branch.vercel.app

Usage

multipane [url] [options]

Arguments
  url                  Target to load in every pane (e.g. localhost:3000).
                       Optional — you can also type it in the toolbar.

Options
  -p, --port <number>  Port to serve on (default 4321; the next free port is
                       used if it is taken)
  -H, --host <host>    Host to bind (default 127.0.0.1; use 0.0.0.0 to reach it
                       from another device on your network)
      --no-open        Do not open the browser
  -h, --help           Show help
  -v, --version        Show the version

Examples

multipane localhost:3000                 # preview a local dev server
multipane https://example.com            # preview any embeddable site
multipane localhost:5173 --port 5000     # serve the tool itself on port 5000
multipane --host 0.0.0.0 --no-open       # reach it from your phone on the same wifi

What you get

• Five viewport presets out of the box — Mobile S (375×667), Mobile L (414×896), Tablet (768×1024), Laptop (1366×768), Desktop (1920×1080).
• Custom presets — add any width/height pair; remove the ones you added.
• Per-pane zoom so a 1920px pane still fits on your screen.
• Drag to reorder panes without reloading their content.
• Reload all to refresh every pane at once.
• Navigation-divergence detection — a pane that has navigated somewhere else is called out, so you are not comparing different pages.
• Layout persistence — presets, order, zoom, and the last URL are saved in your browser's local storage.

A note on embedding

Panes are iframes, so a target that refuses to be embedded will render blank. That happens when the site sends X-Frame-Options: DENY/SAMEORIGIN or a CSP frame-ancestors directive that excludes the Multipane origin. Local dev servers almost never do this; production sites often do. If a pane stays blank, that's the reason.

Developing Multipane itself

git clone https://github.com/brandondeweese/multipane.git
cd multipane
npm install
npm run dev        # vite dev server with hot reload
npm run build      # type-check and build to dist/
npm start          # run the CLI against the built app

The app is plain TypeScript with no framework — src/main.ts wires the toolbar, src/viewportPane.ts owns a single pane, and src/state.ts handles persistence.

License

MIT © Brandon DeWeese