A lightweight, customizable JavaScript widget for showcasing GitHub repositories on any website
Everything you need to showcase your GitHub repositories in style
Display up-to-date information about your GitHub repositories with smart caching for optimal performance.
Customize colors, layout, responsive breakpoints, hover effects, and more to match your website design.
Configure different column layouts for mobile, tablet, and desktop for the perfect display on any device.
Sort repositories by stars, forks, size, name, or update date to highlight your most important work.
No dependencies and minimal footprint, ensuring your site stays fast and responsive.
ARIA attributes and semantic HTML ensure your repository display is accessible to all users.
Up and running in three simple steps
Add the RepoWidget script to your HTML page:
<script src="https://cdn.jsdelivr.net/gh/peterbenoit/RepoWidget@latest/dist/repoWidget.min.js"></script>Or install via npm:
npm install repo-widgetAdd a container element where you want the repositories to appear:
<div id="repo-container"></div>Call the widget with your GitHub username and container ID:
createRepoWidget({
username: "peterbenoit",
containerId: "repo-container"
});See the widget in action with real-time configuration
Copy and paste this code into your project:
createRepoWidget({
username: "peterbenoit",
containerId: "repo-container",
columns: {
mobile: 1,
tablet: 2,
desktop: 3
},
maxRepos: 6,
sortBy: "stars",
scaleOnHover: 1.05,
cardStyles: {
backgroundColor: "#ffffff"
},
textStyles: {
titleColor: "#333333",
descriptionColor: "#666666",
iconColor: "#888888"
}
});Detailed configuration options and API reference
The RepoWidget accepts a configuration object with the following properties:
| Property | Type | Default | Description |
|---|---|---|---|
username |
String | Required | GitHub username to fetch repositories from |
containerId |
String | Required | ID of the HTML element where repositories will be displayed |
columns |
Object | {mobile: 1, tablet: 2, desktop: 3} |
Number of columns for different device widths |
maxRepos |
Number | Based on columns | Maximum number of repositories to display |
sortBy |
String | "stars" | Sort criteria: "stars", "forks", "size", "name", "updated" |
scaleOnHover |
Number | 1.05 | Scale factor for hover effect (set to 0 to disable) |
cardStyles |
Object | {} |
CSS styles for repository cards |
textStyles |
Object | {} |
CSS styles for text elements |
For a more detailed API reference with improved readability and extensive examples, view our Full API Documentation
Creates and initializes the repository widget with the specified options.
Returns: Void
username (required)The GitHub username whose repositories will be displayed.
containerId (required)The ID of the HTML element where the repositories will be rendered.
columns (optional)An object specifying the number of columns for different screen sizes.
{
mobile: 1, // < 640px
tablet: 2, // 640px - 1024px
desktop: 3 // > 1024px
}cardStyles (optional)An object containing CSS properties for styling the repository cards.
{
backgroundColor: '#ffffff',
borderRadius: '8px',
boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
// Any other valid CSS properties
}textStyles (optional)An object with color options for different text elements.
{
titleColor: '#333333',
descriptionColor: '#666666',
iconColor: '#888888',
sizeColor: '#aaaaaa'
}scaleOnHover (optional)The scale factor for the hover effect. Set to 0 to disable.
maxRepos (optional)The maximum number of repositories to display.
sortBy (optional)The criteria to sort repositories by. Options include:
"stars" - Sort by star count (default)"forks" - Sort by fork count"size" - Sort by repository size"name" - Sort alphabetically by name"updated" - Sort by last update date// Basic configuration
createRepoWidget({
username: "peterbenoit",
containerId: "repo-container"
});// Custom responsive layout
createRepoWidget({
username: "peterbenoit",
containerId: "repo-container",
columns: {
mobile: 1,
tablet: 3,
desktop: 4
},
maxRepos: 8
});// Custom styling for cards and text
createRepoWidget({
username: "peterbenoit",
containerId: "repo-container",
cardStyles: {
backgroundColor: "#f8f9fa",
borderRadius: "12px",
boxShadow: "0 10px 15px rgba(0,0,0,0.05)"
},
textStyles: {
titleColor: "#212529",
descriptionColor: "#495057",
iconColor: "#6c757d"
},
scaleOnHover: 1.08
});// Sort by most recently updated repositories
createRepoWidget({
username: "peterbenoit",
containerId: "repo-container",
sortBy: "updated",
maxRepos: 10
});// If using ES modules with a bundler
import { createRepoWidget } from 'repo-widget';
createRepoWidget({
username: "peterbenoit",
containerId: "repo-container"
});Real-world applications for RepoWidget
Highlight your best open-source work on your personal website or portfolio. Sort by stars or custom criteria to put your best projects front and center.
Showcase your organization's commitment to open source software by displaying your public repositories on your company website. Perfect for tech companies wanting to highlight their contributions.
Create a centralized view of all your project repositories to make it easier for users and contributors to find what they need. Ideal for organizations with multiple related projects.