<git-diff>

Render unified diff text as an accessible, themeable file-by-file view.

Unified diff

A unified diff describes file-level changes with file paths, hunks, removed lines, and added lines. <git-diff> parses that text and presents the changes as an accessible, file-by-file view:

<git-diff>
  <script type="text/plain">
    --- a/message.txt
    +++ b/message.txt
    @@ -1 +1 @@
    -Hello, world!
    +Hello, Git Elements!
  </script>
</git-diff>

Input methods

Every input resolves to unified diff text. Choose the form that fits where the patch already lives. Unlike <git-log> and <git-show>, <git-diff> does not load directly from a repository host.

URL

Use src for a browser-accessible patch file:

<git-diff src="./changes.patch"></git-diff>

JavaScript

Use patch when the diff is already in memory:

const diff = document.querySelector("git-diff");
diff.patch = rawDiffText;

Assigning patch cancels any pending src request so a late response cannot replace explicitly supplied content.

Inline text

A non-executable text/plain script keeps declarative patches beside their markup. Common HTML indentation is removed.

<git-diff>
  <script type="text/plain">
    --- a/message.txt
    +++ b/message.txt
    @@ -1 +1 @@
    -Hello, world!
    +Hello, Git Elements!
  </script>
</git-diff>

Playground

Edit the patch below. The patch property updates the rendered output immediately:

Unified diffdiff --git a/src/greeting.ts b/src/greeting.ts index 1234567..89abcde 100644 --- a/src/greeting.ts +++ b/src/greeting.ts @@ -1,4 +1,5 @@ -export const greeting = "Hello"; +export const greeting = "Hello, Git Elements!"; + export function printGreeting() { console.log(greeting); }

Rendered output

View playground source

Markup

<div class="playground">
  <label for="patch-input">Unified diff</label>
  <textarea id="patch-input" spellcheck="false"></textarea>

  <git-diff
    id="patch-output"
    line-numbers
  ></git-diff>
</div>

JavaScript

import { GitDiffElement } from "@erkde/git-elements/components/git-diff";

customElements.define("git-diff", GitDiffElement);

const input = document.querySelector("#patch-input");
const output = document.querySelector("#patch-output");

function render() {
  output.patch = input.value;
}

input.addEventListener("input", render);
render();

Supported changes

The parser supports multi-file patches, additions, deletions, renames, copies, mode changes, binary file indicators, and Git-quoted paths.

Pass output generated with git diff --no-color for consistent rendering.

Line numbers

Old and new line-number gutters are hidden by default. Enable them with the line-numbers boolean attribute or lineNumbers property:

<git-diff
  src="./changes.patch"
  line-numbers
></git-diff>

Change summaries

Stat

Add stat for a visual, per-file summary with a totals line:

<git-diff
  src="./changes.patch"
  stat
></git-diff>

Loading sample patch…The sample patch is unavailable.

Each bar shows additions and deletions, scaled against the file with the most changed lines. File paths sit above the bars and wrap on narrow screens. The view includes compact labels for new, deleted, renamed, copied, and mode-changed files. Binary files show “Binary” without a bar because the patch does not provide their byte counts. If several summary attributes are present, stat takes precedence.

Numstat

Add numstat to show additions and deletions for each changed file in place of the patch:

<git-diff
  src="./changes.patch"
  numstat
></git-diff>

Loading sample patch…The sample patch is unavailable.

Binary files show - for both counts. Metadata-only changes show 0 and 0. File paths wrap to fit narrow screens. If both numstat and shortstat are present, numstat is shown.

Short stat

Add shortstat to show a single line with changed-file, insertion, and deletion totals in place of the patch:

<git-diff
  src="./changes.patch"
  shortstat
></git-diff>

Loading sample patch…The sample patch is unavailable.

The summary is calculated from the supplied patch. Binary and metadata-only files count as changed files but add no text-line counts. A partial patch produces a summary of only the supplied changes.

API

Attributes

Name	Type	Description
src	string	Browser-accessible URL of a unified diff to fetch and render.
shortstat	boolean	Show file, insertion, and deletion totals instead of the patch.
numstat	boolean	Show additions and deletions per file instead of the patch.
stat	boolean	Show a per-file change graph and totals instead of the patch.
line-numbers	boolean	Show old and new line-number gutters.
theme	"light" | "dark"	Override the operating-system color preference.

Properties

Name	Type	Description
src	string	URL of the unified diff loaded by the element.
lineNumbers	boolean	Whether old and new line-number gutters are shown.
shortStat	boolean	Whether file, insertion, and deletion totals replace the patch.
numStat	boolean	Whether per-file addition and deletion counts replace the patch.
stat	boolean	Whether per-file change graphs and totals replace the patch.
patch	string	Raw unified diff text currently rendered by the element.
parsedDiffs	ParsedDiff[]	Parsed files, hunks, line numbers, and metadata for the current patch. Read-only.

Slots

Name	Description
loading	Content shown when a src request exceeds the loading delay.
error	Content shown when a src request fails.

Events

Name	Type	Description
load	Event	Fired after a src patch has loaded and rendered.
error	Event	Fired when a src patch cannot be loaded.

CSS custom properties

Name	Default	Description
--git-diff-bg	#f5f5f4	Component background color.
--git-diff-text-color	#292524	Primary text color.
--git-diff-border-color	#d6d3d1	Separator and gutter border color.
--git-diff-muted-color	#78716c	Muted metadata and line-number color.
--git-diff-add-text	#167044	Added-line text color.
--git-diff-del-text	#b4232c	Deleted-line text color.
--git-diff-hunk-text	#006d8f	Hunk-header text color.
--git-diff-meta-text	#806000	File metadata and status color.
--git-diff-hover-bg	rgba(41, 37, 36, 0.045)	Line hover background.
--git-diff-font-family	ui-monospace, monospace	Component font family.
--git-diff-font-size	12px	Component font size.
--git-diff-line-height	20px	Diff line height.
--git-diff-loading-delay	150ms	Delay before slotted loading content appears.

CSS parts

Name	Description
container	Container for the summary or rendered file diffs.
shortstat	File, insertion, and deletion totals.
numstat	Table of additions and deletions per file.
numstat-row	A file row in the numstat table.
numstat-additions	A file's addition count.
numstat-deletions	A file's deletion count.
numstat-path	A file path in the numstat table.
stat	Per-file change graphs and totals.
stat-file	A file row in the stat view.
stat-path	A file path in the stat view.
stat-annotation	A file status or mode change in the stat view.
stat-graph	A visual graph of a file's changed lines.
stat-additions	Added-line segment of a stat graph.
stat-deletions	Deleted-line segment of a stat graph.
loading	Loading-state container.
error	Error-state container.
file	A rendered file diff.
file-modified	A modified file diff.
file-added	An added file diff.
file-deleted	A deleted file diff.
file-renamed	A renamed file diff.
file-copied	A copied file diff.
file-header	Header containing a file path and optional status.
file-path	Displayed file path.
status	File status label.
status-added	Added-file status label.
status-deleted	Deleted-file status label.
status-renamed	Renamed-file status label.
status-copied	Copied-file status label.
file-meta	File mode, similarity, or binary metadata.
table	Table containing diff hunks and lines.
row	A diff row.
row-context	An unchanged context row.
row-addition	An added line row.
row-deletion	A deleted line row.
hunk-header	A hunk header row.
line-num	An old or new line-number cell.
old-line-num	An old line-number cell.
new-line-num	A new line-number cell.
content	A diff-content cell.

Exports and registration

Name	Kind	Module
<git-diff>	Custom element registration	@erkde/git-elements
GitDiffElement	Class	@erkde/git-elements/components/git-diff

See loading and errors and styling for the shared component conventions.