Web Tools tools.bryantsmith.com

Creative Workflow Helpers

DOM Diff Viewer

Paste a before and after HTML fragment and get a structural diff: what was added, removed, or changed at the element, attribute and text level. Runs entirely in your browser — your markup never leaves the page.

Runs in your browser v1.0.0

Before

HTML fragment

The original markup.

After

HTML fragment

The updated markup.

Structural diff

live

How it works

Both fragments are parsed into a lightweight node tree in memory and compared node by node, so moving whitespace or reordering attributes does not show up as noise. Matching siblings are aligned with a longest-common-subsequence pass, which keeps additions and removals from cascading into false changes. Switch to Raw text when you want an ordinary line-by-line diff instead. Nothing is ever inserted into this page, so pasted scripts and event handlers cannot run.

Related tools

  • CSS Selector Match TesterPaste your HTML and a CSS selector to instantly see which elements match — entirely in your browser.
  • .env Compare & MergeCompare development, staging, and production .env key sets without exposing secret values, then build a merged template.
  • Accessible Name CalculatorPaste HTML, pick an element, and see the accessible name assistive technology computes — entirely in your browser.
  • Apache Rewrite TesterTest Apache mod_rewrite rules against a sample request path and see the rewritten URL, redirects, captures and warnings.
  • Cookie Builder & InspectorBuild a Set-Cookie header or paste one to inspect its expiry, path, domain, Secure, HttpOnly and SameSite attributes — entirely in your browser.
  • CORS Header Builder & ExplainerModel a cross-origin request and get the exact CORS response headers to send, explained in plain language.

More Creative Workflow Helpers tools