EditrはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

jsdo.itやJSFiddleといったWebベースのプレイグラウンドを自分でも作ってみたい、設置したいと考えている方はEditrをお勧めします!HTML/JavaScript/CSSを組み合わせてWebブラウザ上で実行が可能です。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.27_thumb.1380451730.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.27.1380451730.png)
右側がEditrの編集、実行領域になります。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.31_thumb.1380451734.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.31.1380451734.png)
まずは実行結果。複数のHTMLファイルが切り替えできます。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.36_thumb.1380451737.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.36.1380451737.png)
HTMLソースコード。編集はもちろんハイライト表示にも対応です。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.40_thumb.1380451741.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.40.1380451741.png)
スタイルシート。インポートを使えば外部のファイルも読み込めますね。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.55_thumb.1380451744.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.11.55.1380451744.png)
JavaScript。評価はリアルタイムにされます。

Editrの主な特徴はGistからのダウンロード対応、水平/垂直表示、リッチなコードエディタ、テーマサポート、プリローダー、リードオンリーモード、Base64対応、外部埋め込み、エラー判定などが可能です。

もちろん既にあるプレイグラウンドサービスを使っても良いのですが、やはり自前で構えたいと思うケースもあるでしょう。また、社内に設置する場合は特にそうでしょう。グループ内でナレッジを蓄積する上でも便利です。

特定のJavaScriptフレームワークを使ったテクニック紹介や、スタイルシートだけで実現するテクニックを掲載するなど特定ジャンルにこだわった使い方にも向いているのではないでしょうか。

Editr.js by @Idered

Idered/Editr.js