<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-Editor</title>

    <!-- For google icons  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
    
</head>

<body>

    <!-- lets make a simple HTML code editor -->

    <div class="container">
        <div class="editor-wrapper">
            <div class="menu">
                <span class="material-icons-outlined" id="run" title="Execute">
                    play_arrow
                </span>
                <span class="material-icons-outlined" id="save" title="Save as HTML">
                    save
                </span>
                <span class="material-icons-outlined" id="copy" title="Copy HTML">
                    copy
                </span>
            </div>
            <div id="editor" contenteditable="true">
                <!-- make this div editable -->
                Write Your HTML Code Here
            </div>
        </div>
        <iframe class="result"></iframe>
    </div>

   
</body>

</html>

        *{
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            box-sizing: border-box;
        }
        .container{
            display: flex;
            padding: 10px;
            height: 100vh;
            width: calc(100vw - 30px);
            background-color: black;
        }
        .editor-wrapper{
            width: 50%;
            background-color: #312f2f;
            display: flex;
            flex-direction: column;
            height: 90vh;
            border-bottom-left-radius: 15px;
            border-top-left-radius: 15px;
        }
        #editor{
            width: 100%;
            height: 100%;
            color: wheat;
            padding: 10px;
            outline: none;
            overflow-y: auto;
            overflow-x: visible;
            white-space: pre;

        }
        .menu{
            margin: 0 auto;
            padding: 5px 10px;
            display: flex;
            height: 45px;
            background-color: white;
            width: 100%;
            border-top-left-radius: 15px;

        }
        .material-icons-outlined{
            font-size: 35px;
            cursor: pointer;
            margin: auto 5px;
        }
        .material-icons-outlined:hover{
            font-size: 40px;
            color: gray;
        }
        .result{
            background-color: white;
            width: 50%;
            height: 90vh;
            padding: 25px;
            border-bottom-right-radius: 15px;
            border-top-right-radius: 15px;
            overflow-y: hidden;
        }
    

        const editor = document.querySelector('#editor')
        const result = document.querySelector('.result')
        const run = document.querySelector('#run')
        const save = document.querySelector('#save')
        const copy = document.querySelector('#copy')

        editor.addEventListener('keyup',()=>{
            var html = editor.textContent;
            result.srcdoc = html
        })
        // handle run button
        run.addEventListener('click',()=>{
            var html = editor.textContent;
            result.srcdoc = html
        })

        // handle paste event
        editor.addEventListener('paste',(e)=>{
            e.preventDefault();
            var text = e.clipboardData.getData("text/plain");
            document.execCommand("insertText",false,text);
        })

        // handle save event
        save.addEventListener('click',()=>{
            var html = editor.innerHTML
            var link = document.createElement('a');
            link.setAttribute('download','index.html')
            link.setAttribute('href','data:text/html;charset=utf-8,'+ encodeURIComponent(html))
            link.click()
        })

        // handle copy event
        copy.addEventListener('click',()=>{
            copy_data(editor)
        })
          // refrence: https://stackoverflow.com/questions/36639681/how-to-copy-text-from-a-div-to-clipboard
          function copy_data(containerid) {
            var range = document.createRange();
            range.selectNode(containerid);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand("copy");
            window.getSelection().removeAllRanges();
            alert("Code copied");
        }

        // THats it our code editor is ready

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.