<browser-window> Web Component
October 26, 2023
#4 Popular
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:
8 Comments
Carlton Gibson ????????
@zachleat oh that’s wonderful! ????
Zach Leatherman
@chriskirknielsen well, wait ????
Zach Leatherman
@raymondcamden Thanks Raymond!
Zach Leatherman
@carlton I knew what you meant ????
Konnor Rogers
@zachleat wait... I actually have a use case for this...I'm working on building a "code pen like" editor using <textarea> + <pre> https://twitter.com/RogersKonnor/status/1717661084692221982This should pair perfectly for full page examples!!(Still a WIP)htt… Truncated
Zach Leatherman
@konnorrogers awesome!
passle
@zachleat Neat :)