Inspired by frustration with modern software quality and the sentiment "They don't make 'em like Sublime Text anymore," the author embarked on building a custom text editor. The journey explores three rendering approaches: <canvas>, contenteditable, and <textarea>.
The initial <canvas> experiment achieved 60–120 FPS rendering but lacked native interactivity. Implementing basic features like cursor positioning, typing, and line highlighting revealed missing essentials: text selection, undo/redo, and overflow scrolling. A hybrid solution using a hidden <div> for native scroll calculations improved scrolling, but <canvas> remained fundamentally inaccessible.
Switching to contenteditable="plaintext-only" provided native selection, undo history, and accessibility for free. The Selection API enabled custom cursor rendering, though performance degraded unpredictably with larger files, especially in Chromium.
Finally, a <textarea> approach proved far more performant for longer text. Syntax highlighting was added via a third layer using Micro Lighter, though the new Opaque Range API may enable native highlights. The author notes that Tree-sitter and virtualized scrolling could improve robustness but acknowledges the current demo represents "90% of a text editor with 1% of the features."
Source: Hacker News · Summarized by HeadlinesBriefing