Project URL: https://brockly.glitch.me/
I had this old project that I made last year, which would create a mockup based on an image that you uploaded. It had basic functionalities, yet quite buggy, so I decided to work on it today (after messages from @aboutdavid about how it couldn’t generate transparent images) and improve it.
Here’s the basic setup. I created a basic MacOS-like window using raw CSS on CodePen, which I then integrated into this project. Upload an image → the image shows up on the blank div within the mockup window → render both an SVG and a PNG image from the DOM elements using dom-to-image. It was quite that simple. Additionally, I added the options to add both a background color to the mockup and padding between the wrapper and the mockup.
MockFrame was based on this website and I had even mentioned it in that thread.
// Here’s a donut 
There are some things that can be improved, such as the scale of the action icons on the window (close, minimise, and resize?) and the image, and the quality of PNG images sometimes. I’m probably gonna work on those plus more customization!
Enjoy your weekend!
