API Documentation

Complete reference for the <browser-window> component

Attributes

Configure the component behavior using these HTML attributes.

Attribute Type Default Description
url string '' URL to display in the address bar. The hostname is extracted and shown as the title if no title attribute is set.
title string hostname from url Title shown in the URL bar. Overrides the automatically extracted hostname.
src string '' Path to an HTML file to load in an iframe. When set, enables source viewing, sharing, and CodePen export features.
mode 'light' | 'dark' auto Color scheme for the component. When omitted, automatically detects page-level dark mode signals (body.dark class, data-theme, data-bs-theme, color-scheme) and falls back to system preference via prefers-color-scheme.
shadow boolean false When present, adds a drop shadow around the browser window frame.
device string '' Named device preset for device chrome mode. Renders a phone or tablet bezel with status bar, notch/Dynamic Island, and home indicator. Available presets: iphone-16, iphone-16-pro-max, iphone-se, pixel-9, pixel-9-pro-xl, galaxy-s24, ipad-air, ipad-pro-13.
device-color string 'midnight' Bezel color when device is set. Options: midnight, silver, gold, blue, white.
orientation 'portrait' | 'landscape' 'portrait' Device orientation when device is set. Swaps width/height and repositions chrome elements.
show-safe-areas boolean false When present with device, draws translucent overlay bands showing safe area insets (status bar, home indicator, etc.).

Attribute Examples

<!-- Basic usage with URL --> <browser-window url="https://example.com"> <img src="screenshot.png" alt="Screenshot"> </browser-window> <!-- Load external HTML with source viewing --> <browser-window src="demo.html" url="https://example.com/demo" title="My Demo" shadow> </browser-window> <!-- Force dark mode --> <browser-window mode="dark" src="demo.html"></browser-window> <!-- Device mode: iPhone 16 --> <browser-window device="iphone-16" src="demo.html"></browser-window> <!-- Landscape Pixel 9 with silver bezel --> <browser-window device="pixel-9" orientation="landscape" device-color="silver"> <img src="screenshot.png" alt="Demo"> </browser-window> <!-- iPad Air with safe area overlays --> <browser-window device="ipad-air" show-safe-areas src="demo.html"></browser-window>

Slots

Use slots to provide custom content inside the browser window.

Slot Description
(default) The default slot accepts any content to display inside the browser window. Used when the src attribute is not set. Content automatically fills the available space.

Slot Examples

<!-- Image content --> <browser-window url="https://example.com"> <img src="app-screenshot.png" alt="App screenshot"> </browser-window> <!-- Custom HTML content --> <browser-window url="https://myapp.com" title="Dashboard"> <div style="padding: 2rem; background: #f0f9ff;"> <h2>Welcome to the Dashboard</h2> <p>Your custom content here.</p> </div> </browser-window>

CSS Custom Properties

Customize the appearance using CSS custom properties. Set these on the browser-window element or a parent container.

Property Default Description
--browser-window-bg #ffffff Background color of the entire component
--browser-window-header-bg #f6f8fa Background color of the header/toolbar area
--browser-window-border-color #d1d5da Border color for the window frame
--browser-window-border-radius 8px Border radius of the window corners
--browser-window-text-color #24292e Primary text color
--browser-window-text-muted #586069 Muted/secondary text color
--browser-window-url-bg #ffffff Background color of the URL bar
--browser-window-shadow 0 4px 12px rgba(0,0,0,0.15) Box shadow when shadow attribute is set
--browser-window-close-color #ff5f57 Color of the close (red) button
--browser-window-minimize-color #febc2e Color of the minimize (yellow) button
--browser-window-maximize-color #28c840 Color of the maximize (green) button
--browser-window-accent-color #2563eb Accent color for interactive elements
--browser-window-hover-bg #f3f4f6 Background color on hover for buttons
--browser-window-content-bg #ffffff Background color of the content area
--browser-window-font-family System fonts Font family for text content
--browser-window-mono-font Monospace fonts Font family for code/monospace content
--browser-window-bezel-color #1a1a1a Device frame/bezel color (device mode only)
--browser-window-status-bar-color rgba(255,255,255,0.9) Status bar text/icon color (device mode only)
--browser-window-home-indicator-color rgba(255,255,255,0.3) Home indicator pill color (device mode only)
--browser-window-safe-area-color oklch(0.65 0.2 250 / 0.25) Safe area overlay tint (device mode only)

Theming Example

/* Custom purple theme */ browser-window.purple-theme { --browser-window-accent-color: #8b5cf6; --browser-window-header-bg: #faf5ff; --browser-window-border-color: #c4b5fd; } /* Custom dark theme override */ browser-window.custom-dark { --browser-window-bg: #1a1a2e; --browser-window-header-bg: #16213e; --browser-window-content-bg: #1a1a2e; --browser-window-text-color: #eee; --browser-window-border-color: #0f3460; }

CSS Parts

Style internal elements using the ::part() selector.

Part Description
header The browser header/toolbar containing controls and URL bar
content The content area containing the iframe or slotted content

CSS Parts Example

/* Style the header */ browser-window::part(header) { padding: 1rem; } /* Style the content area */ browser-window::part(content) { padding: 1rem; min-height: 300px; }

Keyboard Shortcuts

The component supports keyboard navigation for accessibility.

Key Action
Escape Close maximized view or close open menus
Tab Navigate between interactive elements
Enter / Space Activate focused button

Features Reference

Source Code Viewing

When the src attribute is set, a code icon (</>) appears in the URL bar. Clicking it toggles between the rendered content and syntax-highlighted source code. The source view includes a "Copy" button to copy the code to clipboard.

Maximize Mode

Enter maximize mode by:

Exit maximize mode by:

When maximized, the component displays as a centered modal with a backdrop and proper ARIA attributes (role="dialog", aria-modal="true").

Share Menu

When src is set, a share button provides:

Download

A download button appears when src is set, allowing direct download of the source HTML file.

Resizable

The component can be resized by dragging the bottom-right corner. Set initial dimensions using CSS:

<browser-window src="demo.html" style="height: 400px; width: 600px;"> </browser-window>

Browser Support

Works in all modern browsers that support Web Components:

Accessibility

The component is built with accessibility in mind: