Rich text editor and collaborative checklists — TipTap in React Native

A memo isn't just plain text. It's headings, bold, lists, checklists. And in a collaborative context, a checklist is a coordination tool.

TipTap in React Native

TipTap is fantastic on the web. On React Native, it's a different story. No DOM. The solution: a WebView that embeds the editor with a bidirectional bridge. The content is serialized to JSON, sent via the bridge, and stored as HTML.

The editor supports: headings, bold/italic, lists, code blocks, and interactive checklists. The hardest part: managing the mobile keyboard and automatic cursor scrolling.

Checklists: single vs everyone

Single: only one member needs to check to validate. "Buy coffee" — the first one to do it, it's done.

Everyone: each member must check individually. "Read the meeting minutes" — we want to ensure everyone has read it.

In the database, a validation table stores the status per user and per item.

Real-time Synchronization

I use Supabase Realtime for changes. Merging happens at the individual item level, not the entire document — which reduces conflicts. It's not CRDT but it's sufficient for normal collaborative use.