Why i created Mahal.js ?

mahal.js logo

1. Documentation

name: new_todo.mahal
description: It helps you create new task. Contains input box to input a task and a button to submit task.
newTask : emits the task details when click on add.
dateCreated: April 24, 2022
<div class="row content-center content-v-center">
<div class="column">
<div class="textbox">
<input :model(title) placeholder="Enter task title" type="text" />
<div class="textbox margin-top-20px">
<input :model(description) type="text" placeholder="Enter task description" />
<button on:click={'validate' | 'addTask' } class="btn primary btn-add">
import { Component, reactive } from "mahal";
export default class extends Component {
title = "";
description = "";
validate() {
if (!this.title) {
alert("Title can not be empty");
return false;
} else if (!this.description) {
alert("Description can not be empty");
return false;
return true;
addTask(isValid) {
if (!isValid) {
this.emit("newTask", {
title: this.title,
description: this.description,
this.title = this.description = "";
.btn-add {
height: 50px;
width: 100px;
margin-left: 25px;
.textbox input {
width: 100%;

2. Code scalability

3. No Vdom

4. Typing



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ujjwal Gupta

Ujjwal Gupta

Frontend lead Polygon | Creator of jsstore, mahaljs | sqlweb, fortjs | opensource creator | we3, blockchain, solidity | javascript