JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>

<label class="control-label">HTML:</label>
<textarea class="code" id="editor-html">
abc
<div class="bg">I have background.</div>
def
</textarea>

<label class="control-label">CSS</label>
<textarea class="code" id="editor-css">
.bg {
  background: lightblue;
}
</textarea>

<iframe id="preview"></iframe>

CSS

.CodeMirror {
  width: 100%;
  border: 1px solid black;
}

#preview {
  margin-top: 20px;
  margin-bottom: 100px;
  width: 100%;
  min-height: 100px;
  background-color: #F0F0F0;
  border: none;
  border-radius: 4px;
}

JavaScript

let timeoutDelay = 300;
let onChangeDelay;

// Initialize CodeMirror editor with a nice html5 canvas demo.
let editorHTML = CodeMirror.fromTextArea(document.querySelector('#editor-html'), {
  lineNumbers: true,
  styleActiveLine: true,
  matchBrackets: true,
  mode: 'text/html',
});
// Initialize CodeMirror editor with a nice html5 canvas demo.
let editorCSS = CodeMirror.fromTextArea(document.querySelector('#editor-css'), {
  lineNumbers: true,
  styleActiveLine: true,
  matchBrackets: true,
  mode: 'text/css',
});

let updatePreview = function() {
  let preview = document.querySelector('#preview');
  let previewDocument = preview.contentDocument || preview.contentWindow.document;
  previewDocument.open();
  previewDocument.write(editorHTML.getValue());
  previewDocument.close();
  previewDocument.querySelector('head').innerHTML = '<style>' + editorCSS.getValue() + '</style>';
}

let editorOnChange = function() {
	clearTimeout(timeoutDelay);
	onChangeDelay = setTimeout(updatePreview, timeoutDelay);
};

editorHTML.on('change', editorOnChange);
editorCSS.on('change', editorOnChange);

// Initialize iframe result
setTimeout(updatePreview, timeoutDelay);