Just input this line to the broswer URL bar or open the index.html
data:text/html,<style>body{display:flex;margin:0} .wrapper{width:50%;height:100vh} .container1,.container2,.container3{height:200px} .container1::before{content:'html'} .container2::before{content:'js'} .container3::before{content:'css'} .container2,.container3{margin:1.5rem 0;} .preview{width:50%; height:680px}</style><body><div class="wrapper"> <div class="container1"></div><div class="container2"></div><div class="container3"></div> </div><iframe class="preview"></iframe><script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"></script><script type="text/javascript">var iframe = document.querySelector('.preview');require.config({paths:{'vs':'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs'}});require(['vs/editor/editor.main'],function(){var editor1=monaco.editor.create(document.querySelector('.container1'),{language:'html',theme:'vs-dark'});var editor2=monaco.editor.create(document.querySelector('.container2'),{language:'javascript',theme:'vs-dark'});var editor3 = monaco.editor.create(document.querySelector('.container3'),{language:'css',theme:'vs-dark'});var onchange=()=>{var html=editor1.getValue();var js=editor2.getValue();var css=editor3.getValue();iframe.src='data:text/html;charset=utf-8,'+encodeURIComponent("<html><style>"+css+"<\/style>"+ html+"<script>"+js+"<\/script><\/html>");};editor1.onDidChangeModelContent=onchange;editor2.onDidChangeModelContent=onchange; editor3.onDidChangeModelContent=onchange;window.addEventListener('resize',()=>{editor1.layout();editor2.layout();editor3.layout();});});</script></body>
