JSFiddle - React, Tailwind, and code Playground

JavaScript

function Template(template) {
    var re = /(:::\w+:::)/g;
    var parts = template.split(re);
    this.bindings = {}
    for (var i = parts.length; i--;) {
        if (i % 2 === 1) { // its an identifier
            var id = parts[i].slice(3, -3);
            this.bindings[id] = {id: id, target:id + "__target__"};
            parts[i] = "<span id='" + id + "__target__'></span>";
        }
    }
    document.body.innerHTML = parts.join("");
    for (var b in this.bindings) {
        this.bindings[b] = new MyCtor(document.getElementById(this.bindings[b].id),
                                      document.getElementById(this.bindings[b].target));
    }
}

Template.prototype.change = function(prop, value) {
    this.bindings[prop].change(value);
};
Template.prototype.getValue = function(prop) {
    return this.bindings[prop].data;
};

function MyCtor(element, target) {
    this.data = "";
    this.element = element;
    this.target = target;
    element.addEventListener("change", this, false);
}
MyCtor.prototype.handleEvent = function (event) {
    switch (event.type) {
        case "change":
            this.change(this.element.value);
    }
};

MyCtor.prototype.change = function (value) {
    this.data = value;
    this.element.value = value;
    this.target.textContent = value;
};

var template = "<pre>The value is: :::myvalue:::</pre>" +
    "<br>Enter a new value <input id='myvalue'>";

var obj = new Template(template);

obj.change("myvalue", "foo");

setInterval(function() {
    var val = obj.getValue("myvalue");
    if (val.length < 50)
        obj.change("myvalue", val + val);
}, 10000);