Back to projects
Project
Lite Markdown Editor
Next.jsとTypeScriptで構築した軽量Markdownエディタです。CodeMirrorによる編集体験、markdown-itによるプレビュー、KaTeXやMermaidの描画に対応しています。
- Status
- Released
- Period
- 2025
- Built
- UI設計 / エディタ実装 / プレビュー描画 / パフォーマンス調整 / デプロイ
Overview
Markdownの編集とプレビューを同時に行える、2ペイン構成の軽量エディタです。数式、図表、HTMLサニタイズなど、実用的なMarkdown編集に必要な機能を取り入れています。
Background
Markdown編集、リアルタイムプレビュー、スクロール同期、数式・図表描画を一つの画面で扱うため、入力体験と描画パフォーマンスの両方を意識して制作しました。
Tech Stack
- Next.js
- TypeScript
- Tailwind CSS
- CodeMirror
- markdown-it
- DOMPurify
- KaTeX
- Mermaid
Scope
- UI設計
- エディタ実装
- プレビュー描画
- パフォーマンス調整
- デプロイ
Approach
- CodeMirrorを用いて、編集しやすい入力エリアを実装
- markdown-itでMarkdownをHTMLに変換し、DOMPurifyで安全性を考慮
- KaTeXやMermaidを遅延読み込みし、初期表示の負荷を抑える構成にした
- エディタとプレビューの双方向スクロール同期を調整
Challenges
- 即時プレビューの更新頻度と描画負荷のバランス調整が難しかった
- KaTeXやMermaidのような重い描画処理を、操作感を損なわずに扱う必要があった
- 2ペイン構成で、編集位置とプレビュー位置を自然に対応させる調整に取り組んだ
Next Steps
- ファイル保存・読み込み機能の追加
- キーボードショートカットやコマンドパレットの拡充
- 大きなMarkdownファイルでの描画パフォーマンス改善