Real-time collaborative code editing in mobile app

Real-time Collaborative Code Editing in Mobile Applications

Collaborative code editor on mobile — niche but sought product: mobile IDEs, coding interview apps, educational platforms. Task heavier than document editor: needs syntax highlighting supporting dozens of languages, bracket matching, autocomplete, and all this — in collaborative mode with correct cursor sync.

Code Mirror vs Monaco on Mobile

Both editors — for web. In mobile context they work via WebView.

Monaco Editor (VS Code's editor): heavy, ~3MB JS bundle. In React Native via react-native-webview + custom HTML. Full IntelliSense with language server, but Language Server Protocol (LSP) on mobile — separate story. Built-in collaborative mode: no, needs Y.js integration via y-monaco.

CodeMirror 6: modular, ~200KB for basic config. More suitable for mobile by weight. Built-in collaborative mode via @codemirror/collab — OT-based, requires server for operation transform. Alternative: y-codemirror.next — Y.js binding.

For React Native: WebView with CodeMirror 6 + Y.js — viable approach. Bridge window.ReactNativeWebView.postMessage() / webViewRef.injectJavaScript() for communication between native and editor.

For native approach without WebView: react-native-code-editor — limited functionality, highlighting only, no code intelligence.

Y.js + CodeMirror: How It Works

y-codemirror.next — package binding CodeMirror Text to Y.Text. Each editor change (insert, delete) translates to Y.js operation. Remote Y.js operations apply to CodeMirror via its transaction API.

import { yCollab } from 'y-codemirror.next';

const ytext = ydoc.getText('code');
const undoManager = new Y.UndoManager(ytext);

const extensions = [
  yCollab(ytext, provider.awareness, { undoManager })
];

Awareness from Y.js provider automatically translates other users' cursors and selections into CodeMirror decorations. Each remote cursor — WidgetDecoration with user name.

Undo/Redo: standard undoManager in CodeMirror works locally — undo reverts others' changes. Y.UndoManager — collaborative undo, reverts only own changes. Must use Y.UndoManager.

Syntax Highlighting Without LSP

Tree-sitter — incremental parser with AST updates. Works in JavaScript via WebAssembly (web-tree-sitter). CodeMirror 6 uses Lezer (Tree-sitter analog, pure JS) for built-in highlighting.

In WebView on mobile: WASM works in most modern WebViews. iOS WKWebView supports WASM from iOS 14. Android WebView: WASM available from Chrome 57 (WebView API level 57). For older devices — fallback to regex-based highlighting.

Performance: Tree-sitter / Lezer parses incrementally — one character change reparses only changed region. For large files (1000+ lines) critical.

Cursor Position Sync: Position in Code

Cursor position in code — {line, ch} or absolute offset. Absolute offset preferable for CRDT (doesn't depend on line breaks).

Y.js Awareness holds anchor and head — selection range (when no selection — anchor === head). CodeMirror 6 represents position as EditorSelection, y-codemirror translates automatically.

On concurrent operation merge (insert before other user's cursor position) — Y.js corrects positions via relativePosition. Absolute offset becomes invalid after remote insert. Y.createRelativePositionFromTypeIndex / Y.createAbsolutePositionFromRelativePosition — API for conversion.

Code Execution: Optional Feature

For coding interview or educational apps need code run. On mobile: sandbox via API (Judge0, Piston) — safer than local execution. WebAssembly runtime (Wasmer, WasmEdge) for certain languages — works in native environment.

Execution result sync via Y.js (in document) or separate WebSocket channel (only for current session, don't persist).

Assessment

Collaborative code editor in WebView (CodeMirror + Y.js) for React Native — 8–12 weeks. Native editor with full syntax highlighting, bracket matching and LSP integration — 20–36 weeks. Important to clarify: need code execution, which languages, need autocomplete.