This content originally appeared on DEV Community and was authored by GreenestGoat
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.
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 paperjs definitions from MaseJSInterpreter.
index.js
import { MaseJSInterpreter } from './masejs/import.min.js';
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: {
class: 'button-container',
styles: {
height: '100%',
width: '100%',
'align-items': 'center',
display: 'flex',
'justify-content': 'center',
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'
},
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.
This content originally appeared on DEV Community and was authored by GreenestGoat
GreenestGoat | Sciencx (2024-06-15T22:52:32+00:00) Mase JS is a new way to write HTML entirely in your JavaScript.. Retrieved from https://www.scien.cx/2024/06/15/mase-js-is-a-new-way-to-write-html-entirely-in-your-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.