Ticketlayer Elements

Embeddable UI components for selling tickets with Ticketlayer: event lists and cards, ticket and seat selection, cart, checkout, order confirmation, tickets and a customer account, built with Stencil as framework-agnostic web components.

| Package | What | |---|---| | @ticketlayer/elements | the web components (<tl-event-list>, <tl-cart>, ...), lazy-loaded via loader/ or bundled from dist/ | | @ticketlayer/elements-react | React wrappers (<TlEventList />, <TlCart />, ...), generated from this build in ../elements-react |

Every element binds to the @ticketlayer/live client the host page publishes (createLiveClient), so nothing here takes an API key.

<script src="https://cdn.staging.t9r.dev/v1/ticketlayer.js"
        data-publishable-key="tlpk_..."
        data-api-url="https://live-staging.t9r.dev"
        data-checkout-base="https://hbo.staging.t9r.dev"></script>
<tl-event-list></tl-event-list>
<tl-cart-badge></tl-cart-badge>

The @ticketlayer/live drop-in above loads the Elements bundle itself from /elements/v1/ticketlayer-elements/ticketlayer-elements.esm.js on the same CDN; the CDN image is built from main on every push.

• docs/USAGE.md - installation, wiring the client, theming, events, framework notes
• docs/COMPONENTS.md - props, events and examples for the post-purchase and account components
• elements.catalogue.json - the machine-readable catalogue of every element: props, events, slots, CSS custom properties, supported runtimes and category. Generated by pnpm build:catalogue after a build (the build itself does not write it, so the check can fail) and checked in CI (pnpm test:catalogue).

Development

From the repository root, after pnpm install:

pnpm --filter @ticketlayer/elements build        # stencil build
pnpm --filter @ticketlayer/elements build:catalogue   # then the catalogue, explicitly
pnpm --filter @ticketlayer/elements-react build  # the React wrappers, from that build
pnpm --filter @ticketlayer/elements dev          # stencil dev server
pnpm --filter @ticketlayer/elements test         # spec tests
pnpm --filter @ticketlayer/elements test:catalogue

CLAUDE.md here is the working agreement for this package, the root AGENTS.md the rules for changing an element, and the root .claude/skills/add-element/SKILL.md the walkthrough for adding one.

Releases are driven by changesets: the workspace's packages are versioned as a linked group and published to npm with provenance by the release workflow on merge to main.

Licence

Proprietary: see LICENSE. Live9 Technologies Limited licenses it only to build, run or embed a Ticketlayer service, under the agreement on which it provides the account.