A small, declarative library for creating ui web components


40250.13.13 years ago3 years agoMinified + gzip package size for @moleculejs/molecule in KB



Molecule logo

Build Status Coverage Version License Greenkeeper badge Codacity Badge


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

This package provides a function that takes a render method and returns a baseclass to create Custom Elements.


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:

const render = (template, container) => {
  /*  Your function that renders the template returned by your
      elements `render` instance method (see below).
      This gets called whenever properties of the element change.

const MyNewBaseClass = Molecule.Element(render);

class HelloWorld extends MyNewBaseClass {
  static get properties() {
    return {
      name: String,
      attribute: true,
      value: 'John Doe',
  render({ name }) {
    //  Returns a template of any type, in this case a string
      <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.

Premade Base Classes

There are several other base classes for Molecule with different rendering methods, like lit-html or JSX. A complete list of official packages for Molecule can be found in the full documentation


Coming soon!

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.