The logic behind this code editor is simple. we have created a div with id=" editor" and having contenteditable attribute set true. By setting a contenteditable true in a div we can edit the content in the div similar to what we can do in textarea. Inside this div we place our HTML code. To display the output we have used a iframe. we have passed the textContent of editable div as the srcdoc of the iframe, by doing this when we type any HTML statements in the editor the output is seen in the iframe immediately.
To make the editor more interesting three buttons are added to Execute, Save as HTML, and Copy the HTML respectively.
you can download this project for free by clicking the download button below.
See the live demo in the frame above.