Real Time Editor.html

<html>
	<head>
		<title>Real Time Editor</title>
		<script>
			function refresh(){
				var textContent = document.getElementById('editor-textarea').value;
				document.getElementById('viewer').srcdoc = textContent;
			}
		</script>
		
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.main {
				background: #bdc3c7;
				width: 100%;
				height: 100%;
				display: inline-flex;
			}
			#editor-textarea {
				height: 95%;
				width: 100%;
				margin: 10px;
				padding: 5px;
			}
			#viewer {
				background: #fff;
				border: none;
				width: 100%;
				height: 95%;
				margin: 10px;
				border: 1px solid #3498db;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<textarea id="editor-textarea" onkeyup="refresh()"></textarea>
			<iframe id="viewer"></iframe>
		</div>
	</body>
</html>