Aelm Playground
テキスト電子回路 CAD 言語「Aelm DSL」をブラウザでリアルタイムプレビューできる Web エディタ — サーバー不要・完全 WebAssembly
Aelm Playground は、テキストで電子回路図を記述する DSL「Aelm」をブラウザ上でリアルタイムにプレビューできる Web エディタです。PlantUML に着想を得た左右分割 UI で、左ペインにコードを書くと 200ms 以内に右ペインへ回路図が描画されます。
Rust で実装されたレンダラを WebAssembly にコンパイルし、npm パッケージ (@alphaelements/aelm-renderer) として配信。サーバーサイドでの処理は一切なく、すべてブラウザ内の WASM エンジンがパース・レイアウト・レンダリングを担当します。インフラコストはほぼゼロです。
URL 共有（lz-string によるハッシュエンコード）、SVG/PNG ダウンロード、6 種以上のサンプル回路、ダーク/ライト/システムテーマ切替、日英バイリンガル UI などを備えています。
主な特徴
解決した課題
• ブラウザで回路図 DSL を解析・レンダリングするためのパフォーマンス確保
• 1.3 MB の WASM バイナリ初期ロード時のユーザー体験
• CodeMirror 6 へのカスタム Lezer 文法の統合
• URL ハッシュに大きなソースコードを埋め込む際の共有可能性
採用したアプローチ
• Rust コンパイル済み WASM + wasm-opt 最適化で高速レンダリング（layout → SVG を数十 ms で完結）
• WASM 初期化中にローディングオーバーレイを表示し、体感速度を改善
• Lezer 文法を Aelm DSL に合わせて設計し、シンタックスハイライトとエラー診断をリアルタイム表示
• lz-string による可逆圧縮で URL に回路ソースを埋め込み、サーバー保存なしで共有を実現
達成した成果
• サーバーレス構成によりインフラコストをほぼゼロに抑制
• 200ms 以内のリアルタイムプレビューで快適な DSL 開発体験
• URL 共有機能によりインストール不要でコード・回路図を即座に共有可能
• SVG/PNG エクスポートで外部ドキュメントへの埋め込みに対応