Skip to content
LOCEN/Ontario · CAStandbyOK/--:--:--EST
M4M4RK_YUportfolio
  • Projects
    ProjectsOverview
    • WorkSelected case studies and write-ups
    • GamesPlayable prototypes and game-dev logs
  • Gallery
    GalleryOverview
    • ArchivePhoto collections and visual experiments
    • ShopPrints, posters, and one-off objects
  • Logs
    LogsOverview
    • BlogLong-form devlogs and field notes
    • NotesShort observations, links, snippets
  • Resources
    ResourcesOverview
    • Tools38 in-browser developer utilities
    • LinksDaily-use dev and design bookmarks
  • About
  • Contact
中文
← projects
Web app · 2024Ready

M4rkdown

An offline-first markdown editor with realtime collaboration, PWA install, and a multiplayer typing arena.

Role
Solo developer: editor UX, offline/PWA layer, realtime sync, and deployment.
Stack
PreactTypeScriptViteCodeMirrorPartyKitPWA
Links
LiveSource
M4rkdown split editor and preview cover

Context

Problem

Most markdown editors assume a connection and a single writer. M4rkdown asks what an editor feels like when it works offline first and invites other people in.

Approach

Solution

A CodeMirror editing surface wrapped in a Preact + Vite PWA, with PartyKit powering realtime collaboration and a playful multiplayer typing mode layered on the same sync engine.

Features

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

Architecture notes

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

Challenges

Outcome

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

What I learned

Lessons learned

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

Next steps

Next steps

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

Related work

Web app

Nimbus

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

Web app

M4rketView

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

PreviousAI Agent ToolkitA Windows-first local AI coding toolkit — multi-agent workflows, Ollama automation, and developer dashboard utilities.
Back to archive
Back to archive
open channel·say hi anytime · 2026
--:--:--EST
get in touch

Saw something here?Tell me about it.

It's a portfolio, not a service · but I read every note — drop a line if anything here resonated, or just to say hi.

Start a conversation

Newsletter

Get the occasional dispatch

Notes and logs from m4rkyu.com — short, dated, no noise. Unsubscribe anytime.

Work

Production builds, games, and visual archives.

  • Projects
  • Games
  • Archive
  • Logs

Resources

Daily-use tools and a personal link library.

  • Search
  • Latest
  • Tools
  • Links
  • Notes
  • Topics
  • RSS
  • JSON feed
  • Shop

Studio

Background, contact, and channels for collaboration.

  • About
  • Contact
  • Changelog
  • Colophon
  • Resumepending

Socials

Find me on the usual feeds.

  • Facebooksoon
  • Instagramsoon
  • YouTubesoon
  • LinkedInsoon
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
Crafted since 2024
ZhenXiao Mark YuZhenXiao Mark Yu
© 2026 ZhenXiao Mark Yu·Ontario, Canada
  • Email
  • GitHub
  • dev.to
  • LinkedIn (soon)
  • Twitter / X (soon)
  • Instagram (soon)
Built with Next.js 16 · React 19 · Tailwind 4

Built with Next.js 16 · React 19 · Tailwind 4