Mase JS is a new way to write HTML entirely in your JavaScript.
Import Mase JS using CDN.
import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs';import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';Install Mase JS using npm and node.
npm install masejsImport Mase JS definitions from MaseJSInterpreter.
index.js
import { MaseJSInterpreter } from 'masejs';
MaseJSInterpreter.interpret(masejs);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);-
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.
- State managment.
- Router.
- Reusable Components.
- Plugin support.
- Serverside rendering with nodejs.
Licensed under the MIT License, Copyright © 2024-present masejs.
See LICENSE for more information.