← 项目档案
M4rkdown
离线优先的 Markdown 编辑器，支持实时协作、PWA 安装，以及多人打字竞技模式。
这是什么
问题
大多数 Markdown 编辑器都默认联网且单人使用。M4rkdown 想探索一个离线优先、并且能邀请他人加入的编辑器会是什么体验。
方案
以 CodeMirror 作为编辑核心，封装在 Preact + Vite 的 PWA 中，使用 PartyKit 实现实时协作，并在同一套同步引擎之上加入了趣味的多人打字模式。
界面一览
Two modesThe entry screen makes the project's unusual scope explicit: a serious offline writer and a live typing game share one product.
技术栈
Frontend
- Preact 10
- Signals
- TypeScript
- Vite
Editor
- CodeMirror 6
- Vim mode
- KaTeX
- Mermaid
Realtime
- PartyKit
Platform
- Workbox
- PWA
- localStorage
亮点功能
- Editor, split, preview, focus, and typewriter modes
- Vim bindings, formatting toolbar, linting, outline, templates, and image paste
- KaTeX math, Mermaid diagrams, syntax themes, and multiple export formats
- Tabbed local documents with word goals and offline PWA support
- Realtime collaborative writing with reconnect recovery
- Solo daily challenges and multiplayer typing rooms for up to eight players
工程实现
- 过程 01
Separate local documents from realtime rooms
- 背景
- Offline writing and multiplayer sessions have different ownership, persistence, and recovery semantics.
- 方法
- Keep tabbed documents in local storage and use PartyKit only for room-based collaboration and battles.
- 结果
- Offline writing stays dependable, while moving content between local and shared contexts remains an explicit action.
- 过程 02
Use one product shell for work and play
- 背景
- A typing arena could have become a disconnected side project with separate navigation and state.
- 方法
- Present Writer and Battle as first-class modes inside the same Preact application.
- 结果
- The utility becomes memorable and reuses realtime infrastructure, but the product must maintain two very different interaction densities.
实现细节
架构笔记
- CodeMirror 6 owns editing extensions while Preact Signals keep document, preference, and mode state lightweight.
- Workbox caches the application shell so core writing remains available offline.
- PartyKit separates room-based collaboration and typing-arena state from local document persistence.
- Markdown extensions for math, diagrams, callouts, footnotes, and syntax rendering are composed into the preview pipeline.
挑战
- Offline local documents and realtime rooms have different ownership and recovery rules.
- A feature-rich editor must keep keyboard commands discoverable without letting toolbars dominate the writing surface.
- The former m4rkdown.is-a.dev address no longer resolves to the app; the case study now links to the working Vercel deployment.
结果
A deployed v3.1.0 PWA with a genuinely broad editor surface and a memorable second mode: collaborative and competitive realtime typing built on the same application foundation.
规划与心得
复盘
- 01Offline-first changes every assumption about state and conflict resolution.
- 02A small playful mode makes a utility memorable.
下一步
- 01Add durable document version history
- 02Test collaboration recovery under network churn
- 03Retire stale domain references across the repository