Skip to content
LOCZH/安大略 · 加拿大待机OK/--:--:--EST
M4M4RK_YUportfolio
  • 项目
    项目Overview
    • 作品精选案例与项目记录
    • 游戏可玩原型与游戏开发日志
  • 影像
    影像Overview
    • 档案影像合集与视觉实验
    • 商店印刷品、海报和限量物件
  • 日志
    日志Overview
    • 博客长篇开发日志与现场笔记
    • 笔记短观察、链接与代码片段
  • 资源
    资源Overview
    • 工具38 款浏览器内开发工具
    • 链接每日使用的开发与设计书签
  • 关于
  • 联系
EN
← 项目档案
Web 应用 · 2024就绪

M4rkdown

离线优先的 Markdown 编辑器,支持实时协作、PWA 安装,以及多人打字竞技模式。

角色
Solo developer: editor UX, offline/PWA layer, realtime sync, and deployment.
技术栈
PreactTypeScriptViteCodeMirrorPartyKitPWA
链接
在线源码
M4rkdown split editor and preview cover

背景

问题

大多数 Markdown 编辑器都默认联网且单人使用。M4rkdown 想探索一个离线优先、并且能邀请他人加入的编辑器会是什么体验。

方法

方案

以 CodeMirror 作为编辑核心,封装在 Preact + Vite 的 PWA 中,使用 PartyKit 实现实时协作,并在同一套同步引擎之上加入了趣味的多人打字模式。

功能

  • Offline-first writing that syncs on reconnect
  • Live collaborative editing
  • Installable PWA
  • Multiplayer typing arena

架构笔记

  • CodeMirror handles the editing model; PartyKit carries collaborative state.
  • Service-worker caching keeps the editor usable with no network.

挑战

结果

A deployed offline-first editor that doubles as a multiplayer writing surface and a typing game.

学到的东西

复盘

  1. 01Offline-first changes every assumption about state and conflict resolution.
  2. 02A small playful mode makes a utility memorable.

下一步

下一步

  1. 01Add document history
  2. 02Expand export formats
  3. 03Polish conflict resolution

相关案例

Web 应用

Nimbus

A secure file management platform shaped around calm organization, OTP access, and storage analytics.

Web 应用

M4rketView

A cryptocurrency screener built for quick scanning, watchlist thinking, and market table clarity.

上一篇AI Agent ToolkitA Windows-first local AI coding toolkit — multi-agent workflows, Ollama automation, and developer dashboard utilities.
返回档案
返回档案
频道开放·随时打个招呼 · 2026
--:--:--EST
联系

看到什么有意思的?和我聊聊。

这是一个作品集,不是服务 · 但每一条留言我都会看 — 如果哪里让你有所触动,或者只想打个招呼,欢迎写信过来。

开启对话

订阅

偶尔收到一封简讯

来自 m4rkyu.com 的笔记与日志——简短、标注日期、没有杂音。随时可退订。

作品

线上发布、游戏作品与视觉档案。

  • 项目
  • 游戏
  • 档案
  • 日志

资源

每日好用的工具与个人收藏的链接库。

  • 搜索
  • 最新
  • 工具
  • 链接
  • 笔记
  • 主题
  • RSS
  • JSON Feed
  • 商店

工作室

背景、联系方式以及合作渠道。

  • 关于
  • 联系
  • 更新日志
  • 技术说明
  • 简历筹备中

社交

在常去的平台上找到我。

  • Facebook敬请期待
  • Instagram敬请期待
  • YouTube敬请期待
  • 领英敬请期待
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
始于 2024
ZhenXiao Mark YuZhenXiao Mark Yu
© 2026 ZhenXiao Mark Yu·加拿大 安大略
  • 邮件
  • GitHub
  • dev.to
  • 领英 (敬请期待)
  • 推特 / X (敬请期待)
  • Instagram (敬请期待)
由 Next.js 16 · React 19 · Tailwind 4 构建

由 Next.js 16 · React 19 · Tailwind 4 构建