Pure Web APIs

Lithium

The UI runtime that speaks your language: HTML

Stop learning new syntax. Lithium harnesses the power of standard Web APIs and extends them naturally with a few simple markup rules. Write less, do more.

Learn the Concepts View on GitHub →
<button
class-font-bold="counter > 2"
bind-disabled="counter > 5"
attr-aria-disabled="counter > 5"
on-click="increment()"
>
<p>Count: {{ count }}</p>
</div>
<script setup>
import { ref } from "@li3/web"
export default function() {
const count = ref(0)
const increment = () => count.value++
return { count, increment };
}
</script>

Built on Web Fundamentals

Lithium doesn't invent a new language. It embraces HTML, CSS, and JavaScript as they are, adding minimal, intuitive extensions.

📥

All Props Down, All Changes Up via Events

Data flows down through properties, changes flow up through events. This creates a clear, predictable data pattern that mirrors how the web has always worked.

🔐

Read-Only Templates

Templates are declarative and read-only. State changes don't come from the template—they flow through your component logic via events and ref updates.

Core Concepts

Simple rules that make everything powerful

🔁

<template for="x of y">

Render lists with natural iteration syntax

<template for="item of items">
<li>{{item}}</li>
</template>
❓

<template if="xyz">

Conditionally render DOM elements

<template if="isVisible">
<div>Hidden until true</div>
</template>
🎯

<div bind-xyz="expr">

Bind properties to reactive expressions

<button bind-disabled="isActive">
click me
</button>
🔊

<button on-xyz="handler()">

Listen to events and trigger handlers

<button
on-click="deleteItem(id)"> Delete
</button>
⚙️

<script setup>

Define component behavior and state

<script setup>
export default function() {
const count = ref(0);
return { count };
}
</script>
💡

ref(), computed(), watch()

Create reactive values and derived state

const count = ref(0);
const double = computed(() => count.value * 2)
watch(count, () => ...)

One-File Applications

Entire apps in a single file with inline components and a declarative API

<!-- Counter App -->
<template app>
<h1>{{title}}</h1>
<div class-warning="count > 10">
<p>Count: <strong>{{count}}</strong></p>
<template if="count > 0">
<p class="text-sm text-gray-500">You've clicked {{count}} times</p>
</template>
</div>
<div class="button-group">
<button on-click="increment()">Increment</button>
<button on-click="reset()">Reset</button>
</div>
<script setup>
export default function() {
const title = ref('Counter App')
const count = ref(0)
const increment = () => count.value++
const reset = () => count.value = 0
}
</script>
</template>

Minimal Syntax

Only learn the extensions you need. HTML stays HTML.

No Build Required

Works instantly in the browser with no compilation step.

Progressive Enhancement

Add reactivity to existing HTML incrementally.

Ready to simplify your frontend?

Start building with Lithium today. It takes just minutes to get up and running.

Star on GitHub →