@chandq/html-diff

Browser HTML diff renderer for rich-text previews, CMS review pages, and editor integrations.

It accepts two HTML strings and returns a visual diff as a mounted view, DocumentFragment, or serialized HTML. The renderer is style-safe by default and handles text, inline markup, images, and preformatted code blocks.

Install

npm install @chandq/html-diff

Usage

import { renderHtmlDiff } from '@chandq/html-diff';

renderHtmlDiff({
  container: document.getElementById('diff-root')!,
  oldHtml: '<p>Hello <strong>world</strong></p>',
  newHtml: '<p>Hello brave <strong>world</strong></p>',
  mode: 'shadow'
});

API

renderHtmlDiff(options)

Mounts the diff into a container and returns the rendered root, fragment, stats, and destroy().

renderHtmlDiff({
  container,
  oldHtml,
  newHtml,
  mode: 'shadow',
  ignoreWhitespace: true,
  theme: {
    added: { backgroundColor: '#e6ffed', color: '#1a7f37' },
    removed: { backgroundColor: '#ffeef0', color: '#cf222e' },
    pagePadding: '16px'
  }
});

Option	Type	Default
container	HTMLElement	required
oldHtml	string	required
newHtml	string	required
mode	'shadow' | 'scoped' | 'none'	'shadow'
ignoreWhitespace	boolean	true
theme	DiffTheme	GitHub-style add/remove colors, page padding

Other Exports

Function	Returns
diffHtml(oldHtml, newHtml, options?)	{ fragment, stats }
createHtmlDiffFragment(oldHtml, newHtml, options?)	DocumentFragment
createHtmlDiffHtml(oldHtml, newHtml, options?)	serialized diff HTML
parseHtmlToVNode(html, options?)	internal VNode tree

Rendering Notes

• shadow is the safest mode for embedding in existing pages.
• scoped injects prefixed styles into the container when ShadowRoot is unavailable or unwanted.
• none renders markup only; use it when you provide styles yourself.
• Existing text styles are preserved where possible. Diff styles are additive and scoped.

Development

npm install
npm run dev
npm run test:unit
npm run typecheck
npm run build