Link Search Menu Expand Document

LEGO (Lightweight Embedded Gluten-free Objects) is a library for writing fast โ™ป๏ธ reactive, ๐Ÿ“ฆ scoped and predictable ๐Ÿก native web-components in HTML/CSS/JS, that are easy to digest ๐ŸŒฑ for your browser.

Example (my-example.html):

<template>
  <p>Hey Joe</p>
</template>
<style>
  p { color: chocolate }
</style>

These are native HTML elements with Shadow DOM, slots and all native features from the official specs.

Lego is:

  • ๐Ÿ‘™ Minimalist: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating).
  • ๐ŸŒฑ Low dependency: its single third-party is the minimalist Petit-Dom which itself has no dependency
  • โ™ป๏ธ Reactive: updating the state recalculate the Virtual Dom when needed
  • ๐Ÿš€ fast: using virtual dom through a thin layer makes it close to bare-metal
  • ๐Ÿ’ง Simple: thatโ€™s Vanilla, there isnโ€™t much to know, itโ€™s a raw class to extend; no magic โœจ
  • ๐Ÿก Native: webcomponents are actual native webcomponents, you benefit from all the todayโ€™s and tomorrowโ€™s possibilites (slot, encapsulation, โ€ฆ)
  • ๐Ÿฆบ Safe: because it has no third-party dependency and is fully based on browser features, itโ€™s secured and upgraded via your browser.

Lego is not (and will never be):

  • ๐Ÿฏ A full bloated frontend framework with built-in routing. Others do it well.
  • ๐Ÿ— A website builder with buit-in SSR or similar complexities.
  • ๐Ÿ” An HTML replacement that locks you into a specific technology.
  • ๐Ÿง“ An old browsers or IE compatible library (you may try webcomponent polyfills if you feel wild).

View the demo and their source ๐Ÿงช.

Lego is inspired from the native Web-Component spec and Riot.

Itโ€™s just much lighter with simplicity, a source code that is readable for a regular human which makes it accessible to hack, tweak and maintain in the loooong term. The core lib is only 61 LOC! Lego is as light as 3Kb for the full bundle!

No Babel transpiler, no Parcel, no Webpackโ€ฆ it just works out of the box.

Demo: view in action