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

<script src="https://cdn.jsdelivr.net/gh/cloudouble/schema@1.0.4/schema.min.js"></script>

<body>
  <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="https://cdn.jsdelivr.net/gh/cloudouble/element@1.7.5/element.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/cloudouble/schema@1.0.4/schema.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/cloudouble/schema@1.0.4/renders/microdata/microdata.min.js"></script>
  <script>
  window.LiveElement.Element.root = `https://cdn.jsdelivr.net/gh/cloudouble/schema@1.0.4/types`
  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; }
    `)
  })
  </script>
</body>
													

  • Every datatype pre-created: if its defined on schema.org, 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 https://github.com/Cloudouble/schema.

You Don't Need Another Framework

Forget complex Javascript frameworks and just learn and use native Javascript properly. Learn more over at https://developer.mozilla.org/en-US/docs/Web/JavaScript