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.

Comments

[Vesa Piittinen]

Here are some tips for improvements:

1. People want to write their HTML as HTML (that's why JSX and similar syntaxes like htm are so popular).
2. People want to write their CSS as CSS because that's transportable, CSS as JS object is awkward, and CSS-in-JS custom code dies over time as the JS solution becomes a legacy burden.
3. For UI library / framework people are most interested of state management and structure: how to keep a complex app together without it becoming a mess. Currently signals are regarded as the optimal solution for front-end.

With this I'm not saying you shouldn't be doing what you do, instead I'm just encouraging to look into what has already been done before, and find out what problems are not solved yet, and whether it makes sense (for you) to spend time to solve those problems.

[GreenestGoat]

ty for the feedback

[Red Ochsenbein (he/him)]

Not everything needs to be Javascript. Maybe HTML should stay HTML.

[Eckehard]

The way, HTML and Javascript are coupled (via global ID´s) can be impractical, so there are cases where you have a benefit to build the DOM directly without using HTML. But as always - it depends much on your task.

[Eckehard]

Just a question:

why did you not use innerHTML? HTML-rendering his highly optimized, so probably faster than any JS solution. So, your code would be something like this:

const masejs = document.createDocumentFragment();
masejs.innerHTML = ' <div class = 'button-container' style = '...' >
  <button>
         Click me
  </button>
</div>
' 

[Hussein Kizz]

Hmm nice, am also working on a framework, just finishing up final touches, my initial draft was like what you have there, later realized its not dx friendly and so unnatural so I can say just continue!

[Ryan Hoffman]

it seems like you made a virtual dom, while it is impressive (found that most people dont know how they would implement this) the current solution is for very basic functionality and doesn't take into consideration many things other frameworks have already have a mature solution for.
mostly under render performance.
its a cool project dont get me wrong, and good job for creating the logic for it, but lets keep it at that IMO , not trying to discourage you or anything just being realistic

[Chibuzo Franklin Odigbo]

Why would I use this? What does it solve?

[GreenestGoat]

it would mostly be used to have all you code in one place in a single language.

[Eckehard]

Beside the fact that JSX solves the same task in a more natural way, there are lot´s of mature libraries featuring the same idea. See Mithril or VanJS. Most of them use a "composition by code"-approach, where the structure of the code controls the structure of the DOM.

You might have a look on DML, which implements (like VanJS) all HTML-tags as functions, so you can just write
h1("headline") to create a headline. But as it features an "auto-mount" feature, you can use Javascript commands to build your DOM. An ordered list can be created like this:

begin(ol())
["apple","banana","kiwi"].forEach(fruit => li(fruit))
end()

DML allows to easily build functional componentes, so many commands are extended like this:

ol(["apple","banana","kiwi"])

There is definitively a place for DOM in JS-solutions, but it would be better if people would cotribute to existing projects instead of reinventing the wheel every second week.

[Chibuzo Franklin Odigbo]

Yeah, that is great, but I am more focused on the "functionality" side of things. HTML/JSX is already great, plus, this then contains the Vanilla-CSS dread. So...

Whilst I understand how this wold be okay, it is not great, in the grand scheme. I see it as removing the flexibility from creating a modular structure, with more robust reusable component structure. So... What is the happs to this?

[SalladShooter]

This is impressive. I’m working on something similar but for Python instead -> github.com/SalladShooter/phyal. My motive is sometimes people don’t want to or can’t learn HTML but know another language instead. Keep up the work!