Lithium - The Modern Web in 7kb

The Retro Experience

Lithium uses standard Web API's and sticks mostly to HTML, instead of inventing a new language on top of it. Just follow a few basic rules of markup:

All props down, all changes up via events
Values in templates are always read-only
<template for="x of y"></template> to repeat
<template if="xyz"></template> to add/remove
<div bind-xyz="expression"> to bind a property to a reactive expression
<button on-xyz="handler()"> to listen to an event xyz (`element.onxyz` = ... also works)
Use <script setup=""> to define a component/app behavior
- Use ref() and computed() to create reactive values

By using [inline components and a declarative API](/docs), an entire app could fit into one file.

<template component="hello-world"> <script setup> import { defineProp, defineEvent, ref, computed, watch, effect } from '@li3/web'; export default function () { const input = defineProp('input'); const onOutput = defineEvent('output'); const localValue = ref(1); const computedValue = computed(() => localValue * 2); // exposed properties and methods return { computedValue, onOutput }; } </script> </template>

Like the old days,but Modern APIs.

The Retro Experience

Like the old days,
but Modern APIs.