A library for creating fast and reactive Custom Elements
Switch branches/tags
Clone or download
DiiLord Merge pull request #24 from Molecule-JS/greenkeeper/rollup-plugin-ter…

Update rollup-plugin-terser to the latest version 🚀
Latest commit f575bbc Sep 17, 2018


Molecule · GitHub license codecov npm version Build Status Greenkeeper badge


Molecule is a JavaScript library for building user interfaces using web components.

It provides several classes from which you can build your Custom Elements

  • The Molecule base class. It is agnositic about your actual templatization and rendering function.
  • MoleculeLit class which uses the standard functions from lit-html by the Polymer team.
  • MoleculeLitExtended uses the extended rendering functions of lit-html.


The @moleculejs/molecule package can be installed using npm or yarn:

npm install --save @moleculejs/molecule
yarn add @moleculejs/molecule


See the full documentation at MoleculeJS.org.


Let's start with a simple Example:

class HelloWorld extends MoleculeLit.Element {
  static get properties() {
    return {
      name: String,
      attribute: true,
      value: 'John Doe',
  render({ name }) {
            <div>Hello ${name}</div>

customElements.define('hello-world', HelloWorld);

This creates a new Custom Element called hello-world, which can now be used anywhere in your application using <hello-world>.

This new element will also keep the property name in sync with the attribute name, meaning that the element will look like this in the DOM:

<hello-world name="John Doe"></hello-world>

If you change the attribute or the property, both will be kept in sync and the element will be rerendered.


Coming soon!