Getting started

@erkde/git-elements provides framework-independent custom elements for presenting Git command output in a browser.

Install and register

npm install @erkde/git-elements

In an app built with Vite or another bundler, put this import once in the JavaScript or TypeScript file your page loads first, such as src/main.js or src/main.ts:

// src/main.js
import "@erkde/git-elements";

The import registers <git-diff>, <git-log>, and <git-show>. You can then use those tags in your HTML or framework templates. For example, a Vite page can load src/main.js like this:

<script type="module" src="/src/main.js"></script>
<git-log
  repository="https://github.com/erkde/git-elements.js"
  revisions="main"
></git-log>

An existing app already loads its entry file, so the import in that file is enough. The bundler resolves the package name when it builds or serves the page.

Render a diff

Point <git-diff> at browser-accessible unified diff text:

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

See the <git-diff> reference for inline and JavaScript inputs.

Render repository history

Point <git-log> at a supported public repository and select a revision:

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

See the <git-log> reference for two-dot and three-dot revision sets.

Render one commit

Use <git-show> to present one commit and the patch it introduced:

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

See the <git-show> reference for revision and caching behavior.

Register individual elements

The package root registers all three elements. Component entry points export their classes without registering them. To register only <git-diff>:

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

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

<git-show> renders its patch with <git-diff>, so selective registration for it requires both elements.

Supported Git hosts

<git-log> and <git-show> load public repositories from these hosted services:

Host	repository URL format
GitHub	https://github.com/owner/repo
GitLab.com	https://gitlab.com/group/project (including nested groups)
Bitbucket Cloud	https://bitbucket.org/workspace/repo

Private repositories and self-hosted Git services are not supported. <git-diff> has no repository-host integration: it renders unified diff text supplied inline, through JavaScript, or from a browser-accessible src URL. See supported Git hosts for request limits and large-diff behavior.

Loading states

All three elements expose named slots and native-style load and error events for asynchronous inputs. They render no status wording by default, leaving the surrounding page in control.

<git-log
  repository="https://github.com/erkde/git-elements.js"
  revisions="main"
>
  <span slot="loading">Loading history…</span>
  <span slot="error">History unavailable.</span>
</git-log>

Learn more about loading and errors or styling.