LitSX

Standard JSX and TSX

Use the normal TypeScript, editor, lint, and formatting ecosystem.

Lit and web components

Compile functional components into scoped, distributable custom elements.

SSR to hydration

Render full documents, preserve scoped roots, and hydrate without replacing DOM.

Write standard TSX. Ship Lit.

Edit the component, inspect the generated Lit output, and preview the custom element without leaving this page.

import { css, useState } from "@litsx/core"; export function MessageComposer() { const [count, setCount] = useState(1); return ( <article class="composer"> <span>Standard TSX → Lit template</span> <h2>Compose once. Click {count} times.</h2> <button on:click={() => setCount((value) => value + 1)}>Add a layer</button> </article> ); } MessageComposer.styles = css` :host { display: block; color: white; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; } .composer { width: min(100%, 24rem); padding: 1.25rem; border-radius: 1.15rem; background: radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 42%), linear-gradient(145deg, #111827, #312e81); box-shadow: 0 18px 42px rgba(49, 46, 129, .25); } span { color: #c4b5fd; font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; } h2 { margin: .55rem 0 1.1rem; line-height: 1.15; font-size: 1.55rem; } button { border: 0; border-radius: 999px; padding: .65rem 1rem; background: #fb7185; color: #111827; font-weight: 700; cursor: pointer; box-shadow: 0 .55rem 1.4rem rgba(251,113,133,.24); } `;

What is Lit^sx?

Lit^sx is a compiler and runtime for authoring Lit-based web components with standard JSX and TSX. Lit remains the rendering engine and custom elements remain the runtime boundary.

ordinary JSX prop names with compiler-driven Lit binding inference

on:event listeners and typed custom events

state, refs, effects, suspense, transitions, and error boundaries

component metadata through normal top-level assignments

LitSX 1.0Standard JSX for Lit

Standard JSX and TSX

Lit and web components

SSR to hydration

What is Lit^sx?

Built for the whole component lifecycle

Start with the 1.0 model

LitSX 1.0Standard JSX for Lit

Standard JSX and TSX

Lit and web components

SSR to hydration

What is Litsx?

Built for the whole component lifecycle

Start with the 1.0 model

What is Lit^sx?