// PROJECT CASE STUDY

Paperplane CMS.

A fast, markdown-first headless CMS engineered with a terminal-grade editor and end-to-end type safety.

Role

Lead Frontend Engineer

Timeline

3 Months · 2024

Paperplane CMS
// 01. OVERVIEW

system architecture & goal.

Paperplane CMS is a content authoring platform created for technical teams who prefer markdown workflows over clunky WYSIWYG editors. It combines Git-backed storage, live collaborative preview environments, and end-to-end type-safe API generation via tRPC to provide instant content publishing directly into modern frontend frameworks.

Core Architectural Highlights

Vim & terminal keybindings built directly into the live markdown editor.

Zero-config tRPC schema generation for static and dynamic frontend queries.

Branch-based draft previews with instant Vercel-like deployment links.

AST-based syntax validation for MDX components and embedded interactive widgets.

// 02. TECHNICAL HURDLES

challenges & engineering solutions.

01

Real-Time Collaborative AST Synchronization

The Challenge

Concurrent edits in the markdown editor often caused syntax tree desynchronization and cursor jumping when multiple authors edited the same block.

The Solution

Integrated Conflict-free Replicated Data Types (CRDTs) with Yjs over WebSockets to synchronize character deltas instead of full document state.

Key Takeaway:

CRDT-based synchronization provided flawless multi-user collaboration with zero merge conflicts and instant offline recovery.

02

Static Type Generation for Dynamic MDX Frontmatter

The Challenge

User-defined custom schema fields lacked compile-time type safety in client consumer applications.

The Solution

Engineered a background CLI daemon that watches content schemas and generates TypeScript declaration files (.d.ts) automatically on schema changes.

Key Takeaway:

Bridging headless content models with TypeScript strict typing dramatically reduces runtime runtime bugs.

// 03. ROADMAP

future improvements.

Milestone 01

AI-assisted technical copyediting and automated grammar & tone suggestions.

Milestone 02

Direct GitHub pull-request syncing for content changes reviewed by engineering teams.

Milestone 03

Native image optimization CDN with automatic WebP conversion and responsive source sets.

Milestone 04

Custom webhook engine with retry exponential backoff and payload signing.