npm package Open source
@tryonit/core: Zero-Dependency Core of the TryOnIt SDK
The platform-agnostic TypeScript core of my virtual try-on SDK: manifest validation, a session state machine, tracking math and smoothing filters.
Overview
@tryonit/core is the foundation of TryOnIt, the open-source SDK I built so shoppers can see makeup, glasses, jewellery, watches, hair colour and clothing on themselves through their camera. The core holds everything that does not depend on a browser, so the web, React and React Native packages share one implementation of the rules instead of three.
It is pure TypeScript with zero runtime dependencies and no DOM. It compiles without DOM types, takes an injectable fetch, never touches window, document or navigator, and a test imports the entire public API in a Node environment without DOM globals. That discipline is what let the React Native package reuse it unchanged.
Inside are a small schema builder that validates product manifests for 15 asset types with readable, path-based errors and ships a JSON Schema kept in sync by a unit test; an immutable store with a finite state machine for the camera session; the anchor math that turns MediaPipe landmarks into poses for the nose bridge, ear lobes, wrist and fingers, with iris-based metric scale; One Euro smoothing filters; and a homography warp for clothing. It also ships tryonit-validate, a CLI that checks manifests and their GLB and PNG files in CI. A typical import is about 5.9 KB min+gzip.
Key features
- Runtime validation for 15 product types with path-based error messages
- JSON Schema for editor autocomplete, kept in sync with the validator by a test
- Session store and state machine that works with useSyncExternalStore
- Face, hand and body anchor math with iris-based metric scale
- One Euro smoothing filters and homography warping
- tryonit-validate CLI for checking product catalogues in CI
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.
-
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.
-
5 min read
Shipping AR Try-On to React Native and Expo Go with a WebView Engine
Why @tryonit/react-native runs the web engine in react-native-webview, how the bridge works, and the native VisionCamera, Skia and Filament engine planned next.