Live GitHub data
Repository names, descriptions, stars, forks, language badges, and links come from the GitHub API instead of hand-maintained HTML.
01 · Why it exists
Static repo cards go stale.
Portfolio pages, documentation hubs, and open-source landing pages often list GitHub repositories by hand. Stars, forks, descriptions, and language badges become wrong as soon as the repositories change.
RepoWidget keeps that surface live. It fetches public repository data, filters and sorts it, then renders a responsive card grid without needing a framework or a build step.
<div id="repos"></div>
<script src="https://cdn.jsdelivr.net/npm/repowidget/dist/repoWidget.min.js"></script>
<script>
createRepoWidget({ username: 'your-username', containerId: 'repos' });
</script>Core behavior
Live cards without a heavy integration.
Local caching
A 24-hour localStorage cache with ETag support reduces redundant requests and helps stay inside unauthenticated GitHub rate limits.
Design control
Card styles, text colors, grid columns, sorting, filters, and callbacks can be configured from the options object.
02 · Configuration
Only two options are required.
| Option | Default | Description |
|---|---|---|
username | Required | GitHub username or organization name. |
containerId | Required | ID of the element where cards render. |
maxRepos | 6 | Maximum number of repositories to display. |
sortBy | stars | Sort by stars, forks, name, size, or updated date. |
exclude | [] | Repository slugs to hide from the grid. |
onLoad | None | Callback that receives the rendered repository array. |
03 · Security notes
Public data only.
No private access
RepoWidget uses public repository endpoints. It cannot read private repositories without a separate backend.
No client tokens
If a site needs authenticated API limits, token handling belongs on that site’s backend, not in page source.
CSP friendly
Sites with a Content Security Policy can allow API calls with connect-src https://api.github.com.
Drop it into a page.
Install from npm or use the CDN build directly in a plain HTML file.