Nifty Procrastination Machine
    Wondering what’s next for npm?Check out our public roadmap! »


    1.0.4 • Public • Published


    Library by Alex Merced of (


    Alex Merced first created a front-end UI library using the Web Component API called MercedUI that gives you many of the features developers are used to in frameworks like React. Although, the Web Component API is still not fully supported in all browsers which is why the default is still to use frameworks like React, Angular and Vue. Is to make use of these frameworks often needs lots of tooling, transpilation, etc. to get full benefit from. mBlock is meant to provide features like reactive state props but in a form that doesn't need transpilation, the web component API or other tooling to get started.



    <script src="" charset="utf-8" defer></script>

    Webpack Build

    using webpack template

    npx create-mblocks-app projectName


    npm i mblocks

    in your javascript file

    const {Block} = require("mblocks")

    ES6 Module


    <script type="module" src="app.js" charset="utf-8" defer></script>


    import {Block} from ""

    Getting started

    Essentially all you need in your HTML to get started

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
            <meta charset="utf-8" />
            <script src="block.js" charset="utf-8" defer></script>
            <script src="app.js" charset="utf-8" defer></script>
            <m-app id="start"></m-app>

    mBlock tags always start with the prefix "m-" before the tag name and an id to distinguish between instances.

    The code underlying the tag would look like this in your app.js

    //App Component
    class App extends Block {
        constructor(id) {
            super({ name: 'app', state: { phrase: 'Hello World' }, id });
        builder(state, props) {
            return `<h1>${state.phrase}</h1><m-test id=${}></m-test>`;
        assemble() {
            new Test(;
    //the <m-test> component
    class Test extends Block {
        constructor(id) {
            super({ name: 'test', state: { phrase: 'It Works' }, id });
        builder(state, props) {
            return `<h1>${state.phrase}</h1>`;
        assemble() {}
    const app = new App('app');

    in the constructor you pass a config object into super that configures element.

    name: determines which tags trigger a render (tags that say m-element with the passed in ID)

    state: the initial state which can be changed triggering a re-render with an call to instance.setState(newstate)

    id: the id of the individual instance

    there are fours function you should define...

    builder(state, props) => a function that is passed the state and props objects and returns the template string to be rendered

    assemble(state, props) => a function to run the constructors on any custom components included in your template

    mount(state, props) => is run on the initial mounting of the component

    update(state, props) => is run on every update triggered by setState

    • When the setState function is run it updates the state, then re-reruns the builder function, then the assemble is function is run to rebuild any custom components in your template.

    That's it, just use setState to update any components state it should re-render and it will work! just remember to invoke constructors in assemble of children that are mBlocks (refer to the assemble function of the app component above.)




    npm i mblocks

    DownloadsWeekly Downloads






    Unpacked Size

    8.57 kB

    Total Files


    Last publish


    • avatar