U.S. flagA digital services project by Flexion

Spec Diff Browser

feedbackCustominteractive

Annotated single-column diff of a form spec. Renders the head tree with inline change badges, before/after rows for modified fields, and base-only entries spliced in for removed pages, groups, and fields. Tops the view with an overview strip of change counts and jump-links.

Custom component — no upstream reference.

Variants

Initial Import

These refs are identical.

1.Your Information
Personal Information3 fields, unchanged
First nametextrequired
Last nametextrequired
Middle nametext

No Changes

These refs are identical.

1.Your Information
Personal Information2 fields, unchanged
First nametextrequired
Last nametextrequired

With Additions

1 added

Pages with changes: Your Information

1.Your Information
Personal Information
First nametextrequired
Last nametextrequired
Middle nametext+ New

Contract

Documented variants

  • NoChanges — Identical base and head specs: overview shows "These refs are identical"; all panels render from the head spec.
  • WithAdditions — Head spec has a new field relative to base: overview shows the addition count; changed panel opens automatically.
  • InitialImport — Null base specs (first-time import): revealMode defaults to "all" and every panel starts open.

Behavior promises

  • ○ Overview strip counts changes by category and provides jump-links to changed pages
  • ○ Panels with changes open automatically when revealMode is "changed"; unchanged panels collapse
  • ○ Removed items from the base spec are spliced back into their original positions with a "Removed" badge

Source CSS