Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
88 lines (79 sloc) 2.417 kb
<!doctype html>
<title>CodeMirror: HTML5 preview</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link rel=stylesheet href=../lib/codemirror.css>
<script src=../lib/codemirror.js></script>
<script src=../mode/xml/xml.js></script>
<script src=../mode/javascript/javascript.js></script>
<script src=../mode/css/css.js></script>
<script src=../mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {
float: left;
width: 50%;
border: 1px solid black;
iframe {
width: 49%;
float: left;
height: 300px;
border: 1px solid black;
border-left: 0px;
<div id=nav>
<a href=""><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="">Code</a>
<li><a class=active href="#">HTML5 preview</a>
<h2>HTML5 preview</h2>
<textarea id=code name=code>
<!doctype html>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
<style>p {font-family: monospace;}</style>
<p>Canvas pane goes here:</p>
<canvas id=pane width=300 height=200></canvas>
var canvas = document.getElementById('pane');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(250,0,0)';
context.fillRect(10, 10, 55, 50);
context.fillStyle = 'rgba(0, 0, 250, 0.5)';
context.fillRect(30, 30, 55, 50);
<iframe id=preview></iframe>
var delay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html'
editor.on("change", function() {
delay = setTimeout(updatePreview, 300);
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;;
setTimeout(updatePreview, 300);
Jump to Line
Something went wrong with that request. Please try again.