CLI tool · npm

UIGrid

Preview your website on every screen size at once. One command opens a grid of eight device frames pointed at the same URL, so a responsive bug shows up in the frame it breaks in rather than after you have resized the window twelve times.

Node.js Express Commander JavaScript npm

Install and run

zsh

$ npm install -g uigrid-view
added 1 package in 2s

# start the grid, then type any URL into the interface
$ uigrid

# or let UIGrid serve a directory for you
$ uigrid ./dist
UIGrid running on http://localhost:3000
opening in your default browser…

It works against anything already serving — Vite, Next.js, Create React App, a staging URL — because it only ever points frames at a URL you give it.

The eight frames

Drawn to relative scale. This is the actual device list the tool ships with.

The interface

Screenshots go here.

The grid All eight frames rendering one URL at once. assets/uigrid-grid.webp

URL bar Point the whole grid somewhere new without restarting. assets/uigrid-url.webp

How it is put together

bin/cli.js

Commander parses the arguments and decides whether a static server is needed at all.

src/server.js

Express serves the grid interface and, optionally, the local directory you pointed it at.

src/template.js

The grid itself: one iframe per device size, each with the viewport it is named after.

open

The browser is launched for you, because a tool you have to go and open is a tool you forget to use.

UIGrid — built by MilanDroid · v1.0.1 on npm All projects