DML JS and AI

DML (Document Makeup Library) is a JavaScript library designed to facilitate the creation of complex web applications using vanilla JavaScript. It allows developers to create DOM elements directly from JavaScript, bypassing the traditional HTML approach. This means you can create elements like <h1>, <p>, and others using JavaScript functions, such as h1() for an <h1> element and p() for a <p> element. This approach offers several advantages:

    Programmatic Intelligence: You can create new elements on the fly using conditions, making your code more dynamic and responsive to different conditions.
    Direct Access to DOM Elements: DML functions return references to DOM elements, eliminating the need for getElementById or similar methods. This direct access to the object state makes manipulating elements more straightforward.
    No Need for a Virtual DOM: Since elements are created and manipulated directly in the browser, there's no need for a virtual DOM, which can improve performance in some cases.
    Encapsulation of CSS Properties: DML allows for the full encapsulation of CSS properties, preventing side effects and making your styles more manageable.

DML is particularly useful for developers looking to create web applications with a focus on object-oriented design patterns. It integrates seamlessly with other frameworks and can be used to build complete web applications from scratch. The library is open-source under the CC0-1.0 License, and while the core is free, there are advanced modules available for professional use, such as a charting library with an unlimited number of axes on each side of a diagram.

import {button, idiv} from "./dml"; 

function Counter () {
    let count = 0;
    let value = idiv("0");
    let binc = button("inc");
    let bdec = button("dec");
    binc.onclick = () => value.innerText = ++count;
    bdec.onclick = () => value.innerText = --count;
}

Counter();