mockstudio

KO | EN

gitlite — search

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

(★ 16)

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

mockstudio Latest Version Download

Download Latest Version (.zip)

// 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

mockstudio Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

mockstudio

mockstudio Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README