can/demos/technology-overview/observable-dom.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<script>
	steal = { forceES5: false };
</script>
<script id="demo-source" main="@empty" src="../../node_modules/steal/steal.js" dev-bundle>
import { ObservableObject, stache, stacheBindings } from "can";

class Counter extends ObservableObject {
    static get props() {
        return {
            count: {default: 0}
        };
    }

    increment() {
        this.count++;
    }
}

var myCounter = new Counter();

var view = stache(`
  <button on:click='increment()'>+1</button>
  Count: <span>{{ count }}</span>
`);

document.body.appendChild( view(myCounter) );
</script>