この記事は Vim Advent Calendar 2015 の20日目の記事です. まずはこちらのスクリーンショットをご覧ください. エディタの UI やカーソル移動は Vim っぽいですが,markdown ライブプレビューやカーソル位置での画像ポップアップ,組み込みブラウザなど謎の UI が見て取れます.本記事ではこれについてボトムアップで必要な知識から順を追って紹介します. 長い……三行で Neovim msgpack-rpc API を使って <canvas> と Node.js API で Neovim フロントエンドを作成し Web Component としてラップ して HTML アプリに簡単に組み込めるようにした上で UI プラグインをウェブ技術で構築できる NyaoVim という Neovim GUI エディタを Electron 使ってつくってます. 目次 Web C
![Web Components と Electron でつくる Neovim フロントエンドの未来 - はやくプログラムになりたい](https://cdn-ak-scissors.b.st-hatena.com/image/square/09d45c35f2750c0ed1d63c2e161c93b3897be6ee/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F5292b075c5bc416700d4867af77e8a792ad25459%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fraw.githubusercontent.com%252Frhysd%252FNyaoVim%252Fmaster%252Fresources%252Ftitle-bar.png)