Mosaic

Build UIs using Simple JavaScript

Mosaic is a front-end JavaScript library for building fast, efficient, component-based user interfaces. It is heavily inspired by React.js, Vue.js, and lit-html, and takes parts of all three libraries to define its structure and syntax. It introduces the concept of a Smart DOM to update elements in an efficient way and uses tagged template literals for writing component views. Mosaic is incrementally adoptable and requires very little setup to get started with. It also uses an Observable data pattern, which re-renders the DOM when a data property is changed directly.

Official Mosaic Website

const Mosaic = window.Mosaic.default;

Mosaic({
  name: 'my-label',
  created: function() {
    setInterval(() => this.data.count = Math.floor(Math.random() * 1000), 1000);
  },
  view: function() {
    return html`<h1>Count: ${this.data.count || 0}</h1>`;
  }
});

const app = Mosaic({
  element: '#root',
  name: 'my-app',
  view: function() {
    return html`<div>
      <h1>Welcome to Mosaic</h1>
      <my-label></my-label>
      <my-label></my-label>
      <my-label></my-label>
    </div>`;
  }
});
app.paint();

Year: 2019

Tools: JavaScript, Parcel

Developer: Adeola Uthman