Skip to content

OpenReadme is a modern, open-source GitHub profile README generator that creates beautiful, auto-updating profile banners with customizable bento-style grids.

License

ravixalgorithm/openreadme

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


OpenReadme Banner
© Open Dev Society. This project is licensed under AGPL-3.0; if you modify, redistribute, or deploy it (including as a web service), you must release your source code under the same license and cre[...]
Next.js badge

OpenReadme

OpenReadme is a modern, open-source GitHub profile README generator that creates beautiful, customizable bento-style grids. Built with Next.js and serverless technology, it generates stunning profile images that automatically update daily with your latest GitHub stats.

✨ New: Automated daily updates are now live! Your profile image refreshes automatically every day at midnight UTC with your latest GitHub statistics.


📋 Table of Contents

  1. Introduction
  2. 🌍 Open Dev Society Manifesto
  3. ⚙️ Tech Stack
  4. 🔋 Features
  5. 🤸 Quick Start
  6. 🐳 Docker Setup
  7. 🔐 Environment Variables
  8. 🧱 Project Structure
  9. 📡 API & Integrations
  10. 🧪 Scripts & Tooling
  11. 🤝 Contributing
  12. 🛡️ Security
  13. 📜 License
  14. 🙏 Acknowledgements

✨ Introduction

OpenReadme is a cutting-edge GitHub profile README generator powered by Next.js (App Router), Tailwind CSS, and serverless Chromium for dynamic image generation. Create stunning profile banners for your GitHub README that automatically update daily with your latest stats.

How It Works:

  1. 🎨 Fill in your profile information on the dashboard
  2. 💾 Save your data (stored securely in the repository)
  3. 🤖 Our automated workflow generates your image daily at midnight UTC
  4. 🔗 Get a static URL that always shows your latest stats
  5. ✨ Embed it in your README and forget about it!

🔋 Features

  • 🎨 Beautiful Profile Generation

    • Multiple customizable themes
    • Bento-style grid layouts
    • Real-time GitHub stats (contributions, stars, PRs, issues)
    • Social media integration (GitHub, Twitter, LinkedIn)
    • Custom profile pictures and portfolio links
  • 🔄 Automated Daily Updates

    • Automatic image regeneration every day at midnight UTC
    • GitHub Actions workflow handles everything
    • Static URLs that always stay current
    • No manual intervention required
    • Your stats are always fresh
  • ⚡ Simple Setup

    • Fill in your profile once on the dashboard
    • Save your data (commits to repository)
    • Get your permanent image URL
    • Embed in your README
    • Done! Updates happen automatically
  • 🌐 API-First Design

    • RESTful image generation API
    • Query parameter customization
    • Serverless architecture
    • Optimized image delivery
  • 📱 Modern UI

    • Responsive design
    • Dark theme optimized
    • Smooth animations
    • Intuitive user experience
  • 🔧 Developer Experience

    • TypeScript support
    • ESLint configuration
    • Hot reload development
    • Production-ready builds

🤸 Quick Start

Prerequisites

  • Node.js 18+
  • Git for version control

Clone and Install

git clone https://github.com/Open-Dev-Society/openreadme.git
cd openreadme

# Choose your package manager
npm install
# or
yarn install
# or
pnpm install

Configure Environment

Run Development

npm run dev
# or
yarn dev
# or
pnpm dev

Build & Start (Production)

npm run build && npm start
# or
yarn build && yarn start
# or
pnpm build && pnpm start

Open http://localhost:3000 to start creating your OpenReadme!


🔐 Environment Variables

Create .env.local at the project root:

# Core Configuration
NODE_ENV=development

# GitHub Integration (Required for automated workflow)
GITHUB_TOKEN=ghp_your_personal_access_token_here
GITHUB_TOKEN_IMAGES=ghp_your_token_for_image_storage  # Optional, falls back to GITHUB_TOKEN

# Optional: Local Development
CHROME_EXECUTABLE_PATH=  # Optional for local Chromium path

GitHub Token Permissions Required:

  • repo - Full control of private repositories (for updating user data files)
  • workflow - Update GitHub Action workflows

Security Notes

  • Keep private tokens server-side when possible
  • Use environment-specific configurations
  • Never commit sensitive credentials to version control
  • Consider using secure environment management tools
  • For production deployment (Vercel), add tokens to environment variables

📜 License

OpenReadme is and will remain free and open for everyone. This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.


🙏 Acknowledgements

Special thanks to:

  • OpBento by EdgeX HQ - The original inspiration for this project
  • The open-source community and all contributors who make OpenReadme possible
  • Everyone using OpenReadme to showcase their work beautifully

Your support drives us forward! ⭐


Built with ❤️ by Open Dev Society

Open Dev Society

About

OpenReadme is a modern, open-source GitHub profile README generator that creates beautiful, auto-updating profile banners with customizable bento-style grids.

Topics

Resources

License

Stars

Watchers

Forks

Languages

  • TypeScript 81.3%
  • JavaScript 16.4%
  • CSS 2.3%