https://github.com/xeaone/element
X-Element: Reactivity without the complexity.
https://github.com/xeaone/element
angular application arrow-js browser components customelements data-binding esmodules framework front-end library lit-element lit-html polymer router routing spa vue web-components webcomponents
Last synced: 13 days ago
JSON representation
X-Element: Reactivity without the complexity.
- Host: GitHub
- URL: https://github.com/xeaone/element
- Owner: xeaone
- License: mpl-2.0
- Created: 2017-04-18T05:07:51.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-03-17T23:07:06.000Z (about 2 months ago)
- Last Synced: 2025-04-21T14:54:13.040Z (23 days ago)
- Topics: angular, application, arrow-js, browser, components, customelements, data-binding, esmodules, framework, front-end, library, lit-element, lit-html, polymer, router, routing, spa, vue, web-components, webcomponents
- Language: TypeScript
- Homepage: https://xeaone.github.io/element/
- Size: 5.83 MB
- Stars: 20
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: docs/security.js
Awesome Lists containing this project
README
# X-Element
### Reactivity without the complexity.
## Vision
Provide a knowledge transferable future proof, reactive data binding, library for building web interfaces.
## Features
- 👶 **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..
## Learn
[https://xeaone.github.io/element/](https://xeaone.github.io/element/)
## Examples
```js
import { html } from 'https://esm.sh/@xeaone/element/module/index.js';
let count = 0;
export default () => html`
${() => `Hello World ${count}`}
count++}>Greet
`(document.body);
```
## Custom Element
```js
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`
${() => `Hello World ${this.#count}`}
this.#count++}>Greet
`(this.#root);
constructor() {
super();
this.#render();
}
}
```
## Use
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
```
npm install @xeaone/element
```
## CDN
- [https://www.npmjs.com/package/@xeaone/element](https://www.npmjs.com/package/@xeaone/element)
- [https://esm.sh/@xeaone/element/module/index.ts](https://esm.sh/@xeaone/element/module/index.ts)
- [https://esm.sh/@xeaone/element/module/index.js](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.ts)
- [https://cdn.jsdelivr.net/gh/xeaone/element/module/index.js](https://cdn.jsdelivr.net/gh/xeaone/element/module/index.js)
## Author
[xeaone](https://github.com/xeaone)
## License
This project is licensed under the MPL-2.0 License