JSFiddleやCodePenといった、HTML/JavaScript/CSSのプレイグラウンドサービスが多数あります。クローンサービスもありますし、自分で立てることもできます。しかしあえてサーバサイドの仕組みなどを用意したくはないでしょう。 そこで使ってみたいのがTinyEditorです。たった400byte程度のHTMLプレイグラウンドです。

TinyEditorの使い方

JavaScriptコードを実行するとこんな表示になります。

しかし筆者環境では上記のコードままでは動かなかったので itty.bitty で変換されたものを使っています。

TinyEditorの仕組みは簡単で、HTML/JavaScript/CSSに書かれたコードを文字入力のたびにiframe内に反映しています。ローカルでさくっとJavaScriptの実装を確認したりするのに便利そうです。

TinyEditorはHTML/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

umpox/TinyEditor: A functional HTML/CSS/JS editor in less than 400 bytes