Zed.js • Sandbox

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/zedjs@4.0.2/standalone/Z.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      Z({
        id: "app",
        render: function() {
          document.getElementById(this.id).innerHTML = 
            `<h1>${this.state.greeting} ${this.state.place}!</h1>
            <input id="place" value="${this.state.place}">
            <button onclick="Z.app.update()">press me!</button>
            <div id="xyz"></div>
            `;
        },
        state: {
          greeting: "Hello",
          place: "World"
        },
        update: function(){
            var val = document.getElementById("place").value;
            if(this.state.place !== val){
                this.state.place = val;
                this.render();
                Z.xyz.render();
            }
        }
      });
      Z.app.render();
      
      Z({
          id: "xyz",
          render: function(){
              document.getElementById(this.id).innerHTML = `
                <h2>${this.name}</h2>
                <button onclick="Z.xyz.update()">update me!</button>
              `;
          },
          name: "Matti",
          update: function(){
              this.name = "Thomas";
              this.render();
          }
      });
      Z.xyz.render();
      
    </script>
  </body>
</html>