html.js

const html = new Proxy(
  {},
  {
    get(target, p) {
      return (props = {}, children = []) => {
        const el = document.createElement(p);
        for (let prop in props) {
          if (typeof props[prop] === "function") {
            el.addEventListener(prop, props[prop]);
          } else {
            el.setAttribute(prop, props[prop]);
          }
        }
        for (let child of children.flat()) {
          if (child !== false && child !== null) {
            if (child instanceof HTMLElement) {
              el.appendChild(child);
            } else {
              el.appendChild(document.createTextNode(String(child)));
            }
          }
        }
        return el;
      };
    },
  }
);

here is the my artistic representation of it :) const html = new Proxy({},{get:(t, p, e,r,c)=>(d={},z=[])=>{e=document.createElement(p);for(r in d)typeof d[r] === "function"?e.addEventListener(r,d[r]):e.setAttribute(r,d[r]);for(c of z.flat())c!=!1&&c!=null?c instanceof HTMLElement?e.appendChild(c):e.appendChild(document.createTextNode(String(c))):0;return e}})