A professional GitHub repository display widget for showcasing repositories on any website. RepoWidget makes it easy to embed and display GitHub repositories in a customizable, responsive layout without any dependencies.
- Display repositories from any GitHub user or organization
- Fully customizable styling and appearance
- Responsive design with configurable column layouts
- Zero dependencies, lightweight and fast
- Sort repositories by stars, forks, or last update date
- Simple integration with any website
- Works with vanilla JavaScript or any framework
Visit repowidget.com to see RepoWidget in action.
- Code Examples - Examples of how you can use RepoWidget
- Live Demo - Test out your configuration here
<div id="my-github-repos"></div> <!-- jsDelivr CDN (recommended) --> <script src="https://cdn.jsdelivr.net/npm/repowidget/dist/repoWidget.min.js"></script> <!-- or unpkg CDN --> <!-- <script src="https://unpkg.com/repowidget/dist/repoWidget.min.js"></script> --> <script> createRepoWidget({ username: 'your-github-username', containerId: 'my-github-repos', maxRepos: 6, }); </script>
npm install repowidget
import { createRepoWidget } from 'repowidget'; createRepoWidget({ username: 'your-github-username', containerId: 'my-github-repos', maxRepos: 6, });
RepoWidget is highly customizable. Here's a complete example with all available options:
createRepoWidget({ // Required username: 'github-username', // GitHub username or organization name containerId: 'repos-container', // ID of the container element // Optional maxRepos: 6, // Maximum number of repositories to display exclude: ['excluded-repo-1', 'excluded-repo-2'], // Repositories to exclude sortBy: 'stars', // Sort repos by: "stars", "forks", or "updated" forked: false, // Whether to include forked repositories noStyles: false, // Set to true to disable default styles // Responsive column layout columns: { mobile: 1, // Columns on mobile (<768px) tablet: 2, // Columns on tablet (768px-1023px) desktop: 3, // Columns on desktop (>1024px) }, // Custom styles cardStyles: { backgroundColor: '#ffffff', borderRadius: '8px', boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)', border: '1px solid #e1e4e8', margin: '10px', padding: '20px', height: '100%', }, textStyles: { titleSize: '18px', titleColor: '#0366d6', titleWeight: '600', descriptionColor: '#586069', descriptionSize: '14px', iconColor: '#586069', }, // Animation scaleOnHover: 1.03, // Scale factor on hover (set to null to disable) // Callbacks onLoad: function (repos) { console.log('Repositories loaded:', repos); }, onError: function (error) { console.error('Error loading repositories:', error); }, });
For complete API documentation, visit our API Reference.
If you need to display many repositories or need higher rate limits, you can use a GitHub API token:
createRepoWidget({ username: 'your-github-username', containerId: 'repos-container', githubApiToken: 'your-github-token', // Consider using environment variables });
Note: Only use GitHub tokens in secure contexts and be careful not to expose them in client-side code. Consider using a proxy server for production applications.
RepoWidget works in all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributions are welcome! Feel free to open issues or submit pull requests.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
# Install dependencies npm install # Start development server npm run dev # Build for production npm run build
This project is licensed under the MIT License.
Created by Peter Benoit