git-elements.js

Framework-independent custom elements for presenting Git diffs and history in a browser.

Documentation and live examples

Install

npm install @erkde/git-elements

Import the package once in your app's JavaScript or TypeScript entry file to register all three elements:

import "@erkde/git-elements";

You can then use the elements in HTML or framework templates. See getting started for a complete page example and individual element registration.

Components

<git-diff>

Render unified diff text from a browser-accessible URL, inline markup, or the JavaScript patch property. Add line-numbers for gutters, or stat, numstat, or shortstat for a change summary.

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

Explore <git-diff>

<git-log>

Render commit history from a public GitHub, GitLab.com, or Bitbucket Cloud repository. Select a branch, tag, commit ID, or two-dot or three-dot revision set with revisions.

<git-log
  repository="https://github.com/erkde/git-elements.js"
  revisions="main"
  max-count="10"
></git-log>

Explore <git-log>

<git-show>

Render one hosted commit and its patch. revision accepts a branch, tag, or full commit ID.

<git-show repository="https://github.com/erkde/git-elements.js" revision="v0.1.1"></git-show>

Explore <git-show>

Guides

• Supported Git hosts covers repository URLs, request limits, and large diffs. Repository loading supports public hosted repositories.
• Loading and errors explains the loading and error slots and the load and error events.
• Repository caching explains request sharing, stored results, and reload() for <git-log> and <git-show>.
• Styling covers themes, CSS custom properties, and parts.