News for hackers. Stuff that matters.

Content Pulse: Real-time inline track changes in vanilla JavaScript

I built a lightweight track changes engine for contenteditable editors in vanilla JS. No dependencies, ~400 lines of code.

  It uses the Myers diff algorithm (same as git diff) to compute the minimal edit script between the original and current text, then renders additions as <ins> and deletions as <del> inline - all inside the same editor.

  Features:
  - Word level and letter level (character) diffing
  - Undo/redo with cursor position memory
  - Clean preview toggle (strips deletions, shows final output)
  - Punctuation-aware tokenizer (editing around periods/commas won't false-flag)
  - Text-level operations for Enter/Backspace to keep the DOM predictable

  I'm planning to ship this as a plugin for TinyMCE, Froala, Quill, and CKEditor — most of which  offer track changes in premium tiers.

  Would love feedback on the diff engine and the approach to cursor management in contenteditable (which was the hardest part by far).
( 2 comments | 2 points | on HN )
Re:Content Pulse: Real-time inline track changes in vanilla ... by umasood on Sunday March 08, 2026 @06:56AM (#47296313)
Love seeing complex features built with pure JavaScript.
Re:Content Pulse: Real-time inline track changes in vanilla ... by vikasbatra11 on Sunday March 08, 2026 @07:04AM (#47296361)
Thanks, will be extending it further.