lit-jsxJSX for Lit

A powerful JSX compiler and Vite plugin that transforms JSX into native Lit templates at compile time with zero runtime overhead

Get Started

API Reference

View on GitHub

⚡

Zero Runtime Overhead

Pure compile-time transformation to native Lit templates. No runtime library needed.

🎯

Type-Safe

Comprehensive TypeScript support with native DOM type mappings for accurate IntelliSense and type checking.

🔧

Vite Integration

Seamless setup with the included Vite plugin. Works with your existing Vite configuration.

🎨

Lit Ecosystem

Works with all Lit directives, custom elements, and patterns you already know and love.

🎛️

Flexible Binding

Fine-grained control over attribute, property, and boolean bindings with intuitive syntax.

🏷️

Dynamic Tags

Support for conditional element types with static template optimization.

📦

Function Components

Full support for composable function components with clean, reusable code.

🔗

Custom Elements

Use LitElement classes directly in JSX with automatic generic type support.

Quick Example

Write familiar JSX that compiles to efficient Lit templates:

tsx

function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <div classList={{ completed: todo.completed }}>
      <input
        type="checkbox"
        checked={as.prop(todo.completed)}
        disabled={as.bool(todo.readonly)}
        onchange={() => onToggle(todo.id)}
      />
      <span>{todo.text}</span>
      <button onclick={() => onDelete(todo.id)}>Delete</button>
    </div>
  );
}

This compiles to:

html`
  <div class=${classMap({ completed: todo.completed })}>
    <input
      type="checkbox"
      .checked=${todo.completed}
      ?disabled=${todo.readonly}
      @change=${() => onToggle(todo.id)}
    />
    <span>${todo.text}</span>
    <button @click=${() => onDelete(todo.id)}>Delete</button>
  </div>
`

Installation

npmpnpmyarn

npm install @arcmantle/lit-jsx

pnpm add @arcmantle/lit-jsx

yarn add @arcmantle/lit-jsx

Configure Vite

// vite.config.ts
import { defineConfig } from 'vite'
import { litJsx } from '@arcmantle/lit-jsx/vite'

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

Configure TypeScript

json

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@arcmantle/lit-jsx"
  }
}

Now you're ready to start using JSX with Lit! 🚀