Real Time HTML CSS and JavaScript Editor with Preview

In this tutorial, we are going to learn to create a real-time HTML, CSS, and JavaScript editor with preview in a webpage. We can easily write our code in the text area provided the output of which can be easily rendered in the preview area on the same page.

Full Source Code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">

<style type="text/css">
  body{
    background: darkseagreen;
  }
  .container{
    padding-top: 20px;
  }
  .editor-box textarea,.preview-box{
    border: 1px solid #888;
    height: 80vh;
    overflow-y: auto;
    background: #111;
  }
  .code-editor{
    resize: none;
    color: #fff;
  }
  .code-editor:focus{
    background: #111;
    color: #fff;
  }
  .preview-box{
    background: darkgray;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col-6">
      <h2>
        Code
        <span class="float-end btn-run btn btn-primary" onclick="render();">Run</span>
      </h2>
      <div class="editor-box">
        <textarea onkeyup="render();" class="form-control code-editor" placeholder="<-- Code Here -->"></textarea>
      </div>
    </div>
    <div class="col-6">
      <h2>Preview</h2>
      <div class="preview-box"></div>
    </div>
  </div>
</div>

<script type="text/javascript">
  document.getElementsByClassName('code-editor')[0].focus();

  function render(){
    html = document.getElementsByClassName('code-editor')[0].value;
    document.getElementsByClassName('preview-box')[0].innerHTML = html;
  }
</script>