Skip to content
Embed Github profile every where you want
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Github Stats

Embed Github profile every where you want


Commit Contributions

Language Contributions

Getting Started


Include github-stats.js in your html head tag:

<script type="text/javascript" src=""></script>

For older releases, use the follow snippet instead:

<script type="text/javascript" src=""></script>

Please remember to replace VERSION with the version number you are using.


To use Github Stats, add the following JavaScript to your website:

(async () => {
    const GITHUB_USERNAME = 'byliuyang';
    const COMMITS_CONTAINER = '#github-contributions';
    const LANGUAGES_CONTAINER = '#github-language-distribution';

    const githubStats = await GithubStats(GITHUB_USERNAME);

    let githubCommits = document.querySelector(COMMITS_CONTAINER);
    /* Render SVG for commit contributions */
    let commitsContribSVG = githubStats.commitsContribSVG({
        rows: 7,
        space: 4,
        rectWidth: 16,
        levelColors: [
                minCommits: 0,
                color: '#ebedf0'
                minCommits: 1,
                color: '#c6e48b'
                minCommits: 9,
                color: '#7bc96f'
                minCommits: 17,
                color: '#239a3b'
                minCommits: 26,
                color: '#196127'

    let githubLanguageDistribution = document.querySelector(LANGUAGES_CONTAINER);
    /* Render SVG for language contributions */
    let languageContribSVG = githubStats.languagesContribSVG({
        barHeight: 20,
        barWidth: githubLanguageDistribution.offsetWidth,
        lineSpacing: 4,
        languageNameWidth: 100,
        fontSize: 14

Please don't forget to replace GITHUB_USERNAME with your Github username and *_CONTAINER with the css selector where you want render the contributions inside.


Commit Contributions SVG

  • rows: the number of rows in the graph
  • space: the space between each square with unit in px.
  • rectWidth: the width of the each square
  • levelColors: the color of the squares varies based on the number of commits contributed on a day. minCommits refers to the minimal number of commits required to mark the square with color specified by the corresponding color attribute.

Language Contributions SVG

  • barHeight: the height of each rectangle
  • lineSpacing: the space between each bar
  • languageNameWidth: the width of language name
  • fontSize: the font size of language names


The latest release is v0.0.4. You can find all the releases here

Design Patterns

This project is engineered based on closure mentioned in You Don't Know Js



This project is maintained under the MIT License.

You can’t perform that action at this time.