Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
browser-window
A Safari-style browser window for demos and tutorials. Source code viewing, full-screen expand mode, CodePen export, automatic theme detection. Already a VB dependency, used to wrap every doc-page demo in this site (including this one).
Where to find it
- npm:
@profpowell/browser-window - GitHub: ProfPowell/browser-window
- Live demos: profpowell.github.io/browser-window/demos
- Based on: @zachleat/browser-window with significant enhancements
- License: MIT
Install
BASH
npm install @profpowell/browser-windowJAVASCRIPT
import '@profpowell/browser-window';Already in Vanilla Breeze: imported by src/doc-extras.js, so any VB-built page can use <browser-window> directly.
Demo
The window chrome (frame, address bar, traffic-light buttons) reads VB color tokens and re-skins automatically when the theme changes. Inside the frame, drop any URL or any HTML you want to showcase.
Quick reference
| Feature | Attribute / mechanism |
|---|---|
| Embed a URL | src="..." renders an iframe. |
| Address-bar URL display | url="my-component" shows in the URL slot. |
| Source viewer | Click the </> button to view escaped HTML source. |
| Full-screen expand | Pop-out button toggles full-screen mode. |
| CodePen export | Send the embedded source to CodePen with one click. |
| Light / dark | Auto-detected from page theme. |
See the README for the full reference.
Usage
HTML
<browser-window url="my-component" src="/path/to/demo.html"></browser-window> <!-- Or with inline content --><browser-window url="https://example.com"> <p>Anything inside the frame.</p></browser-window>