JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<textarea id="code">
    <html>
        <head>
            <style type="text/css"> body { background: pink; color: purple; }
            </style>
            <script> alert("hi"); </script>
        </head>
        <body>
            Hi there!
        </body>
    </html>
</textarea>
<button id="render">Render</button>
<div id="iframe-container">
    <iframe id="result1"></iframe>
    <iframe id="result2"></iframe>
</div>

CSS

textarea { width: 400px; height: 200px; }
iframe { border: 1px solid #000; width: 100px; height: 100px; }
#iframe-container { border: 1px solid olive; padding: 5px; }

JavaScript

$("#render").click(function() {
    // this doesn't work in FF; No head or body elements are created, so body {} doesn't style anything
    $("#result1").contents().find("html").html($("#code").val());
    // This works - Firefox automatically creates empty <head> & <body>
    // so here we populate head with the basics
    $("#result2").contents().find("head").html($("<title>Preview iframe</title><meta charset='utf-8'>"));
    // and then just inject everything else to the body. Not ideal, but the only things which won't work outside the head are title, meta tags and doctype. If you can inject them or live without them being truly dynamic, then this is fine.
    $("#result2").contents().find("body").html($("#code").val());
});