picodom

Picodom

Picodom is a 1 KB Virtual DOM builder and patch function.

Try it online

import { h, patch } from "picodom"

let element, oldNode

function render(newNode) {
  return (element = patch(
    document.body,
    element,
    oldNode,
    (oldNode = newNode)
  ))
}

function view(state) {
  return (
    <div>
      <h1>{state}</h1>
      <input
        autofocus
        type="text"
        value={state}
        oninput={e => render(view(e.target.value))}
      />
    </div>
  )
}

render(view("Hello!"))

Picodom supports keyed updates & lifecycle events — all with no dependencies. Mix it with your favorite state management library and roll your own custom view framework.

Links

• Documentation
• Twitter
• /r/picodom

License

Picodom is MIT licensed. See LICENSE.