Concorde guide — Manual installation (Vite). > Legacy — for brownfield apps or custom stacks. New projects should use the starter. Doc ID: docs/_getting-started/concorde-manual-install. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-manual-install, concorde-manual-install, Manual installation (Vite), guide, tsconfig.json, AGENTS.md, --host, becomes , * , main.ts, my-element.ts. URL: https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html.

Manual installation (Vite)

Legacy — for brownfield apps or custom stacks. New projects should use the starter.

Brand New Vite Project

Tailwind configuration is not covered here yet.

Creating the Project

# Pure JavaScript project
yarn create vite --template vanilla-js
# TypeScript project
# (it is recommended to use this approach, which installs Lit separately if needed, via "yarn add lit")
yarn create vite --template vanilla-ts
# TypeScript + Lit project
# (creating new web components, for example, to extend the fetch or subscriber mixins)
yarn create vite --template lit-ts

Using Lit with TypeScript requires the following configuration in the "compilerOptions" section of the tsconfig.json file:

"experimentalDecorators": true,
"useDefineForClassFields": false

Installing Concorde

Navigate to the project folder created and perform the installation:

yarn add @supersoniks/concorde

Agent skills (AGENTS.md, Cursor / JetBrains): see AI agents — run node node_modules/@supersoniks/concorde/scripts/ai-init.mjs after install.

Development / Build

# Development (you can add `--host` after the command chain in package.json's dev script instead of typing it each time as shown below)
yarn dev --host
# Build
yarn build

Shortcut Imports

Shortcut imports work by default in JavaScript, but in TypeScript, they are activated by choice as they inject data into tsconfig.json. Here is the command:

npx concorde enable-short-paths

Shortcut imports replace the actual paths with aliases as follows:

• @supersoniks/concorde/core/components/functional_or_ui/component/component becomes @supersoniks/concorde/functional_or_ui/component
• @supersoniks/concorde/core/mixins_or_utils/class_name becomes @supersoniks/concorde/mixins_or_utils/class_name

The original paths remain accessible. Shortcut imports are used for the examples later in this documentation.

Usage

Simple Integration in HTML

Import needed component in main.ts or wherever you want to use it:

import "@supersoniks/concorde/ui/button";

Then in the render function ofyour component or in the HTML of the web page that includes the compiled JS, use the component as follows:

<sonic-button variant="outline">My button</sonic-button>

Using a Mixin to Create a New Lit Component

For example, create a file my-element.ts at the root:

import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import Fetcher from "@supersoniks/concorde/mixins/Fetcher";
import Subscriber from "@supersoniks/concorde/mixins/Subscriber";

@customElement("my-element")
export class SonicComponent extends Fetcher(Subscriber(LitElement)) {
  @property() email = "";
  @property() first_name = "";
  @property() last_name = "";

  render() {
    return html`<div>
      ${this.first_name} ${this.last_name} : ${this.email}
    </div>`;
  }
}

Import component main.ts or main.js or any other component that uses it to be compiled

import "./my-element";

In the HTML of a JS or TS component or in the HTML of the web page containing the compiled JS:

<my-element serviceURL="/docs-mock-api" dataProvider="api/users/2" key="data"></my-element>