GitHub Timeline Showcase

Turn your GitHub history into a visual timeline and embeddable stats cards for README files, portfolios, and personal sites.

Generate your timeline | Get embed access

Timeline Views (Visual)

first view

active view

range view

All Themes (Visual Gallery)

light

dark

skyline

hacker

edgerunner

wicked

cherry-blossom

deep-waters

forest

neon-purple

grayscale

retro

Copy/Paste Snippets For Your README

Replace YOUR_EMBED_KEY with your own key from githubtimeline.com.

Timeline markdown embed

![GitHub Timeline](https://githubtimeline.com/api/embed/svg/YOUR_EMBED_KEY?view=range&theme=retro&width=1100)

Stats markdown embed

![GitHub Stats](https://githubtimeline.com/api/embed/stats/YOUR_EMBED_KEY?theme=retro&width=1100)

Website interactive embed

<div id="gh-timeline"></div>
<script
  src="https://githubtimeline.com/embed.js"
  data-key="YOUR_EMBED_KEY"
  data-view="active"
  data-theme="auto"
  data-mode="interactive"
  data-target="gh-timeline"
  data-height="420"
></script>

Embed Parameters

Timeline SVG endpoint

Endpoint: /api/embed/svg/:key

• view: first | active | range (default: range)
• theme: light, dark, skyline, hacker, edgerunner, wicked, cherry-blossom, deep-waters, forest, neon-purple, grayscale, retro
• width: 400 to 1200 (default: 800)

Stats SVG endpoint

Endpoint: /api/embed/stats/:key

• theme: same set as timeline
• width: 400 to 1200 (default: 800)

Script embed (embed.js)

• data-key: your embed key (required)
• data-view: first | active | range (default: active)
• data-theme: light | dark | auto (default: auto)
• data-mode: static | interactive (default: static)
• data-target: container id (default: gh-timeline)
• data-width: optional fixed width in px
• data-height: optional height in px (default: 400)

SEO Playbook For This Public Repo

1. Use a keyword-first repo name like github-timeline-readme-embeds.
2. Keep GitHub timeline, README stats, and GitHub README embed in headings.
3. Keep visuals above the fold so visitors instantly see output quality.
4. Add internal links between sections and external links to your product page.
5. Update screenshots/themes periodically to keep the repo active.

FAQ

Why are images not loading?

• The embed key may be invalid.
• Timeline data may not be generated yet for that key.
• One of your query params may be misspelled.

Can JavaScript embeds run in GitHub README?

No. GitHub README supports image embeds, not custom scripts.

Where do I generate my own key?

At githubtimeline.com.

Note

Not affiliated with GitHub, Inc.