Fork me on GitHub

MiniCodeEditor

An online HTML/CSS/JS playground in 64+ bytes

Inspired by Codepen, JSFiddle and dabblet
golfed by xem, p01, subzey, aemkei, rlauck and bburky





Edit HTML, CSS and JS, the result is updated in real time





Source code (156b)

- open
<body oninput='f.srcdoc=t0[v="value"]+`<script>${t2[v]}</script><style>`+t1[v]'onload='for(i=3;i--;)f.outerHTML+=`<textarea id=t${i} rows=9>`'><iframe id=f>


Tweetable version (131 chars)

- More info - open
document.write(unescape(escape`🁢𫱤𮐠𫱮𪑮𬁵𭀽𙱦𛡳𬡣𩁯𨰽𭀰𦱶🐢𭡡𫁵𩐢𧐫𨀼𬱣𬡩𬁴🠤𮱴𜡛𭡝𯐼𛱳𨱲𪑰𭀾🁳𭁹𫁥🡠𚱴𜑛𭡝𙱯𫡬𫱡𩀽𙱦𫱲𚁩🐳𞱩𛐭𞰩𩠮𫱵𭁥𬡈𥁍𣀫👠🁴𩑸𭁡𬡥𨐠𪑤👴𙁻𪑽𘁲𫱷𬰽𞐾𨀧🠼𪑦𬡡𫑥𘁩𩀽𩠾`.replace(/u../g,'')))


Super mini version (64b)

- open
<textarea oninput=f.srcdoc=value rows=9></textarea><iframe id=f>


Launch:



super mini version
(64 bytes)
miniCodeEditor
(156 bytes)
complete editor
(1kb)
codegolfIDE




Making-of: (enable subtitles!)







News:



- Other code golfing projects by xem, aemkei and p01

- Live Editor, a fork by err4nt with a great style: link

- miniCodeInception: link

- HTML5 Weekly mentioned this: link

- Many blogs and websites talked about this in Indonesian, Japanese (1, 2), German, Russian, French, English,...

- Many people tweeted and commented this on Hacker News and Reddit (1 / 2)

- JS1k 2014 #4 entry is based on MiniCodeEditor: link

- Amazing talk by @aemkei at Front End Ops Conf 2014 presents this project: video






2013-2016 - The Codegolf Team