Concorde guide — Introduction. Based on lit.dev, Concorde is a collection of web components for shared apps and websites. Doc ID: docs/_getting-started/start. Keywords: Concorde, supersoniks, docs/_getting-started/start, start, Introduction, guide, get, set, formDataProvider, @ancestorAttribute, @bind, serviceURL, yarn ai:sync, AGENTS.md. URL: https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html.
Introduction
What is Concorde?
Based on lit.dev, Concorde is a collection of web components for shared apps and websites.
Build UIs without tying components to a specific host stack, while keeping visual consistency through a small set of CSS variables.
Why and use case
In 2022, Supersoniks needed a new ticketing stack for nearly 100 sites — mobile apps, modern sites, and legacy PHP without bundlers.
One composable web-component library replaced many one-off apps. Lit was chosen for broad runtime compatibility.
Stack
- Lit
- TypeScript
- Vite
- Tailwind (starter kit, not required in the core package)
Functional features
- DataProvider store (decorators,
get/set) - Forms (
formDataProvider) - Lists, queues, lazy loading
- Router, states, UI kit with status variants
Learn Concorde
| Step | Page |
|---|---|
| 1 | My first component — Lit card, @ancestorAttribute, @bind, mock API |
| 2 | Data flow — Core concepts: decorators and APIs |
| 3 | Local API demos — offline serviceURL for this site (Misc) |
| 4 | create-concorde-ts-starter — recommended project kit (Vite, Tailwind, yarn ai:sync) |
| 5 | AI agents (skills) — AGENTS.md, Cursor / JetBrains rules |
Legacy (Subscriber mixin, Publisher API): Legacy section at the bottom of the sidebar.
Start a new project
npx @supersoniks/create-concorde-ts-starter "project_name"
The starter runs yarn ai:sync for you. Details: AI agents (skills). Manual Vite setup: Legacy: Manual installation.