HeadlinesBriefing favicon HeadlinesBriefing.com

Building a Custom Text Editor from Scratch

Hacker News •
×

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."