<browser-window>

A Safari-style browser window web component for demos and tutorials

View Demos API Documentation

Features

Source Viewing

Toggle between rendered content and syntax-highlighted source code with one click.

CodePen Export

Export any demo directly to CodePen with HTML, CSS, and JS properly separated.

Dark Mode

Automatic theme detection with manual override. Follows system preferences.

Resizable

Drag to resize the window. Perfect for demonstrating responsive designs.

Fullscreen Mode

Double-click the header or click the green button to maximize.

Fully Themeable

15+ CSS custom properties for complete visual customization.

Quick Start

Installation

Install via npm:

npm install @profpowell/browser-window

Or include via CDN:

<script type="module" src="https://cdn.jsdelivr.net/gh/ProfPowell/browser-window@main/dist/browser-window.min.js"></script>

Basic Usage

<browser-window src="demo.html" url="https://example.com" shadow> </browser-window>
See All Demos Full API Reference

Related Components

Part of the ProfPowell vanilla web components suite:

<code-block> Syntax highlighting with copy button <terminal-window> Interactive terminal emulator <browser-console> Console log display component <http-component> HTTP request/response viewer