LitSX is a Lit-first compiler and tooling workspace for authoring web components with modern JSX, static hoists, and an optional React-compat migration layer.

This repository contains the runtime, Babel presets, authoring support, editor tooling, and scaffolding packages that make up the LitSX toolchain.

The documentation site lives at litsx.dev and is maintained from the separate litsxdev/litsx.dev repository. The VS Code extension lives in the separate litsxdev/vscode-litsx repository.

Authored model

LitSX source is not just generic TSX with helper imports. The authored model includes:

• Lit-flavoured JSX bindings such as @event, .prop, and ?attr
• static hoists such as static styles = ..., static properties = ..., static shadowRootOptions = ..., and other direct static name = ... declarations
• static expose = ... for static class methods

Generic static name = ... hoists lower to memoized static getters on the generated class. static expose = ... is the exception: it lowers to real static methods.

Because plain tsc does not parse this authored syntax directly, editor support comes from @litsx/typescript and CLI type-checking comes from litsx-tsc.

Workspace layout

Core public packages

• packages/core: main runtime package, JSX runtime entrypoints, async boundaries, elements, and rendering helpers
• packages/compiler: public programmatic compilation facade
• packages/create-litsx-app: project scaffolder
• packages/eslint-plugin-litsx: official ESLint integration for LitSX-authored source
• packages/prettier-plugin-litsx: official Prettier integration for .litsx and .litsx.jsx
• packages/typescript: TypeScript language-service support and litsx-tsc for LitSX-authored JSX
• packages/authoring: shared authored JSX language model and parser helpers
• packages/babel-parser-litsx: Babel parser adapter for LitSX-authored JSX
• packages/scoped-registry-shim: internal shimmed scoped-registry runtime used by shadow hosts and renderer mounts
• packages/vite-plugin: Vite integration

Babel toolchain

• packages/babel-preset-litsx: native LitSX lowering pipeline
• packages/babel-preset-react-compat: React compatibility lowering pipeline
• packages/babel-plugin-transform-litsx-scoped-elements: scoped elements transform that remains public as a standalone plugin
• packages/babel-plugin-transform-jsx-html-template: JSX to Lit html template lowering
• packages/babel-plugin-litsx-proptypes: React prop-types compat lowering to native property hoists

Additional public tooling

• packages/babel-plugin-shared-hooks: shared transform helpers consumed by the public Babel packages
• packages/typescript-session: shared TypeScript session plumbing used by editor and type-check tooling

Development

Install dependencies:

yarn install

Run the test suite:

yarn test

Build the workspace:

yarn build

Focus

The workspace focuses on:

• native LitSX JSX ergonomics
• React compatibility as a separate transform layer
• authored syntax support for Lit-flavoured JSX and static hoists
• editor support through @litsx/typescript
• CLI type-checking through litsx-tsc
• scaffolding and editor tooling

Each package directory contains its own README.md with package-specific details.