SaaS・業務
分割ビュー
中央の仕切りをドラッグして左右ペインの幅を自由に変えられる。Pointer Events で実装しタッチ操作にも対応。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
コード（コピーして使えます）
<div class="sv-wrap" id="sv-wrap">
<div class="sv-pane sv-left" id="sv-left">
<div class="sv-pane-header">ファイルツリー</div>
<ul class="sv-tree">
<li>📁 src</li>
<li class="sv-indent">📄 index.ts</li>
<li class="sv-indent">📄 app.ts</li>
<li>📁 public</li>
<li class="sv-indent">🖼 logo.svg</li>
</ul>
</div>
<div class="sv-divider" id="sv-divider" role="separator" aria-label="リサイズ" tabindex="0">
<div class="sv-handle"></div>
</div>
<div class="sv-pane sv-right" id="sv-right">
<div class="sv-pane-header">エディタ</div>
<pre class="sv-code"><span class="sv-kw">import</span> { app } <span class="sv-kw">from</span> <span class="sv-str">'./app'</span>;
app.listen(<span class="sv-num">3000</span>, () => {
console.log(<span class="sv-str">'起動完了'</span>);
});</pre>
</div>
</div>