mockstudio

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 16 Open GitHub ↗

Place an image inside an elegant 3D frame, tune a cinematic look, and export a high-resolution still.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# MockStudio

[![CI](https://github.com/lenxism/mockstudio/actions/workflows/ci.yml/badge.svg)](https://github.com/lenxism/mockstudio/actions/workflows/ci.yml)
[![License: Apache-2.0](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://raw.githubusercontent.com/lenxism/mockstudio/main/LICENSE)
[![Sponsor](https://img.shields.io/badge/sponsor-%E2%9D%A4-db61a2)](https://github.com/sponsors/lenxism)

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](https://mockstudio.pro)**

![The mockstudio editor: an iPhone frame on a dark studio stage with the Inspector open](https://raw.githubusercontent.com/lenxism/mockstudio/main/docs/design/editor-hero.png)

## What it does

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.

## Quick start

```bash
pnpm install
pnpm dev        # → http://localhost:5173
```

`pnpm test` runs the suite (300+ behavior tests on the core), `pnpm build`
produces the static site.

## Stack

React Three Fiber · drei · @react-three/postprocessing · Zustand · Zod · Vite ·
TypeScript · Tailwind v4 · Base UI · Vitest.

## Documentation

- [`CONTEXT.md`](./CONTEXT.md) — the project's domain language. Read first.
- [`docs/ARCHITECTURE.md`](./docs/ARCHITECTURE.md) — the Scene Document, module boundaries, and data flow.
- [`docs/adr/`](./docs/adr/) — architecture decision records (why each choice was made).
- [`CONTRIBUTING.md`](./CONTRIBUTING.md) — how to get a PR merged.

## Support the project

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](https://github.com/sponsors/lenxism):
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.

## License

Code: [Apache-2.0](./LICENSE). Bundled assets carry their own licenses (CC-BY
device models, CC0 HDRIs) — see [`LICENSING.md`](./LICENSING.md) and the in-app
Credits panel (ⓘ).

mockstudio

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README