Provide a knowledge transferable future proof, reactive data binding, library for building web interfaces.
-
πΆ Simple If you know HTML, JS, and Template Literals then you know XElement.
-
β½ Agnostic Use XElement with any framework or library - Lit, Vue, React, Angular..
-
β Reactive Performant and efficient two way reactive data binding.
-
β‘ Fast Rendering is blazing fast, because XElement only interacts with the dynamic DOM Nodes..
https://xeaone.github.io/element/
import { html } from 'https://esm.sh/@xeaone/element/module/index.js'; let count = 0; export default () => html` <strong>${() => `Hello World ${count}`}</strong> <button onclick=${() => count++}>Greet</button> `(document.body);
import { html } from 'https://esm.sh/@xeaone/element/module/index.js'; const {html} = await import('https://esm.sh/@xeaone/element/module/index.js') export default class extends HTMLElement { #root = this.attachShadow({ mode: "open" }); #count = 0; #render = () => html` <strong>${() => `Hello World ${this.#count}`}</strong> <button onclick=${() => this.#count++}>Greet</button> `(this.#root); constructor() { super(); this.#render(); } }
The two directories to use are module and bundle. Bundle includes ESNext and ES2015 js bundles. Module contains ESM files with .js, .ts, and .d.ts.
npm install @xeaone/element
- https://www.npmjs.com/package/@xeaone/element
- https://esm.sh/@xeaone/element/module/index.ts
- https://esm.sh/@xeaone/element/module/index.js
- https://cdn.jsdelivr.net/gh/xeaone/element/module/index.ts
- https://cdn.jsdelivr.net/gh/xeaone/element/module/index.js
This project is licensed under the MPL-2.0 License