Embed media & engagement into any web app
Galleries, smart uploads, reactions and leaderboards — one production-grade SDK. Drop it in as a React component, a web component, or a single script tag.
Works with the tools you already use
Everything you need, nothing you don't
A compact, production-grade SDK that stays out of your way and your bundle.
Plug & play
React wrapper, framework-agnostic web component, or a single no-code script tag. Your call.
Strict TypeScript
Full typings for every prop and callback — safer integration and first-class editor DX.
Performance-first
~139 KB gzipped core. Heavy features like HEIC conversion are lazy-loaded on demand.
Accessible & themeable
ARIA-friendly out of the box. Light/dark and brand theming via your Org Settings.
An interactive gallery, ready to go
A polished masonry grid with a full-screen lightbox, blurhash placeholders for instant perceived loads, and infinite scroll built in.
Full-screen lightbox with keyboard nav Blurhash placeholders, no layout shift Infinite scroll & view-mode toggles
Smart uploads that just work
Client-side compression and chunked progress keep uploads fast and resilient. HEIC → JPEG conversion is loaded only when a HEIC file shows up — never in your base bundle.
Automatic compression before upload Chunked progress with resume On-demand HEIC conversion
Engagement, built in
Reactions, a curation workflow, and leaderboards turn a passive gallery into a community — without you writing a single endpoint.
One-tap reactions Moderation & curation workflow Real-time leaderboards
-
1
Ava Mercer 842
-
2
Liam Kowalski 601
-
3
Noah Reyes 588
Integrate in minutes
Pick the integration that fits your stack. Same SDK underneath.
import { QratiConnect } from '@qratilabs/qrati-connect';
<QratiConnect
organizationId="your-org-id"
router="memory"
/><script type="module"
src="…/element/web.es.js"></script>
<qrati-connect
organization-id="your-org-id"
router="hash"></qrati-connect><!-- one async tag -->
<script async
src="…/embed/embed.js"
data-organization-id="your-org-id"
data-router="hash"></script>gzipped core bundle
frameworks supported
ways to embed
TypeScript typings
Drops into your stack
Runnable example apps for every major framework. Browse the one you ship with.
Ship media & engagement this week
Grab your organization ID, drop in the SDK, and you're live. No backend to build.