• This repository has been archived on 19/May/2023
  • Stars
    star
    740
  • Rank 58,382 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ™‹β€β™€οΈ 3kb library for tiny web apps

The Lucia.js project is no longer maintained or usable, this repository serves as an archive for the source code. If you used Lucia.js, thank you for trying our the library in your projects. I hope this repository serves as a useful learning tool for others in the future. Note that the lucia NPM package name has been transfered to the lucia-auth project.

Lucia Logo

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 provide an augmentation layer for your logic, allowing you to bind attributes to your HTML to add interactivity without writing any extra JavaScript.

CI Code Size NPM Version Code Coverage

β†’ Check out the Lucia Website

Hi! Aiden here, author of Lucia. I hope you find an interesting take on web development and a useful tool for your projects. Lucia is actively looking for new maintainers, please leave a reply!

-Aiden (@aidenybai)

Installing Lucia

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

<!-- Development version: helpful console tips -->
<script src="https://unpkg.com/lucia"></script>

<!-- Production version: no warnings -->
<script src="https://unpkg.com/lucia/dist/lucia.min.js"></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: [] }">
  <!-- oninput: set `value` to input.value -->
  <input l-model="value" />
  <!-- onclick: add the current `value` to the `todo` array -->
  <button @click="todo.push(value)">Create</button>
  <!-- joins `todo` array together -->
  <ul l-for="task in todo">
    <li l-text="this.task"></li>
  </ul>
</div>

β†’ View the live Codepen example

Sponsors

Hack Club Bank

Want your logo here? β†’ Sponsor Lucia

Resources & Contributing Back

Looking for the docs? Check the Lucia website out.

Have a question about Lucia? Post it on the GitHub Discussions 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.js, Dababy, and Remake. Feel free to check them out if you interested in an alternative library to use.

Lucia originates from the Latin word "lux", meaning "light, illuminance"


Β© 2020-2021 Aiden Bai.

More Repositories

1

pattycake

Zero-runtime pattern matching
TypeScript
730
star
2

million-react

βš›οΈ Vite starter for Million.js
CSS
425
star
3

hundred

Build your own mini Million.js
TypeScript
412
star
4

reaict

Optimize React with AI
TypeScript
133
star
5

hacky

βš™οΈ Crank.js with tagged templates
TypeScript
44
star
6

grumpy

πŸ”‘ Painless key-value storage (deprecated)
TypeScript
36
star
7

snip

✌️ The simple, no-bs link shortener
TypeScript
35
star
8

dababy

:trollface: Data binding so simple even DaBaby could do it!
TypeScript
29
star
9

million-demo

Million vs. React demo
JavaScript
19
star
10

vhs

old school website vibes
JavaScript
18
star
11

million-site

🦁 Million.js site built with Nextra
JavaScript
14
star
12

site

⌨️ Personal website
JavaScript
12
star
13

site-mini

Minimal revamp of my personal site
CSS
12
star
14

vite-plugin-million

⚑ Million.js' compiler powered by Vite.js
TypeScript
10
star
15

babel-preset-million

❀️‍πŸ”₯ Transforms JSX to Million virtual nodes
JavaScript
10
star
16

mini

Extremely minimalistic website starter
TypeScript
9
star
17

million-tanstack-virtual

JavaScript
9
star
18

docscan

πŸ‘“ Scans documents and returns strings
Python
8
star
19

is-monday

⏰ Checks if today is Monday
JavaScript
8
star
20

kbowl-client

🧠 Conduct oral knowledge bowl online!
TypeScript
8
star
21

website

🌐 Source code of personal website.
HTML
8
star
22

aidenybai

:shipit: My GitHub readme
Shell
8
star
23

lucia-starter

πŸ“¦ The official bundler boilerplate for Lucia
JavaScript
7
star
24

build-your-own-virtual-dom

BYO slides for presenting at conferences
Vue
7
star
25

revenge.ev3

πŸ’ͺ Skyridge's Sumo bot program in ev3.
7
star
26

skywarder

πŸ“˜ A simple and fast RESTful API for interacting with the Skyward grading system.
JavaScript
7
star
27

schzoom

Zoom scheduler dashboard for students written using Remake
JavaScript
7
star
28

tba

πŸ’™ Wrapper for bluealliance.com
JavaScript
7
star
29

alastor

😈🀘 Hellish-fast asynchronous HTTP client for NodeJS
TypeScript
7
star
30

www

⌨️ Personal website
TypeScript
6
star
31

i.zephyr

The static-file hosting service that'll work like a breeze.
TypeScript
6
star
32

hastebin

⚑ Module for creating hastebins
TypeScript
6
star
33

weebify

🀑 Frictionless text weebifier (AP CSA project w/@sarahberah)
JavaScript
6
star
34

amogus.church

sus
HTML
6
star
35

base

🎨 My base javascript project template.
JavaScript
6
star
36

camas

Camas Codes website
CSS
5
star
37

virtual-dom-workshop

JavaScript
5
star
38

me

Minimalistic personal webpage
EJS
5
star
39

kbowl-server

Websocket IO for kbowl
JavaScript
5
star
40

million-compiler

JSX compiler for Million (proof of concept)
JavaScript
5
star
41

million-delta-react-test

dom vs. million-react vs. million-react delta
JavaScript
5
star
42

fuck.zephyr

take selfies by throwing up your middle finger
JavaScript
5
star
43

magnet-project

🧲 CHS Magnet Project API
JavaScript
5
star
44

aidenybai.github.io-old

πŸ•ΈοΈPersonal website
JavaScript
5
star
45

kbowl

🧠 App for oral knowledge bowl during COVID times
JavaScript
5
star
46

million-conference-slides

"Optimizing React for Performance with Million.js" conference slides for Million.js
JavaScript
5
star
47

handsfree-toolkit

A REPL with a composable Handsfree.js toolkit for developing webcam AI reverse workshops
JavaScript
4
star
48

stonks

Stock data viewer example w/ Million.js vs React
JavaScript
4
star
49

leetcode

🧩 My leetcode solutions
4
star
50

apcsp

πŸ’» Repository to store all my AP Computer Science Principles projects (2021-22)
TypeScript
4
star
51

jumpstart

⚑ A simple Vite + Hacky boilerplate
TypeScript
4
star
52

folders

imagine website but folders
JavaScript
4
star
53

arewesamayet

Are we sama yet?
JavaScript
4
star
54

fiber-explorer

JavaScript
4
star
55

chinese-typer

🧧 Typer project for Chinese class.
JavaScript
4
star
56

sheesh

🀩 Vite + Lucia + Tailwind starter that'll make you go SHEESH
TypeScript
4
star
57

fury

😑 Web-based FRC scouting application
JavaScript
4
star
58

calculus-adventure-project

Among Us Calc Adventure Project Web Interface
JavaScript
4
star
59

boomer

πŸ‘΄ Unopinionated monolithic webapp boilerplate
EJS
3
star
60

skyward-client

πŸ’™πŸ“˜ The better web client for Skyward
JavaScript
3
star
61

xu-ellen.github.io

🌐 Minimalistic personal website for Ellen Xu
HTML
3
star
62

lucia-demo

Lucia demos for ISEF
HTML
3
star
63

discordrp

CSS
3
star
64

albio

πŸ›° Astronomy package infrastructure for JavaScript
JavaScript
3
star
65

mst

🧐 MST Magnet Research Journal
TypeScript
3
star
66

rap-god

the real slim shady
3
star
67

Quarters3

🧠 Online FRC 2471 game for small brain moments.
CSS
3
star
68

tion

Experimental tracking pixel for GitHub repositories
JavaScript
3
star
69

million-starter

πŸ’‘ Opinionated Million starter project
3
star
70

skyridge-science.github.io

:atom: We're a passionate group of students competing in Science Olympiad for Skyridge Middle School.
CSS
3
star
71

brotherblocker

super basic script to fake-block websites
JavaScript
3
star
72

apcsa-java-env

β˜• Environment to use during AP test
Java
3
star
73

sanic

πŸ’¬ Imagine messaging but ultrasonic
JavaScript
3
star
74

boilerplate

simple, no-bullshit fullstack web boilerplate
TypeScript
3
star
75

lucia-kumiko-starter

Starter project for a lucia/kumiko project
HTML
2
star
76

physics-final-project

TypeScript
2
star
77

mental-health-app

MST Freshman Mental Health App (Not by @aidenybai, repo for hosting)
HTML
2
star
78

yrs

yrs website
HTML
2
star
79

nn

neural net in javascript
2
star
80

remake-playground

My own playground with messing with remake
JavaScript
2
star
81

mst-database

🧐 MST Magnet Research Journal (NEW)
JavaScript
2
star
82

deopt-web

Generate v8 logs for browser JavaScript
2
star
83

remake-cache-test

HTML
2
star
84

io

Socket.io server for personal use
JavaScript
2
star
85

nextjs-dev-server-temp

JavaScript
2
star
86

lucia-slide-deck

slide deck for symposium webinar
JavaScript
2
star
87

whapnomore

EJS
2
star
88

touch-grass

Touch grass, outerneter
JavaScript
1
star
89

lablab

1
star
90

swc-visitor-api

TypeScript
1
star
91

million-sierpinski-triangle-demo

Million.js implementation of Sierpinski Triangle React Fiber Demo
1
star
92

jacky

Directly use HTML inside JavaScript
1
star
93

semaphore

HTML
1
star
94

nextra-template

TypeScript
1
star