Interactive Demos
Explore all the features of the <browser-window> component
Basic Usage with Source Viewing
Load external HTML with the src attribute. Click the </> icon to view the source code!
Light & Dark Mode
Use mode="light" or mode="dark" to pin the theme. These components ignore the page theme toggle.
This window is always light
This window is always dark
Page-Level Dark Mode Detection
When no mode attribute is set, the component automatically follows
page-level dark mode signals. Click the theme toggle button (🌓) in the
top-right corner and watch these components switch themes automatically.
No mode attribute — follows page theme
mode="light" — stays light always
Detected signals: body.dark class (Tailwind/docs sites),
data-theme="dark", data-bs-theme="dark" (Bootstrap 5),
data-mode="dark" (Vanilla Breeze),
and color-scheme: dark computed style.
Resizable
Drag the bottom-right corner to resize. The component respects min-width and min-height constraints.
Drag the corner to resize!
Slotted Content
When no src is provided, use slotted content directly. Great for screenshots or custom HTML.
Dashboard
Welcome back! Your stats are looking great.
Maximize Mode
Double-click the header or click the green button to maximize. Press Escape or click the overlay to restore.
Custom Theming
Use CSS custom properties to create custom themes.
Custom purple theme using CSS custom properties
Device Mode
Wrap content in realistic phone and tablet bezels using the device attribute.
Includes status bars, notches, Dynamic Islands, and home indicators that match real devices.
iPhone 16
Dynamic Island, home indicator, and rounded corners.
Device Presets
Choose from a range of devices. Each preset matches real device dimensions, corner radius, and chrome style.
Landscape Orientation
Add orientation="landscape" to rotate the device. Dimensions and chrome positions are swapped automatically.
Bezel Colors
Use device-color to change the bezel finish: midnight (default), silver, gold, blue, or white.
Safe Area Overlays
Add show-safe-areas to visualize the safe area insets — useful for teaching responsive mobile design.
Tablet
Tablet presets like ipad-air render at their native dimensions, scaled to fit the container.
Available Device Presets
| Preset | Screen | Notch | Home |
|---|---|---|---|
iphone-16 | 393 × 852 | Dynamic Island | Indicator |
iphone-16-pro-max | 440 × 956 | Dynamic Island | Indicator |
iphone-se | 375 × 667 | None | Button |
pixel-9 | 412 × 923 | Punch-hole | Indicator |
pixel-9-pro-xl | 448 × 998 | Punch-hole | Indicator |
galaxy-s24 | 360 × 780 | Punch-hole | Indicator |
ipad-air | 820 × 1180 | None | Indicator |
ipad-pro-13 | 1024 × 1366 | None | None |