How do I preview HTML in real time on my HTML page-CodePudding

I'm trying to build a tool that allows you to create a HTML-page using Blockly-Blocks (

PS: Your HTML is malformed.

const ifr = document.preview;
const html = `<!doctype html>
    <head>
      <meta charset="UTF-8" />
      <title>Preview</title>
    </head>
    <body>
    <div style="font-family:Ariel, sans-serif; background-color: #ffcc00; color: #003300">
      <ol>
        <li>Line 1</li>
        <li>Line 2</li>
      </ol>
    </div>  
    </body>
    </html>`;
ifr.document.write(html);
ifr.document.close();

#preview {
  width: 500px;
  height: 500px;
  float: right;
}

<iframe name="preview" id="preview"></iframe>

CodePudding user response：

You can save the code in a file ex: "index.html"

Copy the code from the right side bottom from

<DOCTYPE HTML> to the end </html>

And open the file with your browser simple as that :)