Minimalist HTML Editor With Live Preview

Category: Image | January 14, 2021
0 Comment
Demo Download
Author:no-gravity
Views Total:258 views
Official Page:Go to website
Last Update:January 14, 2021
License:MIT

Preview:

Minimalist HTML Editor With Live Preview

Description:

A minimalist HTML/CSS editor with live preview, built with textarea, iframe, and vanilla JavaScript.

How to use it:

1. Create a textarea element for the HTML editor.

<textarea id=data>
<!doctype html>
<html>
 <body>
  ... 
 </body>
</html>
</textarea>

2. Create an iframe element for the preview.

<iframe name="output"></iframe>

3. The core function to enable the HTML editor.

let outty = window.output.document;
outty.open();
let inny=document.getElementById("data");
outty.write(inny.value);
outty.close();

4. Enable the fullscreen mode.

if (newWin) outWin= window.open()
else        outWin= window.open("about:blank","html_editor");
outWin.focus();
let outty = outWin.document;
outty.open();
let inny=document.getElementById("data");
outty.write(inny.value);
outty.close();

See Also:

You Might Be Interested In:

Leave a Reply