This library makes hundreds of data types described over at available as custom HTML elements.

<script src=""></script>

  <element-thing id="test" alternatename="The thing" description="the description" additionalType="myAdditionalType">Thing</element-thing>
  <br />
  <input id="test-input" placeholder="update the additionalType" />
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  window.LiveElement.Element.root = ``
  window.LiveElement.Element.load(['Schema'].concat(window.LiveElement.Schema.CoreTypes).concat(window.LiveElement.Schema.DataTypes)).then(() => {
    window.test = document.getElementById('test')
    window.testInput = document.getElementById('test-input')
    window.testInput.addEventListener('input', event => {
      window.test.additionalType = window.testInput.value
    window.LiveElement.Element.render(window.test, undefined, false, `
    [itemprop] { display: block; }
    slot { font-weight: bold; }

  • Every datatype pre-created: if its defined on, it's available here as a custom element.
  • Complete control over behaviour, styling and templating: thanks for the rendering capabilities of Element, you can inject custom CSS, Javascript and HTML into any pre-defined element type, borrow stylesheets, templates from other types and refine everything you ever need.
  • Concise: incredibly small code base that gets more done than what appears at first glance.
  • Load, update and extract data: load complex data with window.LiveElement.Schema.setElementInput, update with element.myAttribute = newValue and extract with element.valueOf().
  • Extend: create new datatypes as you like, or new rendering engines in addition to the Microdata rendering engine provided with the library.
Dive deep into the full documentation over at

You Don't Need Another Framework

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