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
Discover more from Coursity
Subscribe to get the latest posts sent to your email.