Private, browser-based background removal for individual images and batches. Choose an AI model, refine the edges, add a custom backdrop, and export without uploading your photos.
Most background-removal tools send images to a remote server. cutout-studio downloads the selected model once and performs inference locally with ONNX Runtime Web. Images remain inside the browser while you process, compare, customize, and export them.
- Process as many as 40 images in one queue.
- Add images with drag and drop, the file picker, clipboard paste, a device camera, or the included sample.
- Choose between three model sizes to balance download time and cutout quality.
- Rerun a difficult image with AI Precision, using the full 32-bit model and Hair Detail sharpening without changing the rest of the queue.
- Apply natural, refined, hair-detail, soft, or hard alpha-edge treatments.
- Restore missing subject details or erase leftover background with a full-resolution brush editor, including strength, size, zoom, undo, and reset controls.
- Select automatic, WebGPU, or CPU processing.
- Preview results with an interactive before-and-after slider.
- Keep transparency or add a solid color or two-color gradient.
- Export PNG, WebP, or JPEG at 50%, 100%, 150%, or 200% scale.
- Download one result or package the completed batch as a ZIP archive.
- Install the app as a PWA and reuse cached model files.
- Use the responsive light or dark interface on desktop and mobile.
| Model | Precision | Approximate download | Best for |
|---|---|---|---|
| Swift | 8-bit | 42 MB | Drafts, mobile devices, and large batches |
| Studio | 16-bit | 84 MB | The recommended balance of detail and size |
| Max | 32-bit | 168 MB | Difficult edges where maximum precision matters |
The first run for a model takes longer because its assets must be downloaded. Prepared models are cached for later sessions.
For an individual result that needs more detail, choose AI improve on its image card. This queues only that image with Max model precision and the Hair Detail algorithm. The image still runs entirely in the browser.
Choose Edit result on any completed image to open the alpha-mask editor. Use Restore to paint pixels from the original photo back into the subject, or Erase to make unwanted pixels transparent. Brush strokes remain non-destructive until Save refinement is selected, and Undo or Reset can be used without rerunning the AI model.
| Mode | Behavior |
|---|---|
| Natural matte | Preserves the model's original transparency values |
| Edge refine | Tightens semi-transparent edges and reduces pale halos |
| Hair detail | Applies alpha-aware unsharp masking to strengthen individual hair, fur, and fine semi-transparent edges |
| Soft detail | Adds light feathering for portraits, hair, and fur |
| Hard edge | Creates an opaque binary cutout for logos and solid products |
- Node.js
>=22.13.0for local development - pnpm
11.17.0(the version declared by the project) - A modern browser with WebAssembly support; a WebGPU-capable browser is recommended for GPU acceleration
The CI matrix still tests application compatibility with Node.js 20.19 by using pnpm's standalone executable; the regular pnpm 11 CLI requires Node.js 22 or newer.
Clone the repository, then run:
cd cutout-studio
npm install --global pnpm@11.17.0
pnpm install --frozen-lockfile
pnpm devOpen the local URL printed by Vite. Use the development server instead of opening index.html directly because the app requires cross-origin isolation headers for multithreaded WebAssembly.
| Command | Description |
|---|---|
pnpm dev |
Start the Vite development server with cross-origin isolation headers |
pnpm typecheck |
Validate the TypeScript project without emitting files |
pnpm lint |
Run Biome over the repository |
pnpm test |
Run the Vitest unit and security regression suite once |
pnpm test:coverage |
Run tests and enforce the coverage thresholds |
pnpm audit |
Check the locked dependency graph for moderate-or-higher known vulnerabilities |
pnpm check |
Run every lint, type, test, coverage, and production-build check |
pnpm build |
Type-check and create the production bundle in dist/ |
pnpm preview |
Preview the production bundle locally with the required headers |
- The browser decodes each selected image and queues it for sequential processing to keep lower-powered devices responsive.
@imgly/background-removalloads the selected IS-Net model and runs it through ONNX Runtime Web.- The selected matte algorithm adjusts the resulting alpha channel with Canvas APIs.
- AI Precision can rerun one difficult result with full model precision, while the mask editor can restore or erase local alpha regions by hand.
- The cutout is composited onto transparency, a solid color, or a gradient.
- Canvas encodes the configured output, and JSZip creates batch archives when requested.
No backend or API key is required.
- Selected images are represented by local object URLs and are not sent to an image-processing server.
- Model weights are downloaded from IMG.LY's static asset host and cached by the browser.
- Only processing and export preferences are stored in
localStorage. - Production builds include Vercel Analytics for aggregate usage telemetry; image contents are not passed to it by the application.
The app is a static Vite SPA, but production hosting must include these headers on every route:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
The included vercel.json configures both headers for Vercel. If you use another provider, add equivalent rules before deploying. Without them, ONNX Runtime cannot use multithreaded WebAssembly and will fall back to a slower execution path.
After building, deploy the contents of dist/:
pnpm buildThe production service worker provides offline app-shell support and caches model assets after they are requested.
cutout-studio/
├── public/ # PWA manifest, service worker, sample, and app icons
├── src/
│ ├── components/
│ │ ├── studio/ # Upload, processing, preview, and export features
│ │ └── ui/ # Reusable shadcn/Base UI primitives
│ ├── lib/ # Background removal, image export, and option data
│ ├── styles/ # Tailwind theme and application styles
│ ├── types/ # Domain and component TypeScript declarations
│ ├── app.tsx # Application providers
│ └── main.tsx # Browser entry point
├── vercel.json # Production isolation headers
└── vite.config.ts # Vite, React, aliases, and local headers
| Area | Technology |
|---|---|
| UI | React 19, TypeScript, Tailwind CSS 4, local shadcn-style primitives, Base UI |
| Build tooling | Vite 8, pnpm, Biome |
| Background removal | IMG.LY Background Removal, IS-Net, ONNX Runtime Web |
| Export | Canvas API, JSZip |
| App experience | Service Worker, Web App Manifest, next-themes, Sonner |
| Problem | What to check |
|---|---|
| WebAssembly threading warning | Confirm crossOriginIsolated is true and both required response headers are present. |
| WebGPU is unavailable | Select Auto or CPU processing, or use a browser/device with WebGPU support. |
| First cutout takes a while | The selected model may still be downloading. Swift has the smallest initial download. |
| ONNX runtime or metadata mismatch after an update | Unregister the service worker, clear the site's cached data, and reload so runtime and WASM files come from the same build. |
| Large images exhaust browser memory | Use Swift, process a smaller batch, or resize the source images before importing them. |
Contributions from the community are welcome. Start with the contributing guide, which covers local setup, project conventions, testing, and the pull-request process. Material AI-assisted contributions must also follow the AI-assisted contribution policy.
All pull requests must target develop; never use main as the base branch.
- Use the repository's structured issue forms for bugs, features, documentation improvements, and questions.
- Follow the Code of Conduct in every project space.
- Read the support guide before requesting help.
- Report vulnerabilities privately according to the security policy.
Before opening a pull request, run:
pnpm lint
pnpm typecheck
pnpm test:coverage
pnpm buildKeep image processing client-side, preserve keyboard and screen-reader behavior, and document any new model downloads or network requests. All contributions are submitted under the repository's AGPL-3.0-only license.
cutout-studio is open source under the GNU Affero General Public License v3.0 only. This matches the copyleft license used by the bundled @imgly/background-removal dependency. Third-party packages remain subject to their respective licenses.
If you operate a modified version over a network, review the AGPL requirements for offering the corresponding source code to its users.
- IMG.LY Background Removal provides the browser inference pipeline.
- ONNX Runtime Web runs the models in the browser.
- shadcn and Base UI provide the UI primitives.