Real-time Editor

IDE-like editor for webdesign.

by Soya Natsuki

HTML

<html>
  <head>
    <title>Real-time Editor</title>
  </head>

  <body>
    <div class="main">
      <textarea name="editor" id="editor-textarea" onkeyup="refreshPage();" placeholder="Code here." rows="25">&lt;style&gt; button { display: block; margin: 30px auto; border-width: 0; outline: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); background-color: #2ecc71; color: #ecf0f1; } &lt;/style&gt; &lt;button onClick=&quot;alert('Hello World!')&quot;&gt;Click&lt;/button&gt;
</textarea>
      <iframe id="viewer"></iframe>
    </div>
  </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
}

.main {
  background: #ecf0f1;
  width: 100%;
  height: 100%;
  display: inline-flex;
}

#editor-textarea {
  width: 100%;
  height: 100%;
  margin: 10px;
  padding: 5px;
}

#viewer {
  background: white;
  border: none;
  width: 100%;
  height: 387px;
  margin: 10px;
  border: 1px solid #3498db;
}

JavaScript

let refreshPage = () => {
  let textContent = document.getElementById('editor-textarea').value;
  document.getElementById('viewer').srcdoc = textContent;
}

$('document').ready(() => {
  refreshPage();
});