Embeddable SDK · TypeScript-ready

Embed media & engagement into any website

Galleries, smart uploads, reactions and leaderboards — one production-grade, type-safe SDK. Embed it as a React component, a web component, or a single script tag.

Get started View on npm

Works in 15+ frameworks & platforms — no lock-in

yourapp.com
1.2k reactions
Leaderboard
Ava M.842
Liam K.post 601
Noah R.588

Works with the tools you already use

Our clients

Trusted by teams that ship fast

Client 1 Client 2 Client 3 Client 4 Client 5 Client 6 Client 7 Client 8
Why Qrati Connect

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.

Gallery

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
Uploading 3 photos HEIC → JPEG
IMG_0421.heic100%
beach_sunset.jpg72%
group_shot.png34%
Compressed & chunked — 18.2 MB → 4.1 MB
Uploads

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
Reaction mode

Emoji reactions

Let people react with the emoji set you choose. Per-item counts roll up live, and an optional leaderboard surfaces the crowd favourites — no endpoint to write.

  • Configurable reaction emojis
  • Live per-item reaction counts
  • Optional crowd-favourite leaderboard

You reacted ❤️ — tap again to undo

Leaderboard
Open
  1. 1 Ava Mercer 4.8
  2. 2 Liam Kowalski 4.5
  3. 3 Noah Reyes 4.3
Scored by jury & crowd — winners auto-ranked
Contest mode

Run a contest

Turn the gallery into a competition. Star ratings drive scores, a ranked leaderboard updates in real time, and winners are surfaced automatically when it closes.

  • Star ratings & scoring
  • Real-time ranked leaderboard
  • Automatic winner selection
Three ways in

Integrate in minutes

Pick the integration that fits your stack. Same SDK underneath.

React component 
import { QratiConnect } from '@qratilabs/qrati-connect';

<QratiConnect
  organizationId="your-org-id"
  router="memory"
/>
Web component 
<script type="module"
  src="…/element/web.es.js"></script>

<qrati-connect
  organization-id="your-org-id"
  router="hash"></qrati-connect>
No-code embed 
<!-- one async tag -->
<script async
  src="…/embed/embed.js"
  data-organization-id="your-org-id"
  data-router="hash"></script>
Live demo

Enough reading, try it here

This is the real embeddable web component — same tag you drop into your own app.

connect.qrati.com
<150KB

gzipped core bundle

15+

frameworks & platforms

3

ways to embed

100%

TypeScript typings

Examples

Drops into your stack

Runnable example apps for every major framework. Browse the one you ship with.

React Next.js Vue Svelte Solid Qwik Angular Astro Preact Lit Ember Marko WordPress Wix Vanilla JS

Grab your organization ID, drop in the SDK, and you're live. No backend to build.

Get started