In the example code from the readme:

  UserInterface.model({
   name: "children",
   method: UserInterface.appendChild,
   properties: {
    tagName: "div",
    className: "model",
    children: [
     {
      tagName: "div",
      className: "child",
      textContent: "My first child"
      // and so on..
     }
    ]
   }
  });

vdom was probably the wrong terminology for me to use. What I'm getting at with that is that your properties are like a virtual dom tree.

The majority of what I see being painful to use here is caused by exposing all of that manual boilerplate. You can do something equivalent with a hyperscript-like syntax:

    h('div.model', [
      h('div.child', 'My first child')
    ])

Or with JSX that compiles down to what you have in your `properties`:

   <div class="model">
     <div class="child">My first child</div>
   </div>

You could even trivially add a helper function with low runtime costs that makes it easier to write out the properties. Just using `h` here since it's like hyperscript, but you could call it something better:

    function h(tagName, attributes, ...children) {
      return {
        tagName,
        ...attributes,
        children
      }
    }

That alone would make it easer to read and write properties. The example would become:

  UserInterface.model({
   name: "children",
   method: UserInterface.appendChild,
   properties: (
     h('div', { className: 'model' }, [
      h('div', {
        className: 'child',
        textContent: 'My first child'
      })
    ])
   )
  });

There are other things that you can't fix with syntax changes, though. For example, each model defining the `method` used to add it to the parent seems backwards to me. Shouldn't a component only care about its own state? Down the road, if you wanted to add one of these `children` things to another element by prepending it rather than appending it, you'd have to have to change the child.