npm package Open source
@tryonit/web: Client-Side Virtual Try-On Engine for the Browser
A browser engine for real-time virtual try-on with MediaPipe and WebGL2, plus a framework-free mount() UI for Vue, Svelte, Angular, Shopify and plain HTML.
Overview
@tryonit/web is the engine of TryOnIt. It opens the camera, tracks the face, hands, body or hair with MediaPipe running on the device through WebAssembly, and renders the product on top in real time: lipstick and complete makeup looks, hair colour, face stickers, 3D glasses, hats, earrings, watches and rings, and experimental clothing overlays. Camera frames never leave the device, so there is no server to run and no fee per try.
I wrote the renderers myself. Makeup is rasterised from face landmark polygons into a feathered mask and blended so that skin and lip texture survive and teeth stay untouched. 3D products are authored in millimetres and placed with a camera that matches MediaPipe's face geometry, with invisible occluders so glasses temples and the far earring disappear behind the head. Clothing is warped onto the torso with a homography.
Performance was a constraint from the start. The initial entry is about 23 KB min+gzip; MediaPipe, each tracking model and three.js load only when a product needs them. Detection runs once per new camera frame at an adaptive 30 to 15 fps while rendering runs on every animation frame, and destroy() releases every camera track, MediaPipe task and WebGL resource. For sites that do not use React, mount() adds the complete UI in a few lines.
Key features
- Makeup, hair colour, stickers, 3D accessories, watches, rings and clothing
- On-device MediaPipe tracking on the GPU with automatic CPU fallback
- Lazy loading of only the trackers and renderers a product needs
- Adaptive detection rate with quality, balanced and battery modes
- Photo upload fallback, capture and before and after comparison
- Framework-free mount() UI for Vue, Svelte, Angular and Shopify themes
Articles about this project
-
7 min read
How to Create Virtual Try-On Products with JSON Manifests
A practical guide to TryOnIt asset manifests: lipstick shades, makeup looks, face stickers, variants, CORS hosting, CMS or Shopify loading and CI validation.
-
8 min read
Inside TryOnIt: The Architecture of a Client-Side Virtual Try-On SDK
How I structured an open-source virtual try-on SDK as layered TypeScript packages: a DOM-free core, a per-frame fast path, a state machine and renderers.
-
6 min read
Keeping Web AR Fast: Bundle Budgets, Lazy Loading and Adaptive Tracking
The performance techniques behind TryOnIt: size budgets that fail the build, loading only the trackers a product needs, intent preloading, adaptive detection.
-
7 min read
Preparing 3D Models for AR Try-On: Millimetres, Origins and glTF Export
How to model, orient and compress glasses, hats, earrings, watches and rings for web AR try-on: real-world units, anchor origins, Blender export, compression.
-
4 min read
Privacy by Design for Camera Features: On-Device Virtual Try-On
How TryOnIt keeps camera frames on the device, which network requests it makes, how to self-host for zero third-party requests, and the CSP it needs.