Getting Started

Lit^sx uses ordinary .tsx and .jsx. The compiler turns standard JSX into Lit templates and custom elements; TypeScript, ESLint, Prettier, and editors work with the source directly.

Create a project

npm create litsx-app my-app -- --template app
cd my-app
npm install
npm run dev

Choose a different starting point when needed:

npm create litsx-app my-components -- --template component
npm create litsx-app my-design-system -- --template design-system --visual-tests
npm create litsx-app my-ssr-app -- --template ssr

The generated project configures Vite, TypeScript, and the official ESLint rules. The ssr template also includes a document renderer and browser hydration entry.

Your first component

import { css, useState } from "@litsx/core";

type CounterProps = {
  initialCount?: number;
};

export function CounterCard({ initialCount = 0 }: CounterProps) {
  const [count, setCount] = useState(initialCount);

  return (
    <button on:click={() => setCount((value) => value + 1)}>
      Count: {count}
    </button>
  );
}

CounterCard.styles = css`
  button {
    padding: 0.65rem 1rem;
    border-radius: 999px;
  }
`;

The core authoring conventions are visible here:

• source files are normal .tsx or .jsx
• DOM and custom-element listeners use on:event
• ordinary JSX prop names are mapped to the right Lit binding by the compiler
• component names must produce a valid custom-element tag, so CounterCard becomes counter-card; single-word names such as Counter are rejected
• component metadata uses top-level assignments such as CounterCard.styles = ...; styles may be one CSSResult or an ordered array of reusable CSSResult values
• css is Lit's real tagged template, re-exported by @litsx/core

Add Lit^sx to an existing Vite project

npm install @litsx/core lit
npm install -D @litsx/vite-plugin @litsx/eslint-plugin

These commands install the stable Lit^sx 1.x release line. The scaffolder selects compatible package versions for generated projects.

// vite.config.js
import { defineConfig } from "vite";
import { litsx } from "@litsx/vite-plugin";

export default defineConfig({
  plugins: [litsx()],
});

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@litsx/core"
  }
}

The Vite plugin processes project-local .js, .jsx, .ts, and .tsx modules. JSX/TSX files receive the normal Lit^sx compilation pipeline; ordinary Lit modules are inspected only for integration boundaries such as a Lit template rendering an imported Lit^sx Light DOM child. Standard TypeScript and Prettier handle authored JSX.

Where to go next

• Standard JSX authoring
• Lit interoperability
• Component metadata
• Property and binding inference
• Server rendering and hydration
• Styling options, including the optional Tailwind CSS and UnoCSS integrations
• Tooling