Start in 10 minutes with a 3KB library

  1. <script src=""></script>
  2. window.LiveElement.Element.load().then(() => { do stuff... })
  3. Learn everything at (9 minute read)

Intuitively Define Your OWn Custom Elements

  1. Create a directory called 'elements' to put your custom element .html files in
  2. Create a index.json file with a load list of your custom element names
  3. Create a .html file like link.html below for each custom element, inherit everything! This example inherits from symbol.html.
:host {
    cursor: pointer;
    position: relative;
::slotted(element-icon) {
    float: right;
    position: relative;
    /* global */
    class Link extends window.LiveElement.Element.elements.Symbol {
        constructor() {
        connectedCallback() {
            this.addEventListener('click', event => {
                if (this.href) {
           ?, : window.location = this.href

        static get observedAttributes() {
            return (super.observedAttributes || []).concat('href', 'target')

        href($this, value) {
            return value || ($ ? `#${$}` : '') || ''


Customise Everything!

The tools are there for you to:

  • control exactly how custom elements are loaded (including from multiple sources)
  • inherit CSS styles from parent elements
  • inherit and remix HTML templates from parent elements
  • create complex custom HTML elements of any level to use as templates for other elements which you can then include in your apps with one tag
  • include external Javascript or CSS dependencies on the fly
  • build a defined set of elements to load in one network request for product apps
See the full documentation over at to learn everything.

You Don't Need Another Framework

Forget complex Javascript frameworks and just learn and use native Javascript properly. Learn more over at