How to Add a Coding Speed Badge to Your GitHub README
A step-by-step guide to embedding your CodeSpeedTest WPM badge in your GitHub profile README — including the Markdown format, how the badge auto-updates, and creative placement ideas to make your profile stand out.
1. Why Developers Put Badges in Their GitHub README
A GitHub profile README is your developer business card. When a recruiter, hiring manager, or open-source collaborator lands on your profile, they spend roughly ten seconds scanning for signals of competence and commitment. Badges compress complex information into instantly readable visuals. A green CI badge tells reviewers that code passes tests. A coverage badge tells them the test suite is thorough. A coding speed badge tells them something equally concrete: this developer can write code fast and accurately, which correlates with productivity, fluency in their language of choice, and time spent deliberate-practicing their craft. Displaying a verified WPM score from CodeSpeedTest communicates that you take your fundamentals seriously — the same way a competitive programmer might pin their Codeforces rating or a data scientist might link their Kaggle tier.
- Recruiters spend under fifteen seconds on an initial profile scan — a badge communicates speed and accuracy instantly without requiring them to read anything.
- A verifiable badge backed by a public URL is more credible than a self-reported skill level on a resume.
- Badges signal continuous improvement — your CodeSpeedTest badge updates automatically, so it always reflects your current best, not a number you typed into a form three years ago.
- Open-source maintainers appreciate contributors who can move quickly through large codebases, and a typing speed badge is a concrete proxy for that ability.
- Adding a badge to your README only takes about two minutes, yet it differentiates your profile in a way most developers have not thought to do.
2. Creating Your CodeSpeedTest Account
You do not need an account to take a test on CodeSpeedTest — every test on the home page is free and requires no login. However, you do need an account for your best scores to be saved, for a public profile page to exist, and for the badge API to have data to display. Signing up takes under thirty seconds. Click the sign-in button in the top navigation, choose Google OAuth or email, and your profile is created immediately. Your username is set during onboarding and appears in your badge URL, so pick something consistent with your GitHub handle for clarity. Once you are signed in, every completed test automatically records your WPM, accuracy, language, and timestamp to your profile history.
- Sign in with Google for the fastest onboarding — no password to remember.
- Choose a username that matches your GitHub handle so visitors immediately connect the badge to your profile.
- Your personal best WPM per language is tracked separately, so your Python score does not compete with your JavaScript score.
- All historical test data is retained, allowing you to chart improvement over time from your profile page.
3. Finding Your Badge Embed Code
After completing at least one test while signed in, navigate to your profile page at codespeedtest.com/profile. Look for the "Share Your Speed Badge" section, which appears below your stats summary. That section contains your personalised embed code in three formats: Markdown (for README files), HTML (for personal websites), and a direct image URL. For a GitHub README you want the Markdown version. It follows this exact format:
- The Markdown badge format is: [](https://codespeedtest.com/profile/USERNAME)
- Replace USERNAME with your actual CodeSpeedTest username — not your GitHub username unless they happen to be the same.
- The image URL points to a dynamically generated SVG that renders your current best WPM, accuracy percentage, and a colour tier indicator.
- The badge links back to your public CodeSpeedTest profile, so anyone who clicks it can verify the score independently.
- You can copy the code directly from the Share panel — no need to type it manually.
4. Adding the Badge to Your GitHub Profile README
If you do not already have a GitHub profile README, create one by making a repository with the same name as your GitHub username. Add a README.md file to that repository. GitHub automatically renders this file on your public profile page. Once the file exists, paste your CodeSpeedTest badge Markdown anywhere in the file. Most developers place it near the top, either directly under their name and tagline or in a row alongside other badges like their GitHub stats card or language statistics. Commit the change, refresh your GitHub profile, and the badge will appear within a few seconds. The rendered badge shows your best WPM score in the badge label and uses a colour scheme that visually indicates your tier.
- To create a profile README: go to github.com/new, set the repository name exactly equal to your GitHub username, initialise with a README, and make it public.
- Paste the Markdown badge code anywhere in README.md and commit directly to the main branch.
- GitHub caches badge images for a few minutes, so if you do not see it immediately, hard-refresh the page.
- You can place the badge inline with other shields.io badges to create a consistent visual row at the top of your profile.
- Markdown supports image sizing via HTML: use <img> tags with width attributes if you need the badge to be a specific size.
Frequently Asked Questions
Do I need to update the badge code every time my WPM improves?
What if my GitHub username and CodeSpeedTest username are different?
5. How the Badge Auto-Updates
The CodeSpeedTest badge API generates a fresh SVG on every request using your current stored best WPM. There is no manual refresh step. When you beat your personal record on CodeSpeedTest, your profile is updated in real time. The next time anyone loads your GitHub profile, the badge image request goes to the CodeSpeedTest badge endpoint, which returns the latest number. This is fundamentally different from static badges where you paste a hardcoded number into the URL. The dynamic update mechanism means the badge is self-maintaining: it reflects your growth automatically, and your GitHub README passively documents your improvement over time without any effort on your part.
- Badge images are generated server-side as SVGs with your latest personal best WPM embedded in the text.
- GitHub CDN caches badge images for a short period, typically between one and five minutes, so there may be a brief delay before a new score appears.
- The badge colour tier changes automatically as you cross WPM thresholds — for example, moving from bronze to silver to gold as your speed increases.
- Because the badge is a live URL, it also works in personal portfolio sites, LinkedIn banners, and any other platform that renders external images.
6. Creative Placement and Styling Ideas
The default badge placement works well, but you can make your README stand out by being intentional about how you incorporate the badge. Many developers create a dedicated "Developer Stats" section that groups their GitHub activity card, language breakdown, LeetCode rank, and CodeSpeedTest badge together in a single visual block. Others place the badge right at the top of their README as a headline metric, similar to how a runner might lead with their marathon time. You can also use HTML inside a GitHub README to align badges side by side in a centered row, which looks cleaner than stacked badges on separate lines.
- Group related badges in a single row using HTML align="center" on a containing paragraph tag for a clean, professional look.
- Add a short caption below the badge such as "TypeScript typing speed — personal best" to give context to visitors unfamiliar with WPM metrics.
- Pair the badge with a link to your CodeSpeedTest profile so visitors can see your full score history, not just the headline WPM.
- Some developers include a before/after note in a pinned README commit message to document their progress journey publicly.
- Consider adding the badge to your project-level READMEs as well, particularly for open-source projects where contributor typing speed is a relevant signal.
Frequently Asked Questions
Can I show language-specific WPM scores rather than my overall best?
Is the badge free to use?
7. Improving Your Badge Score Through Targeted Practice
A badge is only as impressive as the number it displays. Once your badge is live, the natural next step is pushing that number higher. CodeSpeedTest is designed specifically for this kind of deliberate improvement. Rather than typing random prose, you practice on real code samples in the language you actually use day-to-day — React JSX, Python data pipelines, SQL joins, Bash one-liners. The platform tracks your per-key accuracy so you can identify exactly which characters slow you down. For most developers, the biggest gains come from drilling the characters they hesitate on most: angle brackets for TypeScript generics, backslash for escape sequences, and the colon-semicolon cluster that appears constantly in typed languages. Setting aside fifteen minutes of focused practice before your regular coding session is enough to see measurable improvement within two to three weeks.
- Use the language selector to practice exclusively in your primary language — your badge score reflects your best single-session WPM across all languages.
- The heatmap on your results screen shows per-key accuracy, revealing exactly which characters are costing you the most time.
- Short daily sessions of ten to fifteen minutes are more effective than occasional long sessions for building muscle memory.
- Aim to improve accuracy before speed — a higher accuracy rate produces a better net WPM score, which is what your badge ultimately reflects.
- Unlock certification tiers on CodeSpeedTest to set milestone targets: Bronze, Silver, Gold, and Diamond each require progressively higher WPM and accuracy thresholds.
8. The Bigger Picture: What a Speed Badge Says About You
Displaying your coding speed publicly is a statement of professional confidence. It says you are not afraid to quantify your fundamentals and put them in front of the world. In an industry where skill claims are often vague and unverifiable, a live badge backed by a public profile creates accountability. It also creates a feedback loop: knowing your badge is visible to every visitor to your GitHub profile is a surprisingly strong motivator for consistent practice. Developers who track their WPM publicly tend to improve faster than those who practice in private, for the same reason that public workout logs and run tracking apps drive better fitness outcomes. The badge is a small thing, but it represents a commitment to continuous, measurable improvement of a skill that every developer uses every single day.
- A publicly displayed, auto-updating score demonstrates transparency and confidence in your skills.
- Recruiters increasingly look for evidence of deliberate practice — a live metric is stronger evidence than a static resume claim.
- The act of making your score public creates accountability that accelerates improvement over time.
- CodeSpeedTest certificates linked from your profile provide an independently verifiable credential alongside the badge.
Start practicing now — free typing test on CodeSpeedTest, no login required.