Widgets Overview

GitAscii comes with over 40 built-in widget renderers categorized into functional suites. Every widget adheres to a unified rendering signature and receives the widget configuration, normalized GitHub data, and global theme styles.

WidgetInstance (JSON)
      ↓
Registry Map (`REGISTRY_MAP.get(widgetId)`)
      ↓
WidgetRendererFn (Pure TypeScript function)
      ↓
renderWidgetSvg (Frame, Theme Decorators, Animation & CSS Keyframes)
      ↓
SVG Node Snippet

Renderer Function Signature

Every widget renderer in GitAscii is a pure function matching this type signature:

export type WidgetRendererFn = (
  widget: WidgetInstance,
  data: NormalizedGitHubData,
  globalStyles: GlobalStyles,
  forceStatic?: boolean
) => string

Essential Widgets

Header, Avatar, Bio, Neofetch Terminal Info, Divider, Footer.

Interactive & ASCII

Image-to-ASCII Converter, ASCII Text Banner, Tech Stack Icons, Pokémon Card.

Stats & Metrics

Live GitHub Stats, Top Languages Bar/Donut, Featured Repositories, Social Badges.

GodProfile Suite

Tree Terminal, Marquee Pill Strip, Neural Network, Trophies, WakaTime, 3D Globe.

ASCII Profile Suite

Monochrome Typing Portrait, Neofetch Info Card, Calendar ASCII Heatmap.

Control Plane Suite

System Loop, Command Deck, Signal Grid, Metro Map, Bento, Blueprint, Constellation.

Codeweb Aura Suite

Cosmic Orbit Hero, Aura Showcase Cards, Aura Bento Grid, Rotating Social Badges.

External Integrations

GitHub Readme Stats, Streak, Trophy, Snake, Metrics, Quotes, GitFest, Views, GHStats.

Universal Configuration Options

In addition to custom widget options, every widget supports these universal parameters in widget.config:

string

default:"globalStyles.backgroundColor"

Card fill color.

string

default:"globalStyles.borderColor"

Card perimeter stroke color.

string

default:"globalStyles.textColor"

Primary text color within the widget.

string

default:"globalStyles.accentColor"

Signature highlight color for icons, borders, and emphasis strings.

number

default:"globalStyles.borderRadius"

Card border radius in pixels.

boolean

default:"false"

When true, sets strokeWidth = 0 to remove the boundary border line.

boolean

default:"false"

When true, removes theme-specific corner elements (e.g. Dracula dots, Cyberpunk corner brackets).

AnimationType

default:"none"

Entrance animation: none, fade-in, slide-up, slide-down, slide-left, slide-right, zoom-in, zoom-out, flip-x, flip-y, typewriter, glitch, scan-lines.

number

default:"1500"

Animation duration in milliseconds.

number

default:"0"

Delay in milliseconds before the animation triggers.

AnimationEasing

default:"ease-out"

Easing timing function: ease, ease-in, ease-out, ease-in-out, linear, spring.

⌘I

Getting Started

API