<git-log>

Render commit history from a public GitHub, GitLab.com, or Bitbucket Cloud repository. See supported Git hosts for accepted repository URL formats and API limits.

Branch history

A single revision accepts a branch, tag, or full commit ID. This live example reads the latest three commits from git-elements.js:

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

Loading repository history…Repository history is unavailable.

By default, <git-log> renders regular git log-style commit details, including the full hash, author, date, and complete commit message. Add oneline to use the compact format:

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

Loading repository history…Repository history is unavailable.

Revision sets

Revision sets follow git log semantics and use Git's own notation rather than provider-specific attribute names.

Two-dot

A..B shows commits reachable from B but not from A. This live example shows the commits added between the first two published releases:

<git-log
  repository="https://github.com/erkde/git-elements.js"
  revisions="v0.1.0..v0.1.1"
></git-log>

Loading repository history…Repository history is unavailable.

Three-dot

A...B shows commits reachable from either revision but not both:

<git-log
  repository="https://github.com/owner/project"
  revisions="main...feature"
  left-right
></git-log>

left-right marks commits unique to the first revision with < and commits unique to the second with >. It only affects symmetric three-dot logs.

Limits

The element returns at most 30 commits by default. Use max-count to request between 1 and 100, matching Git's --max-count concept.

The current implementation supports hosted public repositories only. It does not interpret local-only names such as HEAD, origin/main, reflog expressions, or unpushed commits.

API

Attributes

Name	Type	Description
repository	string	Public repository URL.
revisions	string	Branch, tag, commit ID, or two-dot or three-dot revision set.
max-count	number	Maximum number of commits to display, from 1 to 100.
left-right	boolean	Mark each side of a symmetric three-dot revision set.
oneline	boolean	Use a compact one-line entry for each commit.
theme	"light" | "dark"	Override the operating-system color preference.

Properties

Name	Type	Description
repository	string	Public repository URL used to load commit history.
revisions	string	Branch, tag, commit ID, or two-dot or three-dot revision set.
maxCount	number	Maximum number of commits to display, from 1 to 100.
leftRight	boolean	Whether symmetric three-dot results identify their revision side.
oneline	boolean	Whether to use the compact one-line commit format.
commits	readonly GitLogCommit[]	Normalized commits currently displayed by the element. Read-only.

Methods

Name	Returns	Description
reload()	Promise<void>	Bypass cached data and request the log again.

Slots

Name	Description
loading	Content shown when loading exceeds the configured delay.
error	Content shown when repository history cannot be loaded.

Events

Name	Type	Description
load	Event	Fired after repository history loads and renders.
error	Event	Fired when repository history cannot be loaded.

CSS custom properties

Name	Default	Description
--git-log-bg	#f5f5f4	Component background color.
--git-log-text-color	#292524	Primary text color.
--git-log-border-color	#d6d3d1	Border color.
--git-log-muted-color	#78716c	Muted author, date, and side-marker color.
--git-log-link-color	#006d8f	Commit hash link color.
--git-log-left-color	#b4232c	Left revision marker color.
--git-log-right-color	#167044	Right revision marker color.
--git-log-hover-bg	rgba(41, 37, 36, 0.045)	Commit hover background.
--git-log-font-family	ui-monospace, monospace	Component font family.
--git-log-font-size	12px	Component font size.
--git-log-line-height	20px	Commit line height.
--git-log-loading-delay	150ms	Delay before slotted loading content appears.

CSS parts

Name	Description
list	Ordered list containing the commits.
commit	A rendered commit.
side	Revision-side marker.
side-left	Marker for a commit unique to the left revision.
side-right	Marker for a commit unique to the right revision.
hash	Abbreviated commit hash.
message	First line of the commit message.
author	Commit author name.
date	Committer date.
loading	Loading-state container.
error	Error-state container.

Exports and registration

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

See loading and errors for states and events, repository caching for request sharing and stored results, and styling for custom properties and CSS parts.