Zach’s ugly mug (his face) Zach Leat­herman

<browser-window> Web Component

October 26, 2023
🚾Web Component@zachleat/browser-window

Used in demos as a way to fake a Safari-esque web browser window.

Demo GitHub277 npm IndieWeb Avatar for https://npmx.dev/npmx All🚾 0%
Versions
Monthly publishes sparkline for @zachleat/browser-window, ranging 0 to 8 20 versions in
3.0.1
New
Audit
0 reports
0 deps
Issues
3
3
PRs
0
2

A lightweight themed zero-dependency web component wrapper to emulate a Safari-esque browser window for demos and presentations.

Originally used in the slide deck for This Web Site is a Tech Talk.

Notably (as this component is best for demos) it does use client rendering via Shadow DOM to add the markup for browser chrome around the content. Before JavaScript or without JavaScript, the fallback content is rendered as expected.

Demos

Here’s a live demo of it in action.

This one has a shadow.

Source code:

<browser-window>
	<p>Here’s a <em>live demo</em> of it in action.</p>
</browser-window>

<browser-window shadow>
	<p>This one has a shadow.</p>
</browser-window>

This one has a URL bar (with favicon) and an iframe:

Or maybe another demo of a screenshot of the demo page:

Screenshot image for https://zachleat.github.io/browser-window/demo.html

Tags: Project Web Components

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 86 talks in nine different countries at events like Beyond Tellerrand, State of the Browser, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Learn more about Zach »