Role: Product Designer & Developer Timeline: 2025 Tools: Vanilla JavaScript, HTML5 Canvas, Claude Code, Model Viewer

Existing mockup tools are bloated with paywalls, watermarks, and export limits. Designers need quick, professional device mockups without friction — especially for portfolios, client presentations, and marketing materials.

Built a fast, free, open-source web app that generates pixel-perfect device mockups in seconds. No accounts, no subscriptions, no watermarks. Just drag, drop, and download.

Multiple device support (iPhone, iPad, iMac)

Drag-and-drop + keyboard paste workflow

2D canvas rendering and 3D model viewer

Instant PNG export

Customizable device colors and materials

100% client-side (no server uploads)

Vanilla JavaScript with ES6 modules (no framework overhead)

HTML5 Canvas API for 2D rendering

Google Model Viewer for 3D device previews

Modular CSS (base, layout, components)

Extensibility: Built a simple device library system that lets anyone add new devices by dropping in assets and updating a config file. Designers can fork the repo and customize for their brand.

Zero friction: Paste directly from clipboard to canvas

Professional quality: Pixel-perfect screen mapping and material rendering

Open source: Available for anyone to use, modify, or integrate

Fast workflow: From upload to download in under 10 seconds

👉 mockitship.com 👉 GitHub Repository

Why It Matters: This project demonstrates my ability to identify real user friction, ship functional tools quickly, and build extensible systems that others can contribute to. It's design and development in service of actual workflow improvements — not just portfolio polish.