@tryonit/web

@tryonit/web

Browser engine for free, open-source, client-side virtual try-on, plus a framework-free mount() UI for Vue, Svelte, Angular, Shopify themes and plain HTML. Real time makeup, glasses, hats, earrings, watches, rings, hair color and clothing overlays with MediaPipe tracking and WebGL rendering. Everything runs on the device.

npm install @tryonit/web three

three is an optional peer dependency, loaded only for 3D assets.

Drop-in UI with mount()

import { mount } from '@tryonit/web';
import '@tryonit/web/styles.css';

const tryon = mount(document.getElementById('tryon')!, {
  asset: '/assets/aviator.json',
  modelBaseUrl: '/models', // optional: self hosted models
  theme: { 'color-primary': '#0f766e' },
  onCapture: (blob) => upload(blob),
});

tryon.setAsset('/assets/round.json');
tryon.destroy();

Returns { engine, element, setAsset(source), destroy() }.

Engine API

import { createTryOnEngine } from '@tryonit/web';

const engine = createTryOnEngine({
  container: document.getElementById('stage'),
  performance: 'auto',
  modelBaseUrl: '/models',
  wasmBaseUrl: '/wasm',
});

await engine.setAsset('/assets/lipstick.json');
await engine.start();
engine.setVariant('nude');
engine.setIntensity(0.7);
await engine.switchCamera();
const blob = await engine.capture({ type: 'image/png' });
engine.pause();
engine.resume();
engine.destroy();

TryOnEngineOptions

TryOnEngine

Events

Other exports

Framework recipes

// Vue 3
onMounted(() => (handle = mount(el.value!, { asset })));
onBeforeUnmount(() => handle.destroy());

// Svelte
onMount(() => { const h = mount(node, { asset }); return () => h.destroy(); });

// Angular
ngAfterViewInit() { this.handle = mount(this.host.nativeElement, { asset: this.asset }); }
ngOnDestroy() { this.handle.destroy(); }

Create your own products and filters

Every product is a small JSON asset manifest, plus one file for products that need it:

{ "version": 1, "id": "ruby", "type": "makeup.lips", "color": "#B0123A", "finish": "satin" }

{
  "version": 1,
  "id": "moustache",
  "type": "face.overlay2d",
  "image": "moustache.png",
  "anchor": "mouth",
  "scale": 0.55
}

{ "version": 1, "id": "aviator", "type": "glasses", "model": "aviator.glb" }

Check your files before shipping:

npx -p @tryonit/core tryonit-validate public/tryon

Step by step recipes for every type (beauty filters, stickers, 3D models, variants, hosting, Shopify and CMS loading, troubleshooting): Creating products and filters.

Requirements

WebGL2 and a secure context (HTTPS or localhost). See the browser table in the main README.

MIT licensed.