diff

<tosi-diff> renders a unified, line-by-line diff between two strings — the kind of view you'd see in a code review, with removed lines marked - and added lines marked +.

Set its original and modified properties (or attributes) to the two versions of the text; it recomputes and re-renders. (They're named original/modified rather than before/after to avoid the native Element.before()/after() methods.)

const { tosiDiff } = tosijsui

preview.append(
  tosiDiff({
    original: 'one\ntwo\nthree\nfour',
    modified: 'one\nTWO\nthree\nfour\nfive',
    style: { width: '100%', height: '100%' },
  })
)

The diff is computed with a longest-common-subsequence pass over the lines, so unchanged lines are shown as context and only genuine insertions/deletions are highlighted. The pure diffLines(before, after) function is exported too, if you just want the data.