All widgets — live preview

Customize style and themes to preview how the cards render before adding the code to your profile readme or website.

Select User Profile

Fetch statistics for any GitHub user to preview card contents.

Select Widget

Choose a widget type to play and customize.

Theme Presets

Select a baseline preset to edit.

Styling Playground

Customize styling attributes in real time.

Colors

Background

Enable Gradient Background

Accent

Primary Text

Muted Text

Border Color

Layout & Typography

Card Width

320px

Font Size

14px

Card Padding

18px

Border Radius

14px

Border Width

1px

Border Style

Font Family

Avatar Shape

Playground Workspace

Interact with your customized settings.

HTML Embed Code

<!-- Engive GitHub Widget --><script
  src="https://ankurhalder.com/widget/embed.js"
  data-username="ankurhalder"
  data-engive-widget="loader"
  defer
></script>

<div
  class="engive-github-widget"
  data-widget="developer-card"
  style="
    background: #0d1117;
    border-color: rgba(255, 255, 255, 0.08);
    border-style: solid;
    border-width: 1px;
    border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    color: #e6edf3;
    max-width: 320px;
    font-size: 14px;
    --engive-accent: #58a6ff;
    --engive-brand: #58a6ff;
    --engive-text: #e6edf3;
    --engive-text-muted: rgba(230, 237, 243, 0.6);
    --engive-border: rgba(255, 255, 255, 0.08);
    --engive-accent-rgb: 88, 166, 255;
    --engive-footer-display: flex;
    box-shadow: none;
  "
></div>

Readme Badge (Markdown)

[![GitHub Chronicle](https://ankurhalder.com/api/v1/user/widgets/ankurhalder?theme=glass-dark&backgroundColor=%230d1117&accentColor=%2358a6ff&textColor=%23e6edf3&textMutedColor=rgba%28230%2C+237%2C+243%2C+0.6%29&borderColor=rgba%28255%2C+255%2C+255%2C+0.08%29&borderRadius=14&borderWidth=1&fontFamily=-apple-system%2C+BlinkMacSystemFont%2C+%27Segoe+UI%27%2C+system-ui%2C+sans-serif&showFooter=true&shadowGlow=false&cardWidth=320&fontSize=14&avatarShape=circle&cardPadding=18&bgGradientEnd=&gradientAngle=135&borderStyle=solid&showCommits=true&showStars=true&showStreak=true&showLanguages=true&enableHoverTilt=false)](https://ankurhalder.com/github)

Shareable Link

/widget/preview?config=eyJ0aGVtZSI6ImdsYXNzLWRhcmsiLCJiYWNrZ3JvdW5kQ29sb3IiOiIjMGQxMTE3IiwiYWNjZW50Q29sb3IiOiIjNThhNmZmIiwidGV4dENvbG9yIjoiI2U2ZWRmMyIsInRleHRNdXRlZENvbG9yIjoicmdiYSgyMzAsIDIzNywgMjQzLCAwLjYpIiwiYm9yZGVyQ29sb3IiOiJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDgpIiwiYm9yZGVyUmFkaXVzIjoxNCwiYm9yZGVyV2lkdGgiOjEsImZvbnRGYW1pbHkiOiItYXBwbGUtc3lzdGVtLCBCbGlua01hY1N5c3RlbUZvbnQsICdTZWdvZSBVSScsIHN5c3RlbS11aSwgc2Fucy1zZXJpZiIsInNob3dGb290ZXIiOnRydWUsInNoYWRvd0dsb3ciOmZhbHNlLCJjYXJkV2lkdGgiOjMyMCwiZm9udFNpemUiOjE0LCJhdmF0YXJTaGFwZSI6ImNpcmNsZSIsImNhcmRQYWRkaW5nIjoxOCwiYmdHcmFkaWVudEVuZCI6IiIsImdyYWRpZW50QW5nbGUiOjEzNSwiYm9yZGVyU3R5bGUiOiJzb2xpZCIsInNob3dDb21taXRzIjp0cnVlLCJzaG93U3RhcnMiOnRydWUsInNob3dTdHJlYWsiOnRydWUsInNob3dMYW5ndWFnZXMiOnRydWUsImVuYWJsZUhvdmVyVGlsdCI6ZmFsc2V9&widget=developer-card&username=ankurhalder