Qrati Connect — Embeddable Media & Engagement SDK 🚀

Qrati Connect is a compact, production-grade SDK for embedding photo galleries, uploads, curation, and engagement into any web app. Built with strict TypeScript, Preact compatibility, and careful bundling to deliver a fast, accessible, and themeable integration.

Why Qrati Connect? 💡

• Plug & Play: Use the Web Component anywhere, or import the React wrapper for rapid integration.
• Strict TypeScript: Full typings for safer integration and better DX.
• Performance-first: Small initial bundle, strategic lazy-loading for heavy features (HEIC conversion, upload tooling).
• Accessible & Themeable: ARIA-friendly; visual theme is centrally configured via the Qrati Organization Settings page and applied to the component (exposed via CSS variables and className hooks).

Highlights — What’s inside ✨

• Interactive media gallery with lightbox, blurhash placeholders and infinite scroll
• Smart uploads: compression, chunked progress, HEIC → JPEG conversion (on-demand)
• Reactions, curation workflow, and leaderboards for engagement

Quick Install & Integration

Install

pnpm add @qratilabs/qrati-connect
# or
npm install @qratilabs/qrati-connect

React (Client Component)

'use client';
import { QratiConnect } from '@qratilabs/qrati-connect';

export default function Page() {
    return <QratiConnect organizationId='your-org-id' router='memory' />;
}

Web Component (Framework Agnostic)

<script type="module" src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/element/web.es.js"></script>
<qrati-connect organization-id="your-org-id" router="hash"></qrati-connect>

Props & Attributes

| Prop / Attribute | Type | Default | Description | | ------------------- | ------------------------ | ---------- | -------------------------------------- | | organizationId * | string | — | Your Qrati organization ID (required) | | router | 'memory' \| 'hash' | 'memory' | Routing strategy for navigation | | uid | string | — | Pre-authenticated user ID | | fname | string | — | Pre-authenticated user first name | | lname | string | — | Pre-authenticated user last name | | theme | 'light' \| 'dark' | 'light' | Color scheme | | onError | (error: Error) => void | — | Error callback for handling SDK errors |

* Required

Events & Callbacks

| Callback | Payload | Description | | --------- | ------- | ------------------------------------- | | onError | Error | Fires when an error occurs in the SDK |

Performance & Bundling

We optimize for small initial loads and lazy-load heavy features:

• Initial: ~139 KB gzipped (core UI + essentials)
• Upload feature: +~73 KB gzipped (lazy)
• HEIC conversion (heic2any): large dependency loaded only on-demand (~345 KB gzipped)

Support

• Report bugs or request features via GitHub Issues: https://github.com/qrati-labs/qrati-connect-ts/issues
• See docs/ for architecture, component, and hook references
• For commercial support: [email protected]

License

MIT © Qrati Labs — https://qrati.com

Visit docs/ for full API and integration patterns.