Mase JS is a new way to write HTML entirely in your JavaScript.

Introducing Mase JS a new way to write and structure html entirely inside your JavaScript. Also leaving a small footprint on your website as the library comes in at only 800 bytes in size. it uses a custom JSON like format that converts JavaScript to html on the frontend.

Planned:

Server side / Backend rendering with nodejs or express.
plugin support.

check out the GitHub to get started, also a star would be awesome, if you find an error or wanna ask me a question have a look at our Discord server.

Installation

CDN

Import Mase JS using CDN.

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs';

🚧 Specific Version

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';

NPM

Install Mase JS using npm and node.

npm install masejs

Import

Import Mase JS definitions from MaseJSInterpreter.

index.js

import { MaseJSInterpreter } from 'masejs';

MaseJSInterpreter.interpret(masejs);

Usage

Use the tree structure in your Javascript. That's it 🎉.

script.js

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';

const masejs = {
  div: {
    center: 'true',
    class: 'button-container',
    styles: {
      height: '100%',
      width: '100%',
      inset: '0px',
      position: 'fixed',
    },
    button: [
      {
        value: 'Click me',
        styles: {
          color: 'white',
          'background-color': '#000000',
          outline: 'none',
          border: 'none',
          height: '38px',
          width: '88px',
          'border-radius': '5px',
          cursor: 'pointer',
        },
        class: 'button',
        id: 'button',
        events: {
          click: () => alert('Button clicked!')
        },
      }
    ]
  }
};

MaseJSInterpreter.interpret(masejs);

Examples

A basic form with MaseJS.
A simple sidebar with MaseJS.
Using the library with Material UI.