Share

MonkeyType Story

With The World

Monkeytype Readme transforms typing data into SVGs for your GitHub Readme.

What is MonkeyType Readme

MonkeyType Readme is a tool that transforms your MonkeyType typing data into SVGs, which you can put in your GitHub Readme to show off your typing speed and accuracy.

With MonkeyType Readme, you can customize the appearance of your typing stats to match your GitHub Readme style. You can also include multiple SVGs to display different MonkeyType data, such as LeaderBoards and PersonalBests.

MonkeyType Readme Miodec LeaderBoard SVG

Create monkeytype readme

initial monkeytype readme

theme

monkeytype readme

How to use monkeytype readme

Add your monkeytype-readme.yml file in your repository's .github/workflows/path .

please generate your monkeytype readme on the top first

See the example

monkeytype-readme.yml

                        
    name: generate monkeytype readme svg
    
    on:
    schedule:
        - cron: "0 */6 * * *" # every 6 hours
    workflow_dispatch:
    
    jobs:
    download-svg:
        runs-on: ubuntu-latest
        steps:
        - name: Checkout code
            uses: actions/checkout@v3
    
        - name: Set up Node.js
            uses: actions/setup-node@v3
            with:
            node-version: '20.x'
    
        - name: Download SVG
            run: |
            mkdir public
            curl -o public/monkeytype-readme.svg https://monkeytype-readme.com/generate-svg/YOUR_USERNAME/THEMES
            curl -o public/monkeytype-readme-lb.svg https://monkeytype-readme.com/generate-svg/YOUR_USERNAME/THEMES?lb=true
            curl -o public/monkeytype-readme-pb.svg https://monkeytype-readme.com/generate-svg/YOUR_USERNAME/THEMES?pb=true
            curl -o public/monkeytype-readme-lb-pb.svg https://monkeytype-readme.com/generate-svg/YOUR_USERNAME/THEMES?lbpb=true
    
        - name: push monkeytype-readme.svg to the monkeytype-readme branch
            uses: crazy-max/ghaction-github-pages@v4.0.0
            with:
            target_branch: monkeytype-readme
            build_dir: public
            env:
            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

This GitHub Actions YAML code sets up a workflow called generate monkeytype readme svg that automatically generates SVG files for the Monkeytype readme.


By using this workflow, you can ensure that the Monkeytype readme SVG files are always up to date on the monkeytype-readme branch.

After the workflow run add SVGs to your GitHub Readme

please change GITHUB_USERNAME & GITHUB_REPOSITORY to your github username & github repository name
README.md 
                        
    <a href="https://monkeytype.com/profile/MONKEYTYPE_USERNAME">
        <img src="https://raw.githubusercontent.com/GITHUB_USERNAME/GITHUB_REPOSITORY/monkeytype-readme/monkeytype-readme-lb.svg" alt="My Monkeytype profile" />
    </a>