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>

Drop in by design

Add an import map entry.
Load the library.
That's it!

<script type="importmap"> {"imports": { "@li3/": "https://cdn.li3.dev/@li3/" }}
</script>
<script type="module">import "@li3/web"</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.

Core Concepts

Simple rules that make everything powerful

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 →