Kanorio Elements

The same protected players, PDF viewer, lightbox, curriculum and customer login that power hosted Kanorio sites, packaged for sites you build yourself. Signed URLs, resume, progress reporting and future upgrades (HLS, watermarks, captions) come for free.

Install

One script tag registers five custom elements. Or install @kanorio/elements and use the React components directly. Pair with @kanorio/sdk for typed API calls.

<link rel="stylesheet" href="https://cdn.kanorio.com/elements/v0/elements.css">
<script type="module" src="https://cdn.kanorio.com/elements/v0/kanorio-elements.js"></script>

<kanorio-login site-url="https://demo.kanorio.com" site-name="Demo"></kanorio-login>
<kanorio-curriculum site-url="https://demo.kanorio.com" product="react-course"></kanorio-curriculum>
<kanorio-unit site-url="https://demo.kanorio.com" deliverable="react-course"></kanorio-unit>

import { KanorioProvider, KanorioLogin, KanorioUnit } from "@kanorio/elements";
import "@kanorio/elements/elements.css";

<KanorioProvider siteUrl="https://demo.kanorio.com" locale="en" theme="auto">
  <KanorioLogin siteName="Demo" />
  <KanorioUnit deliverable="react-course" onProgress={(e) => console.log(e)} />
</KanorioProvider>

Elements

<kanorio-login> — magic-link / 6-digit code sign-in. Stores the customer Bearer in localStorage["kanorio.customer.token"] and fires kanorio:login.
<kanorio-unit deliverable="…"> — the protected player: outline sidebar, video / audio / PDF / text / file / embed units, locked and not-yet-released states, automatic progress reporting. Fires kanorio:unit-change and kanorio:progress.
<kanorio-curriculum product="…"> — public outline for a product (chapters, units, durations, free previews playable anonymously). No login required.
<kanorio-media src="…" mime-type="…"> — public media player for a URL.
<kanorio-lightbox images='["…"]'> — image lightbox with zoom, keyboard and download / share controls governed by the site's media protection.

Common attributes: site-url (defaults to the current origin), locale (defaults to <html lang>; 58 locales built in), theme (dark / light / auto), token. Styling uses --media-*, --site-* and --brand-color CSS variables with sensible defaults. Vidstack and pdf.js load on demand.

Capabilities with drop-in Elements

Full matrix

For the full 12-domain capability & headless support matrix, see the Capabilities page.

Capability	Elements	API + SDK	Hosted
Customer login (magic link / 6-digit code)	`<kanorio-login>` (stores Bearer in localStorage, `kanorio:login` event)	Customer `POST /auth/challenge`, `POST /auth/verify` → Bearer; `GET /me`; `DELETE /session`	`/account/login`
Entitlements (who may access what)	`<kanorio-unit>` shows locked / preview / not-released states	Agent `entitlements.grant` / `revoke` / `list` / `check`; Customer `GET /access/:id`	Backoffice contact → Access tab; `/data/entitlements`; `/account/content`
Deliverables (courses, downloads)	`<kanorio-curriculum>` (public outline, free previews)	Agent `deliverables.`, `deliverable_units.`; Delivery `GET /products/:slug` outline; Customer `GET /deliverables`, `GET /deliverables/:key`	`/store/deliverables`, `/data/deliverables`, `/data/deliverable_units`; product `content-curriculum` section
Protected playback & downloads	`<kanorio-unit>` (video, audio, PDF, text, files, embeds)	Customer `POST /units/:id/open` (600 s signed URL); Delivery `POST /units/:id/open` for previews	`/account/content/%3Akey`
Progress & completion	`<kanorio-unit>` reports progress automatically; `kanorio:progress` event	Customer `POST /progress`, `GET /deliverables/:key/progress`; Agent `progress.list`	`/data/progress`; `/account/content` progress bars
Site team RBAC, Agent PAT / OAuth 2.1 & Customer Session Bearer	`<kanorio-login>`	PAT (`knr_pat_`), OAuth 2.1 (`knr_at_`) with site scope; Customer Bearer (`knr_cat_`) bound to `(websiteId, contactId)`	`/settings/team`, `/account/api-access`
Public media, responsive images, LQIP placeholders & lightbox	`<kanorio-media src mime-type>`, `<kanorio-lightbox images='[…]'>`	Agent `media.*`; Delivery `assets` map (`url`, `width`, `height`, `placeholder` 16px WebP data URL)	`/media` library; gallery & media sections

Versioning

Elements and the SDK share a major version and follow the API stability policy (opens in a new tab): attributes and props are only added, never changed or removed within a major. Pin the CDN URL to a major (/elements/v0/) and add Subresource Integrity when you self-host.