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>
