masejs

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

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.

Check out Mase JS Examples for a curated of list of projects built using masejs.

To do

• State managment.
• Router.
• Reusable Components.
• Plugin support.
• Serverside rendering with nodejs.

Copyright and license

Licensed under the MIT License, Copyright © 2024-present masejs.

See LICENSE for more information.