# pixel-profile

> ![Pixel Profile](./img/card.png) **Pixel Profile**: Generate pixel art profiles from your GitHub data

Latest version **1.3.0** (published 2026-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install pixel-profile
pnpm add pixel-profile
yarn add pixel-profile
bun add pixel-profile
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2026-02-01 |
| First published | 2024-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.17.0 |
| Dependencies | 7 |
| Unpacked size | 16.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 567 |
| Author | LuciNyan |
| Maintainers | lucinyan |

## Links

- npm: https://www.npmjs.com/package/pixel-profile
- Repository: https://github.com/LuciNyan/pixel-profile
- Issues: https://github.com/LuciNyan/pixel-profile/issues
- npm.io page: https://npm.io/package/pixel-profile

## Dependencies (7)

- [jimp](https://npm.io/package/jimp.md) ^0.22.10
- [axios](https://npm.io/package/axios.md) ^1.9.0
- [dotenv](https://npm.io/package/dotenv.md) ^16.3.1
- [satori](https://npm.io/package/satori.md) ^0.10.11
- [emoji-name-map](https://npm.io/package/emoji-name-map.md) ^1.2.8
- [@resvg/resvg-js](https://npm.io/package/@resvg/resvg-js.md) 2.6.0
- [github-username-regex](https://npm.io/package/github-username-regex.md) ^1.0.0

## Recent versions

- 1.3.0 (latest) — 2026-02-01
- 1.2.1 — 2025-05-01
- 1.1.0 — 2025-04-30
- 1.0.0 — 2024-08-19
- 0.1.1 — 2024-02-26
- 0.1.0 — 2024-02-23
- 0.0.7 — 2024-02-18
- 0.0.6 — 2024-02-18
- 0.0.5 — 2024-02-14
- 0.0.4 — 2024-02-14
- 0.0.3 — 2024-02-14
- 0.0.2 — 2024-02-14

## README

![Pixel Profile](./img/card.png)
**Pixel Profile**: Generate pixel art profiles from your GitHub data

> This Pixel Profile project would not have been possible without these three amazing projects:
>
> [Github Readme Stats](https://github.com/anuraghazra/github-readme-stats): One of the best tools out there for generating awesome Github stats cards.
>
> [resvg-js](https://github.com/yisibl/resvg-js): A high-performance SVG renderer and toolkit.
>
> [Satori](https://github.com/vercel/satori): An enlightened library to convert HTML and CSS to SVG.

## Overview

You can easily generate a Github stats card with default styling using the following link:

```html
<!--Replace <username> with your own GitHub username.-->
https://pixel-profile.vercel.app/api/github-stats?username=<username></username>
```

![Default Github Stats Card](./img/default-github-stats.png)

Of course, you can customize the styling to better suit your preferences. For example, here is a stats card designed for GitHub's Dark Theme::

```html
https://pixel-profile.vercel.app/api/github-stats?username=LuciNyan&screen_effect=true&background=linear-gradient(to%20bottom%20right%2C%20%232aeeff%2C%20%235580eb)
```

This is what it looks like in use in a README:

![Demo 1](./img/demo-1.png)

If you want to include a GitHub stats card in your own README and have it display the appropriate card for both light and dark themes on GitHub, you can use the following configuration:

```md
<picture decoding="async" loading="lazy">
  <source media="(prefers-color-scheme: light)" srcset="https://pixel-profile.vercel.app/api/github-stats?username=LuciNyan&screen_effect=false&background=linear-gradient(to%20bottom%20right%2C%20%2374dcc4%2C%20%234597e9)">
  <source media="(prefers-color-scheme: dark)" srcset="https://pixel-profile.vercel.app/api/github-stats?username=LuciNyan&screen_effect=true&background=linear-gradient(to%20bottom%20right%2C%20%235580eb%2C%20%232aeeff)">
  <img alt="github stats" src="https://pixel-profile.vercel.app/api/github-stats?username=LuciNyan&screen_effect=false&background=linear-gradient(to%20bottom%20right%2C%20%2374dcc4%2C%20%234597e9)">
</picture>
```

[Here](https://github.com/LuciNyan) is a ready-made example configuration you can reference if you need inspiration for your own config.

## Documentation

Github Stats Card Options

| Name                  | Description                                                                                                                                           | Default value |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `background`          | Set background color/image. Supports a subset of CSS background property values                                                                       | `#434343`     |
| `color`               | Set text color to any valid CSS color value                                                                                                           | `white`       |
| `hide`                | Hide specific stats or elements by passing a comma-separated list. Valid keys: 'avatar', 'commits', 'contributions', 'issues', 'prs', 'rank', 'stars' |               |
| `include_all_commits` | Count all commits                                                                                                                                     | `false`       |
| `pixelate_avatar`     | Apply pixelation to avatar                                                                                                                            | `true`        |
| `screen_effect`       | Enable curved screen effect                                                                                                                           | `false`       |
| `username`            | GitHub username                                                                                                                                       |

## Contribute

The layout in this project is entirely done with JSX, so developing it is almost no different than a normal React project. This means anyone can easily create new cards with very little effort. If you have any ideas, feel free to contribute them here! ❤️

### TODO

- [x] Github stats card.
- [ ] Github repo card.
- [ ] Leetcode stats card.

## Author

- [LuciNyan](https://github.com/LuciNyan)

&nbsp;

<a aria-label="Vercel logo" href="https://vercel.com">
  <img src="https://badgen.net/badge/icon/Made%20with%20Love?icon=zeit&label&color=black&labelColor=black">
</a>

---
_Source: https://npm.io/package/pixel-profile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._