JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

{{a}}
<input id='temp' type='text' value='' data-set='value' data-scope="mouse">

JavaScript

var $scope = {};
document.body.innerHTML = document.body.innerHTML.replace(/\{\{(.*?)\}\}/gi,function(a,b){
    return "<span data-set='innerHTML' data-scope='a'></span>";
});
var update = (function () {
    var _scope = {};
    var original = document.body.innerHTML;
    return (function update() {
        Object.keys($scope).forEach(function (e) {
            _scope[e] = $scope[e];
            Object.defineProperty($scope, e, {
                set: function (v) {
                    _scope[e] = v;
                    requestAnimationFrame(update);
                },
                get: function () {
                    if (typeof _scope[b] !== 'undefined') return _scope[b];
                    else return "";
                }
            });
        });
        document.body.innerHTML = original.replace(/\{\{(.*?)\}\}/gi, function (a, b, c) {
            if (typeof $scope !== "undefined" && $scope && $scope.hasOwnProperty(b)) return $scope[b];
            else {
                Object.defineProperty($scope, b, {
                    set: function (v) {
                        _scope[b] = v;
                        requestAnimationFrame(update);
                    },
                    get: function () {
                        if (typeof _scope[b] !== 'undefined') return _scope[b];
                        else return "";
                    }
                });
                return "";
            }
        });
    })();
});
requestAnimationFrame(update);





window.addEventListener('mousemove', function windowmousemove(e) {
    setTimeout(function () {
        $scope.mouse = e.pageX + ',' + e.pageY
    }, 0);

    document.getElementById('temp').addEventListener('focus', function (a) {
        setTimeout(function () {
            window.removeEventListener('mousemove', windowmousemove);
            document.body.appendChild(document.createTextNode(this.value));
        
        document.getElementById('temp').addEventListener('blur', function (a) {
    ...