A lightweight library to build reactive interfaces.
Embraces the Web API's of today and provides an out-of-box experience.
It's a library to write reactive web interfaces using a simple and predictable mental model. This model works for all skill levels: beginner, advanced and AI developers. I know what you are thinking! Oh, yet another framework! _sigh_ no thanks. So what makes **Lithium** different? We **_embrace_** the web platform, instead of putting it away as abstractions. Using [inline components and a declarative API](/docs), we can define the _shape_ of a component, and let the implementation details aside. Then we can pick and choose which implementation you want to use, again with standard API's and put them together to bring life to your user interface (UI). Here's a quick example:
import { defineProp, defineProps } from '@li3/web';
export default function setup() {
// short form
const foo = defineProp('foo');
const bar = defineProp('foo', 123);
// long form with defaults
const { foo, bar } = defineProps({
foo: String,
bar: { default: 123 }
});
}
import { defineEvent, defineEvents } from '@li3/web';
export default function setup() {
// short form
const emit = defineEvents(['update', 'remove']);
emit('update', { value: 123 });
// long form, with individual emitters
const onUpdate = defineEvent('update');
onUpdate(123)
}
import { ref, unref, computed, watch } from '@li3/web';
export default function setup() {
const name = ref('Joe');
const greeting = computed(() => 'Hello, ' + unref(name));
function isEmpty() {
return !!unref(name);
}
watch(() => unref(name), (value) => { /**/ });
return { name, greeting, isEmpty }
}
import { onInit, onUpdate, onDestroy } from '@li3/web';
export default function setup() {
onInit(function() {
// called once on mount
});
onUpdate(function() {
// called every time a prop changes
});
onDestroy(function() {
// called once on unmount
});
}
Need more? Head to the full documentation to see the API and more examples!