ローカルワークスペースのMarkdownファイルをブラウザで閲覧・編集できる軽量Webアプリを作った

• URL: https://zenn.dev/karaage0703/articles/78056e4d3e07a2
• 日付: 2026-06-26
• Tier: Tier 3
• 要旨: ローカルのMarkdownファイルをブラウザから閲覧・編集できる軽量WebアプリworkspaceーwebーeditorをOSSとして公開した紹介記事だ。ObsidianのWikiーlink・Backlinks・Quick Switcherに相当する機能をブラウザから使えるように実装しており、Tailscale越しにスマートフォンからも編集できる点が特徴となっている。DGX Spark上でxangiなどのAIアシスタントが生成したMarkdownファイルをリアルタイムで確認・修正したいという動機から作られ、AIアシスタント向けのSKILL.mdも同梱されている。技術スタックはNode.js+Express+marked+highlight.js+Mermaid。

詳細

主な機能

• ディレクトリツリー、パンくずナビ、タグフィルター（フロントマターのtags:/category:で絞り込み）
• Markdownプレビュー（Mermaid図・シンタックスハイライト対応）
• Wiki-link [[name]] のクリック遷移、未解決リンクは点線表示
• Backlinks: 起動時にワークスペース全体をスキャンしてインメモリインデックス化、通常Markdownリンクも対象
• Quick Switcher: Cmd/Ctrl+Pでファジー検索（VSCode/Obsidian風）
• ライト/ダークテーマ切替（永続化、prefers-color-scheme追従）。Mermaidもテーマ連動
• ブラウザ内編集 + Ctrl+S保存
• ワンクリックGit sync（git pull && git add -A && git commit && git push）
• モバイル対応（ペイン切替）

技術スタック

• Node.js 18+ / Express / marked v12 / highlight.js / Mermaid 11（ESM経由）

起動

• WORKSPACE_DIR=/path/to/your/workspace PORT=9080 node src/server.js
• Tailscale越しスマホアクセス: echo "http://$(tailscale ip -4):9080"

Agent Skillとして使用

• リポジトリにSKILL.mdが同梱されており、スキルディレクトリに配置するだけで利用可能
• 筆者はAIアシスタント起動時に自動起動する設定で使用

Git syncの注意点

• git add -Aで全変更を対象にするため、不要な変更は.gitignoreで事前除外が必要