What is Advect?

Advect is a library for creating web components (Custom Web Elements). It provides a pattern for creating and loading custom web elements with NO build step. It aims to unlock the power of modern browser features without the lock-in to the javascript build ecosystem that is common amongst other libraries (.Net/Java/PHP/Python devs rejoice 😉).

Components can be defined in <template> embeded in your HMTL or easily loaded from any endpoint serving html.

At its core Advect is 3 parts.

  • The core library which loads/registers your components via <template> and <script type="text/adv"> tags.
  • The AdvectView (<adv-view>) component which is a stand alone component which handles templating powered by the Eta.js library.
  • The AdvectElement class which serves as a base class for your custom elements and provides access to the systems features.

Advect is inspired by libraries Alpine.js, HTMX, Shoelace, Swiper and Lit.js (Even though they may catch some strays from me, T'is all love 😙) which all give a lot of BANG for your integration buck. Advect aims to K.I.S.S. users on the forehead and make your web project that much simpler.

Installation

Installation is pretty simple, just include the CDN in your html, or install the pacakge via npm (or your prefered package solution, not on JSR just yet.)

From CDN

<!--anywhere in your html -->
<script async src="https://cdn.jsdelivr.net/npm/@advect/advect@latest/dist/advect.js" type="module"></script>

From NPM

npm i @advect/advect

When installing from a package manager you will need to include the library somewhere in your code

import { advect } from "@advect/advect"
Next: Custom Elements