DML is to Javascript what Tailwind is to CSS.

I am still impressed by the way it works.
Look at this piece of code :

function topBar (appName) {
  let _styleTopBar = {style :`
      background:orange;
      line-height:50px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 50px;
      padding-left:10px;
      padding-right:10px;
      box-shadow: 0 5px 5px rgba(0,0,0,0.13);           
  `}
  let topBar = selectBase(div("", _styleTopBar )); 
  let _styleItems = {style:"cursor:pointer"}
  let brand = div("brand", _styleItems); 
  let title = div(appName, _styleItems); 
  let help = div("Help", _styleItems);        
  unselectBase(); // topBar
  for (let item of [brand, title, help]) {
    item.onclick = () => alert(item.innerText);
  }
  return topBar;
}

let topbar = topBar("DML Demo");

console.log(topbar);

Here is the result of the output:

<div style="background: orange none repeat scroll 0% 0%; line-height: 50px; display: flex; justify-content: space-between; margin-bottom: 50px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.13) 0px 5px 5px;">...</div>

As Eckehard says, the author of DML, topBar acts as a function generator, it generates a real UI Element.

And to prove it, you can use your favorite framework to render it on a page (but you don't have to :-))

Here is how to render a topbar with Preact

You can test it here Topbar/Preact

const { render }  =  preact;

function topBar (appName) {
  let _styleTopBar = {style :`
      background:orange;
      line-height:50px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 50px;
      padding-left:10px;
      padding-right:10px;
      box-shadow: 0 5px 5px rgba(0,0,0,0.13);           
  `}
  let topBar = selectBase(div("", _styleTopBar )); 
  let _styleItems = {style:"cursor:pointer"}
  let brand = div("brand", _styleItems); 
  let title = div(appName, _styleItems); 
  let help = div("Help", _styleItems);        
  unselectBase(); // topBar
  for (let item of [brand, title, help]) {
    item.onclick = () => alert(item.innerText);
  }
  return topBar;
}

render(topBar("Demo DML"), document.body);

But you can simply render topBar natively TopBar :

 topBar("Demo DML")
 topBar("Demo DML-2")

Amazing :-)