Github Profile Header Generator

What is it?

A simple but nice header image generator for your Github profile Readme.
You can use it for your repo banners too!

Create my banner!

How to use it?

1. Create a nice github header image.
2. Create your GitHub profile README following this guide.
3. Upload your header to your profile repo.
4. Add this line to your README:

   ![Header](./[Your header image])

Examples

Features list

• Edit title and subtitle texts.
• Choose colors for text, background and borders.
• Set dimensions and padding.
• Align text and decorations.
• Change fonts.
• Set the size and radius of the border.
• Set background pattern image, its color, size and opacity.
• Add decorations.
• Upload your own decoration, octocat or profile pic.
• Toogle between Github dark and light mode.
• Download image as png.
• Choose from predefined presets or get a random one.

Tech used

• Vite
• snapdom

Get started

• npm run dev- starts dev server
• npm run build - builds for production
• npm run preview - locally previews production build

Get started with Docker

docker-compose up -d --build --force-recreate

Contributing

Check out our Contributing guide