JSFiddle - React, Tailwind, and code Playground

by vasco

HTML

<html>
<head>
    <title>mobile water.js</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <textarea rows="10" cols="25">
<html>
<body>
<h1>Hello World!</h1>
<p>How's it going?</p>
</body>
</html>
    </textarea>
    <iframe id="someFrame">
        <h1>hello</h1>
        <p>wat</p>
    </iframe>
</body>
</html>

JavaScript

var content = $('textarea').val();

function changeText() {
    content = $('textarea').val();
    var d = $("#someFrame")[0].contentWindow.document;
    d.open();
    d.close()
    $("body", d).append($("textarea").val());
}

$('textarea').keyup(function() {
    if ($('textarea').val() != content) {changeText();}
});

$(document).ready(function() {
  changeText();
});