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!

<browser-window src="flexbox-demo.html" url="https://example.com/flexbox" shadow> </browser-window>

Light & Dark Mode

The component automatically follows system theme preference. Use mode="light" or mode="dark" to override.

This window is always light

This window is always dark
<browser-window mode="light" url="https://example.com" title="Light Mode"> <div class="content">Always light</div> </browser-window> <browser-window mode="dark" url="https://example.com" title="Dark Mode"> <div class="content">Always dark</div> </browser-window>

Resizable

Drag the bottom-right corner to resize. The component respects min-width and min-height constraints.

Drag the corner to resize!

 <browser-window url="https://example.com" title="Resize Me!" style="height: 300px"> <div class="content">Drag the corner to resize!</div> </browser-window>

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.

<browser-window url="https://myapp.example.com" title="My App Dashboard" shadow> <div class="card-content"> <div class="card"> <h3>Dashboard</h3> <p>Welcome back! Your stats are looking great.</p> </div> </div> </browser-window>

Maximize Mode

Double-click the header or click the green button to maximize. Press Escape or click the overlay to restore.

<!-- Double-click header or click green button to maximize --> <browser-window src="demo.html" url="https://example.com" title="Maximize Me!"> </browser-window>

Custom Theming

Use CSS custom properties to create custom themes.

Custom purple theme using CSS custom properties

 .purple-theme { --browser-window-accent-color: #8b5cf6; --browser-window-header-bg: #faf5ff; --browser-window-border-color: #c4b5fd; --browser-window-close-color: #f472b6; --browser-window-minimize-color: #a78bfa; --browser-window-maximize-color: #34d399; } <browser-window class="purple-theme" url="https://example.com"> ... </browser-window>

All Features