Real-time HTML Code Editor With jQuery And CodeMirror

A free, easy-to-use, real-time, online HTML/CSS/JavaScript code editor(playground & sandbox) with instant live preview.

Built on top of jQuery library and CodeMirror text editor.

More Features:

• Autocompletion hints.
• Line numbers.
• Custom key map.
• Custom tab size.
• Code validation.
• Responsive and mobile-friendly.
• And more via CodeMirror addons & configs.

How to use it:

1. Load the necessary JavaScript and CSS files in the document.

<!-- Code Mirror Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/codemirror.min.css">
<link rel="stylesheet" href="/path/to/cdn/theme/material-ocean.css"></link>
<link rel="stylesheet" href="/path/to/cdn/addon/hint/show-hint.css">

<!-- HTML Editor Stylesheet -->
<link rel="stylesheet" href="css/main.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- Code Mirror JavaScript -->
<script src="/path/to/cdn/codemirror.min.js"></script>
<script src="/path/to/cdn/mode/xml/xml.js"></script>
<script src="/path/to/cdn/mode/javascript/javascript.js"></script>
<script src="/path/to/cdn/mode/css/css.js"></script>
<script src="/path/to/cdn/mode/htmlmixed/htmlmixed.js"></script>
<script src="/path/to/cdn/addon/edit/matchbrackets.js"></script>
<script src="/path/to/cdn/addon/hint/show-hint.js"></script>
<script src="/path/to/cdn/addon/hint/javascript-hint.js"></script>
<script src="/path/to/cdn/addon/hint/html-hint.js"></script>
<script src="/path/to/cdn/addon/hint/xml-hint.js"></script>
<script src="/path/to/cdn/addon/hint/css-hint.js"></script>
<script src="/path/to/cdn/keymap/sublime.js"></script>

<!-- HTML Editor JavaScript -->
<script src="js/main.js"></script>

2. Create a textarea element for the code editor.

<div id="main">
  <textarea id="editor">
  ...
  </textarea>
</div>

3. Create an iframe output for the live preview. That's it.

<div id="main">
  <textarea id="editor">
  ...
  </textarea>
  <div id="output">
    <iframe id="result"></iframe>
  </div>
</div>

---

This awesome jQuery plugin is developed by SanjayDevTech. For more Advanced Usages, please check the demo page or visit the official website.