I made a custom html element ("web component") that renders it's child content inside a mockup of a browser window.
I wanted to use it for demoing a feature of another project that made changes to a browser's url, and figured other people might have use for a browser mockup, as well.
It's a single-file reference, if you want to include it as a script tag (or esm module import). It's also available on npm, if you'd rather install it that way.
The repo also includes a toy utility for making simplistic screenshots, which allows you to manipulate a browser-mockup instance in 3D space.
Let me know if I missed something obvious, or if there is some feature that works well as a custom element that wouldn't work well from a css stylesheet. Since I imagine most people that need a mockup might consider adding javascript as overkill, it makes sense to put in features that css, alone, simply can't manage.
And if the customization that's provided isn't quite enough, but you do see some utility in it, feel free to remix it into your own thing; it's licensed as CC0, so there isn't even an attribution requirement. Do whatever you want with it!
I made a custom html element ("web component") that renders it's child content inside a mockup of a browser window.
I wanted to use it for demoing a feature of another project that made changes to a browser's url, and figured other people might have use for a browser mockup, as well.
It's a single-file reference, if you want to include it as a script tag (or esm module import). It's also available on npm, if you'd rather install it that way.
The repo also includes a toy utility for making simplistic screenshots, which allows you to manipulate a browser-mockup instance in 3D space.
Let me know if I missed something obvious, or if there is some feature that works well as a custom element that wouldn't work well from a css stylesheet. Since I imagine most people that need a mockup might consider adding javascript as overkill, it makes sense to put in features that css, alone, simply can't manage.
And if the customization that's provided isn't quite enough, but you do see some utility in it, feel free to remix it into your own thing; it's licensed as CC0, so there isn't even an attribution requirement. Do whatever you want with it!