3kb library for tiny web apps.

Sometimes, all you want to do is to try and do something—No boilerplate, bundlers, or complex build processes. Lucia aims to do this, providing an augmentation layer for your logic, allowing you to build just what you need with minimal effort and time.

→ Check out the Lucia Website

Installing Lucia

Lucia doesn't require build tools by default, feel free to just drop a script tag in the head of your webpage.

<script src="https://unpkg.com/lucia"></script>

It also integrates well with module bundlers like Webpack or Rollup, we recommend specifying the exact build if you import Lucia this way.

→ Learn more about installing Lucia

Todo App Example

Below is an extremely simple implementation of a todo app using Lucia, utilizing zero JavaScript. Tasks can be added by submitting the form with the input. No, your eyes aren't fooling you - it's really that simple.

<div l-state="{ value: '', todo: [] }">
  <!-- two-way-binds `value` prop to value -->
  <input l-model="value" />
  <!-- captures click event, pushing current `value` to `todo` -->
  <button @click="todo.push(value)">Create</button>
  <!-- joins array together -->
  <ul l-for="task in todo">
    <li l-text="this.task"></li>
  </ul>
</div>

→ View the live Codepen example

Resources & Contributing Back

Looking for the docs? Check the Lucia website out.

Have a question about Lucia? Join the Lucia Discord server and ask the community for help.

Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!

We expect all Lucia contributors to abide by the terms of our Code of Conduct.

→ Start contributing on Github

Acknowledgments

Lucia is MIT-licensed open-source software by Aiden Bai, et al.

Lucia takes heavy inspiration from Vue's syntax, and believes in the core philosophies and values behind Alpine, Sidewind, and Remake. Feel free to check them out if you interested in a production-ready library to use.

© 2020 The Lucia Authors.