Place an image inside an elegant 3D frame — or a real device — tune a cinematic look, and export a high-resolution still. Real WebGL, runs entirely in your browser, free and open source.
Try it live → mockstudio.pro
Drop in a screenshot → it lands on a 3D stage inside a minimal slab frame or a real device model → orbit the camera, pick a Look, tune lighting / background / effects → export a print-quality PNG or JPEG at the exact aspect you chose.
- Two frame kinds — a clean abstract Slab, or a Device (iPhone 17 Pro, more coming) whose real screen geometry your image conforms to, Dynamic Island and rounded corners included.
- Curated cinematic looks — Studio, Hero, Cinematic, Retro, Noir, Clean — plus full manual control: HDRI lighting with rotation, glass or flat screen finish, blur, bloom, chromatic aberration, vignette, film grain, color adjustments, and a Neutral/ACES tone-map choice.
- Faithful by default — a bare upload is color-true (Khronos PBR Neutral tone mapping); the filmic look is opt-in.
- Print-quality export — supersampled, MSAA-antialiased stills at real per-aspect resolutions up to your GPU's limit, with transparent-background PNG.
- Private by design — no backend, no analytics; your images never leave the browser. Documents save locally and share links encode only the (image-free) scene settings.
- Document-driven — the whole render is a pure function of one validated, versioned Scene Document, so undo, autosave, share links, and presets all come from a single abstraction.
pnpm install
pnpm dev # → http://localhost:5173pnpm test runs the suite (300+ behavior tests on the core), pnpm build
produces the static site.
React Three Fiber · drei · @react-three/postprocessing · Zustand · Zod · Vite · TypeScript · Tailwind v4 · Base UI · Vitest.
CONTEXT.md— the project's domain language. Read first.docs/ARCHITECTURE.md— the Scene Document, module boundaries, and data flow.docs/adr/— architecture decision records (why each choice was made).CONTRIBUTING.md— how to get a PR merged.
MockStudio is free, open source, and has no backend to monetize — development is funded entirely by its community. If it saves you a trip to a paid mockup tool, consider sponsoring on GitHub: sponsorships pay for device-model licensing, HDRI curation, and dedicated maintenance time. Starring the repo and sharing exports made with MockStudio help just as much.
Code: Apache-2.0. Bundled assets carry their own licenses (CC-BY
device models, CC0 HDRIs) — see LICENSING.md and the in-app
Credits panel (ⓘ).