Welcome to lit-jsx! This guide will help you get up and running with JSX in your Lit projects.
lit-jsx is a JSX compiler and Vite plugin that transforms JSX syntax into native Lit templates at compile time. Unlike other JSX implementations, lit-jsx has zero runtime overhead - all JSX is converted to Lit's efficient template syntax during the build process.
If you've worked with React or other JSX-based frameworks, you'll feel right at home. Write components using the JSX syntax you already know.
The transformation happens entirely at compile time. Your production code contains only native Lit templates, with no additional runtime library overhead.
Full TypeScript support with accurate DOM type mappings. Get IntelliSense for all HTML attributes, events, and properties.
Works seamlessly with all Lit features: directives, custom elements, reactive properties, and more.
Before getting started, make sure you have:
- Node.js 18 or later
- A Vite-based project (or create a new one)
- Basic familiarity with Lit and TypeScript
Continue to the Installation guide to set up lit-jsx in your project.