index.html

<meta charset=utf-8>
<style>
  body { width: 890px; margin: 20px auto; font-family: arial; }
  h1, h2, h3, h4 { text-align: center; margin: 0; }
  h1 { font: bold 60px monospace; line-height: 60px; }
  sup { font: normal 20px arial; }
  h2 { font: bold 30px; line-height: 60px; }
  h3 { font-size: 22px; text-align: left; display: inline-block; }
  h4 { font-weight: normal; line-height: 40px; }
  pre { font-size: 15px; margin: 10px auto 5px; height: auto; padding: 10px; width: 880px; border: 2px solid #aaa; background: #def; border-radius: 5px; font-family: monospace; overflow: hidden; resize: none; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word }
  pre.short { height: 80px; }
  pre.long { height: 180px; }
  pre.intro { cursor: pointer; width: 700px; text-align: center; margin: 0 auto; }
  .right { float: right }
  h4 a { font-weight: bold }
  iframe { border: none; }
  td.align { width: 120px; }
  td.align span { line-height: 60px; }
  .style { float: left; margin: 25px 10px; }
  .version:checked, .style:checked, .style:checked + table { box-shadow: 0 0 5px red }
  table.style { font-size: 1px; border-collapse: collapse; margin: 10px 0; cursor: pointer; background: #fff; }
  table.style th { border: 1px solid #000; }
  label { font-weight: bold }
  label span { font-weight: normal }
  fieldset { padding: 20px; background: #f8f8f8; border: 5px solid #ccc; border-radius: 15px; }
  .buttons { text-align: center; }
  .buttons a { display: inline-block; width: 130px; color: #000; text-decoration: none; font-size: 25px; padding: 15px 30px; margin: 0 10px; font-weight: bold; line-height: 25px; background: #def; border: 2px solid #abc; border-radius: 10px; }
  .buttons a div { font-size: 12px; line-height: 14px; }
  .buttons a.important { cursor: pointer; background: #159; border: 2px solid #26a; color: #fff; border-radius: 10px; }
</style>
<a href=//github.com/xem/miniCodeEditor><img style="position:absolute;top:0;right:0;border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<h1>MiniCodeEditor</h1>
<h2>An online HTML/CSS/JS playground in 62 & 142 bytes</h2>
<h4>Inspired by <a href="//codepen.io">Codepen</a>, <a href="//jsfiddle.net">JSFiddle</a>, <a href="//jsbin.com">JSbin</a> and <a href="//dabblet.com/">dabblet</a><br>golfed by <a href=//twitter.com/MaximeEuziere>xem</a>, <a href=//twitter.com/p01>p01</a></a>, <a href=//twitter.com/subzey>subzey</a>, <a href=//twitter.com/aemkei>aemkei</a>, <a href="https://twitter.com/LauckAndLoad">rlauck</a>, <a href="https://twitter.com/bburky">bburky</a>, <a href="https://twitter.com/mmastrac">mmastrac</a> and <a href="https://twitter.com/justecorruptio">justecorruptio</a></h4>

<br>
<br>
<br>

<b>Full</b> (142b): Edit HTML, CSS and JS, the result is updated in real time
<pre>&lt;iframe onload='id++&lt;3?outerHTML+=`&lt;textarea oninput="f[${id}]=value;f.srcdoc=f[3]+\`&lt;script>\${f[1]}&lt;/script>&lt;style>\`+f[2]"rows=9>`:id="f"'></pre>
<br>
<iframe src="complete.html#//%20JavaScript%0A%0Awho.innerHTML%20%3D%20%0A%22world%22%3B%7F/*%20CSS%20*/%0A%0Abody%20{%0A%20%20background%3A%20%2326A%3B%0A%20%20color%3A%20%23fff%3B%0A%20%20font%3A%2030px%20arial%3B%0A%20%20line-height%3A%20130px%3B%0A%20%20text-align%3A%20center%3B%0A}%7F%3C!--%20HTML%20--%3E%0A%0AHello%2C%0A%3Cb%20id%3D%22who%22%3E%3C/b%3E%20!1" width=900 height=200></iframe>
<br>
<br>
<b>Mini</b> (62b): Edit the whole page's code at once
<pre>&lt;iframe id=f>&lt;/iframe>&lt;textarea oninput=f.srcdoc=value rows=9></pre>
<br>
<iframe src="minidemo.html" width=900 height=200></iframe>
<br>
<br>
<h3>Test / download:</h3>
<br>
<br>
<div class=buttons>
  <a href=# onclick="window.open('mini.html','','directories=no, menubar=no, status=no, scrollbars=no, fullscreen=no, width=600, height=180')"><div>super mini version <br>(62 bytes)</div></a>
  <a href=# onclick="window.open('full.html','','directories=no, menubar=no, status=no, scrollbars=no, fullscreen=no, width=900, height=180')"><div>Full <br>(142 bytes)</div></a>
  <a href=# onclick="alert('When you\'re done, just copy the URL to share your work!');window.open('1.1','','directories=no, menubar=no, status=no, scrollbars=no, fullscreen=yes')"><div>Bigger editor<br>(1kb)</div></a>
  <a href="http://codegolf.github.io/codegolfIDE/" style="height:30px;line-height:40px;vertical-align:top"><div>codegolfIDE<br>(external project)</div></a>
</div>
<br>
<br>
<br>
<hr>
<br>

<h3>News:</h3>
<br>
<br>
- <b>Other code golfing projects</b> by <a href="http://xem.github.io/?golfing">xem</a>, <a href="http://aem1k.com/">aemkei</a> and <a href="http://www.p01.org/releases/">p01</a>
<br>
<br>
- <b>Live Editor</b>, a fork by err4nt with a great style: <a href=//github.com/tomhodgins/liveeditor>link</a>
<br>
<br>
- <b>miniCodeInception</b>: <a href="http://xem.github.io/miniCodeEditor/prod/#,,PGJvZHkgb25rZXl1cD0nbC5oYXNoPVtqPXQxW3Y9InZhbHVlIl0sYz10Mlt2XSxoPXQzW3ZdXS5tYXAoYnRvYSk7KEQ9ZS5maXJzdENoaWxkLmNvbnRlbnRXaW5kb3cuZG9jdW1lbnQpLndyaXRlKGh8fGN8fGo/aCsiPHNjcmlwdD4iK2orIjxcL3NjcmlwdD48c3R5bGU+IitjOiI8cHJlPlJlc3VsdCIpO0QuY2xvc2UoKSdvbmxvYWQ9J2ZvcihpPTQ7LS1pO2UuaW5uZXJIVE1MKz0iPHRleHRhcmVhIGlkPXQiK2krIiBwbGFjZWhvbGRlcj0iK1ssIkpTIiwiQ1NTIiwiSFRNTCJdW2ldKyI+IithdG9iKFtsLmhhc2guc3BsaXQoLyN8LC8pW2ldXSkpbD1sb2NhdGlvbjtlLm9ua2V5dXAoKSdpZD1lPjxpZnJhbWU+PC9pZnJhbWU+PHN0eWxlPip7Ym94LXNpemluZzpib3JkZXItYm94Oy1tb3otYm94LXNpemluZzpib3JkZXItYm94O21hcmdpbjowO3ZlcnRpY2FsLWFsaWduOnRvcH10ZXh0YXJlYSxpZnJhbWV7aGVpZ2h0OjUwJTtib3JkZXI6MXB4IHNvbGlkfXRleHRhcmVhe3Jlc2l6ZTpub25lO3dpZHRoOjMzLjMlfWlmcmFtZXt3aWR0aDoxMDAlfQ==">link</a>
<br>
<br>
- <b>HTML5 Weekly</b> mentioned this: <a href="http://html5weekly.com/archive/117.html">link</a>
<br>
<br>
- <b>Many blogs and websites talked about this</b> in <a href="http://beben-koben.blogspot.fr/2013/12/get-free-two-html-editor-simplest-and-usefully.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+beben-koben+%28Tutorial+Blog+for+Stylish+Blogger%29">Indonesian</a>, Japanese (<a href="http://www.softantenna.com/wp/webservice/mini-code-editor/?utm_source=rss&utm_medium=rss&utm_campaign=mini-code-editor">1</a>, <a href="http://www.moongift.jp/2013/12/minicodeeditor-175byte%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83/">2</a>), <a href="http://www.1337core.de/minicodeeditor-in-230-bytes-im-browser/">German</a>, <a href="http://habrahabr.ru/company/nordavind/blog/205154/">Russian</a>, <a href="http://www.restonschauds.com/blog/index.html?article=882">French</a>, <a href="http://my.opera.com/alex-shpak/blog/2014/01/22/minicodeeditor-jsfiddle-in-as-few-bytes-as-possible">English</a>,...
<br>
<br>
- <b>Many people <a href="https://twitter.com/search?q=miniCodeEditor&f=realtime">tweeted</a> and commented</b> this on <a href="https://news.ycombinator.com/item?id=6860642">Hacker News</a> and Reddit (<a href="http://www.reddit.com/r/tinycode/comments/1spyai/an_online_htmlcssjs_editor_in_162_bytes_save_load/">1</a> / <a href="http://www.reddit.com/r/javascript/comments/1spkc8/an_online_htmlcssjs_editor_in_162_bytes_save_load/">2</a>)
<br>
<br>
- <b>JS1k 2014 #4 entry</b> is based on MiniCodeEditor: <a href="http://js1k.com/2014-dragons/demo/1797">link</a>
<br>
<br>
- <b>Amazing talk by @aemkei</b> at Front End Ops Conf 2014 presents this project: <a href="https://www.youtube.com/watch?feature=player_detailpage&v=SinHLo5J0dg#t=705">video</a>
<br>
<br>
- We've been #1 on Hacker News in december 2013:<br><img src="HN.png" width=600 style="border:1px solid">
<br>
<br>
<br>
<hr>
<br>
<br>
<center><b>2013-2017 - The Codegolf Team