Mockup Studio
Designing and shipping a browser-based device mockup tool from scratch: drop images or videos into realistic device frames, arrange dual-device scenes, add draggable text, and export in seconds. Built, designed, and deployed as a solo founder.
- Role
- Founder, Designer & Builder
- Timeline
- June 2026
- Platform
- Web (Desktop-only, 900px+ viewport)
- Year
- 2026
Screen recording of the live product
The Problem
Designers spend more time than they should turning screenshots into presentable mockups. The workflow is broken in a specific way: you finish a screen in Figma, you need to show it inside a device frame for a client presentation or portfolio, and your options are either a Figma plugin that requires the right plan, a desktop app with a subscription, or a website that watermarks your export unless you pay.
None of these tools were built for the moment designers actually need them: fast, in the browser, no account, no watermark, no subscription. Drop your image into a phone frame, pick a background, download it. That should be the whole interaction.
The second problem was dual-device scenes. Showing a mobile screen next to a desktop screenshot, the classic "responsive design" marketing visual, required either owning a premium tool or stitching two exports together in Figma. There was no free, browser-based tool that let you arrange two independent devices on the same canvas with their own media, position them freely, and export the whole scene as a single file.
Mockup Studio was built to fix both problems. A single HTML file, deployed to the web, that does exactly what it says and nothing more.
My Role
I conceived, designed, built, and deployed Mockup Studio entirely as a solo project. This was not a design handoff: I wrote the HTML, CSS, and JavaScript myself, designed every UI interaction, built the export pipeline, and shipped it to production on Vercel in June 2026. The project lives at mockupstudio-chi.vercel.app. Every feature decision, every visual detail, and every bug fix was mine. This is what end-to-end looks like when you are the only person on the team.
Team
Solo. Design, build, and deployment by Peter Busayo Omidiji.
Outcomes
1
HTML file, the entire product
Design, logic, export pipeline, and UI in one self-contained file
4
export formats supported
PNG, JPG, WebP, and MP4 with device frame composited in
0
watermarks, accounts, or paywalls
Fully free, fully capable, no signup required
Live
at mockupstudio-chi.vercel.app
Shipped and deployed in June 2026
What I Learned
Mockup Studio was the fastest project I have ever shipped and the one that taught me the most about scope discipline. The entire build happened in a single focused session. That was only possible because the scope was locked before any code was written: one screen, one job, ship it. The hardest technical problem was the preview-to-export mismatch. It took longer to fix than anything else in the project because the root cause was not obvious: a stretched background in the export looks like a rendering bug but is actually a coordinate system mismatch between CSS and canvas. Isolating the transform calculation into a shared function that both systems called was the kind of solution that seems obvious in retrospect and takes a while to arrive at in the moment. The bigger lesson is about honesty in product scope. Blocking the tool on mobile rather than building a degraded mobile experience was the right call and I made it quickly. Not every tool needs to work everywhere. A design tool used in the middle of a professional workflow will always be used on a large screen. Designing for the actual use case rather than the theoretical one made the desktop experience better because the interface did not have to make compromises for a context that did not exist in practice. Mockup Studio is live at mockupstudio-chi.vercel.app.
Next Project
Web Design