[](https://www.npmjs.com/package/masejs)
[](https://www.jsdelivr.com/package/npm/masejs)
[](https://ko-fi.com/brick_wall)
Mase JS is a new way to write HTML entirely in your JavaScript.
## Installation
### CDN
Import Mase JS using CDN.
```js
import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs';
```
#### 🚧 Specific Version
```js
import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';
```
### NPM
Install Mase JS using [npm and node](https://nodejs.org/en).
```bash
npm install masejs
```
## Import
Import Mase JS definitions from ```MaseJSInterpreter```.
```index.js```
```js
import { MaseJSInterpreter } from 'masejs';
MaseJSInterpreter.interpret(masejs);
```
## Usage
Use the tree structure in your Javascript. That's it 🎉.
```script.js```
```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](https://codepen.io/GreenestGoat/pen/zYQEjML).
* A simple sidebar with [MaseJS](https://codepen.io/GreenestGoat/pen/qBGVxbv).
* Using the library with [Material UI](https://codepen.io/GreenestGoat/pen/GRaMLXR?editors=1010).
Check out [Mase JS Examples](https://github.com/masejs/masejs-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](https://github.com/masejs/masejs/blob/main/LICENSE) for more information.