Skip to content
🎨 A front-end JavaScript library for building user interfaces.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Clean up a lot of the code to reduce the build size Apr 13, 2019
LICENSE Added a license Mar 10, 2019
MosaicLogo.png update readme Jan 21, 2019

Mosaic logo

npm Downloads NPM


Mosaic is a declarative front-end JavaScript library for building user interfaces.

πŸ’  Component-Based: Mosaic components are reusable pieces of code that keep track of their own data, actions, lifecycle functions, and more.

⚑️ Observable Data: Mosaic uses Observables to keep track of changes to a component's data. This means that there is no need to call "setState" or anything like that, instead just change the data directly.

🧠 Smart DOM: Updates in Mosaic work by remembering which nodes are dynamic (i.e. subject to change) and traveling directly to those nodes to make changes, rather than traversing the tree again.

πŸ”€ Built-in Router: Comes with a basic, client-side routing solution.

🌐 State Manager: Comes with a built-in global state manager called Portfolio.

πŸ‘Œ Small Library Size: Mosaic is extremely small, with the minified JavaScript file being only 16.6KB.

πŸ”– Tagged Template Literals: Views are written using tagged template literals, which means there is no need for a compiler:

const name = "Mosaic";
html`<h1>Welcome to ${name}!</h1>`


The easiest way to use Mosaic is to first install the npm package by using:

npm install --save @authman2/mosaic

or with a script tag.

<script src=''></script>

(Optional) For fast builds and hot reloading, install the build tool "Parcel." This is not required, though, as Mosaic uses built-in JavaScript features. This means that no build tool is required, but any may be used if it helps the overall project structure.

npm install --save-dev parcel-bundler

Now you are ready to use Mosaic!


Here is an example of a simple Mosaic application. All you need is an index.html file and an index.js file. For a more detailed example, run the project inside the "example" folder.


    <title>My Mosaic App</title>
  <div id='root'></div>

  <script src=''></script>
  <script type="text/javascript" src='./index.js'></script>


// Import Mosaic
import Mosaic from '@authman2/mosaic';

// Create a label component. Data is not defined yet,
// however, it will be injected later on.
const Label = new Mosaic({
    view: function() {
        return html`<div>
            <h2>${ }</h2>
            <p>This is a custom label component!</p>

// Create an app component.
const app = new Mosaic({
    element: '#root',
    data: {
        title: "Mosaic App"
    actions: {
        sayHello: function() {
            console.log("Hello World!!");
            console.log("This component is ", this);
    view: function() {
        return html`<div>
            <h1>This is a ${}!</h1>
            <p>Click below to print a message!</p>
            <button onclick="${this.actions.sayHello}">Click Here</button>

            ${{ text: "Welcome to Mosaic!" }) }

// Paint the Mosaic onto the page.


  • Year: 2019
  • Programmer: Adeola Uthman
  • Languages/Tools: JavaScript, TypeScript, Parcel
You can’t perform that action at this time.