Lumen

A fast, elegant tool to preview any website across multiple devices and screen sizes instantly.

Installation

Option 1: npx (Recommended)

No installation required. Just run:

npx lumen-preview

Option 2: Global Install

npm install -g lumen-preview
lumen

Option 3: Clone & Run

git clone https://github.com/zvizr/lumen.git
cd lumen
npm start

Option 4: Direct File

Simply open index.html in your browser.

Usage

1. Run Lumen using any method above
2. Enter a URL, click the folder button, or drag & drop a project folder
3. View your site across all device sizes
4. Click any device preview to expand and inspect

Loading Local Projects

Lumen supports loading entire project folders with all assets:

Folder Button: Click the folder icon and select your project directory.

Drag & Drop: Drag a folder (or single HTML file) directly onto Lumen.

Lumen automatically bundles:

• CSS files (<link rel="stylesheet">)
• JavaScript files (<script src="...">)
• Images (<img>, CSS url())
• Fonts and other assets

Keyboard Shortcuts

| Key | Action | |-----|--------| | Enter | Load URL | | Escape | Close expanded view |

Features

• Multi-device preview - See your site on desktop, tablet, and mobile simultaneously
• 15 device presets - From 4K displays to small Android phones
• Project folder support - Load entire projects with CSS, JS, and images
• Drag & drop - Drop folders or files directly onto Lumen
• Expanded view - Click any device to view at larger scale with adjustable zoom
• Zoom controls - Scale previews from 50% to 150%
• Hide labels - Clean mode for screenshots
• Light/Dark mode - Toggle themes for better contrast
• Smart theme detection - Suggests light mode when dark content is detected
• Recent URLs - Quick access to previously tested sites
• Instant refresh - Reload all previews with one click

Device Presets

Desktop

| Device | Resolution | |--------|------------| | 4K UHD | 3840 x 2160 | | Full HD | 1920 x 1080 | | Desktop Large | 1440 x 900 | | Desktop | 1280 x 800 | | Desktop Small | 1024 x 768 |

Tablet

| Device | Resolution | |--------|------------| | iPad Pro 12.9" | 1024 x 1366 | | iPad Air | 820 x 1180 | | iPad Mini | 768 x 1024 | | iPad Landscape | 1024 x 768 |

Mobile

| Device | Resolution | Screen Size | |--------|------------|-------------| | iPhone 14 Pro Max | 430 x 932 | 6.7" | | iPhone 14 Pro | 393 x 852 | 6.1" | | iPhone SE | 375 x 667 | 4.7" | | Android Large | 412 x 915 | 6.7" | | Android | 360 x 800 | 6.3" | | Android Small | 320 x 568 | 4.7" |

Limitations

Iframe Embedding Restrictions

Some websites block iframe embedding for security reasons. These sites will show a warning indicator:

• Sites with X-Frame-Options: DENY or SAMEORIGIN
• Sites with restrictive Content-Security-Policy headers
• Examples: Google, Amazon, Facebook, most banking sites

Viewport-Based Blocking

Some sites (like e-commerce sites) allow embedding for large viewports but block smaller ones. You may see previews work on desktop sizes but not on mobile sizes. This happens because:

• The site detects the iframe's actual pixel dimensions
• Smaller viewports trigger mobile-specific security policies
• There's no client-side workaround for this behavior

Best Use Cases

Lumen works best for:

• Local HTML/CSS/JS development
• Your own websites and projects
• Static site generators (Jekyll, Hugo, Astro, 11ty, etc.)
• Sites that allow iframe embedding

Development

# Clone the repo
git clone https://github.com/zvizr/lumen.git
cd lumen

# Start the server
npm start

# Or open directly
open index.html

Project Structure

lumen/
├── .github/
│   └── ISSUE_TEMPLATE/   # Bug report & feature request templates
├── bin/
│   └── cli.js            # CLI entry point & server
├── css/
│   └── styles.css        # All styles
├── js/
│   └── app.js            # Application logic
├── index.html            # Main HTML
├── favicon.svg           # App icon
├── package.json          # npm config
├── CONTRIBUTING.md       # Contributor guide
├── LICENSE               # MIT license
└── README.md

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

License

MIT - Use freely for personal and commercial projects.