Introducing Lucid.js - a simple, reactive framework

2 May 2021 lucid

During the first part of 2021 I decided to build my own reactive framework - for no particular reason other than to prove I could do it.

And so Lucid.js was born. There's even a playground; here's a playground session showing a to-do app.

Lucid is a reactive, component-based framework for building apps. It lacks the depth of, say, Vue or React, but is correspondingly much easier to learn. And yet, it's feature-rich.

Hello world looks like this:

const app = new Lucid({
    container: '#someElement',
    compsFile: 'components.html'
});

And then in components.html:

<!-- COMPONENT MASTER -->
<h1>{{title}}</h1>
<script>
this.data.title = 'Hello, world!';
</script>
<style>
h1 { color: red; }
</style>

In Lucid, components are comprised of three elements: a HTML element (its template), a script tag (logic) and a style tag (styles) (the latter two being optional).

Here's a rundown of some of Lucid's main features and philosophies:

JS-centric; almost everything is done centrally from a component's JS, rather than weird directives and invented attributes in its HTML template (and no JSX!)
Components are segregated and each has its own template, logic and styles. Within its script tag, this points to the component.
Semi or full reactivity; Lucid defines different areas of reactivity, which can each be set to full or semi reactivity. Lucid can be fully reactive, like Vue or React, but for larger, heavier apps it may be beneficial to tweak this.
Powerful router: Lucid inlcudes a built-in, powerful router which can work with hash- and pushstate-based routes. It's even possible to define fetch request bindings to specific routes so data is fetched automatically on route change.
State management: Lucid supports state management on components out of the box. It's easy to move back and forward in time between components' states (e.g. to revert to their earlier data).
Inter-component messaging: Lucid's low religiosity means any component can talk to any other, via a structured messaging system.

If you'd like to check it out, head over here for the docs and source.

Did I help you? Feel free to be amazing and buy me a coffee on Ko-fi!