A comprehensive web application to help you generate professional and customizable README files for your GitHub projects with advanced profile enhancements.
- Interactive form to input project details
- Live preview of your README as you edit
- Supports badges, images, and markdown formatting
- Download or copy the generated README instantly
- Beautiful and modern UI with responsive design
- Animated Typing SVG Section: Add animated typing text to your README with multi-line support, customizable font (with Google Fonts tooltip), color, and size. Add or remove lines, and preview the animation live. Copy the Markdown with a single click (with success animation).
- GitHub Stats Card - Display your GitHub statistics with customizable themes
- Most Used Languages - Show your top programming languages
- Contribution Graph - Visualize your GitHub activity
- Profile Views Counter - Track profile visitors
- GitHub Streak Stats - Show your contribution streaks
- GitHub Trophies - Display your GitHub achievements
- Social Media Badges - Support for 15+ social platforms
- Customizable Social Links - Easy integration with your social profiles
- Technology Icons - 100+ programming languages and frameworks
- Categorized Skills - Organize skills by category
- Visual Skill Display - Beautiful icon-based skill representation
- Modern animated buttons for all actions (add line, copy, generate)
- Tooltips for helpful guidance (e.g., font selection)
- Improved color picker and preview window for animated SVG
✅ Visitors Count Badge - Shows profile view count
✅ GitHub Trophy - Displays GitHub achievements
✅ GitHub Profile Stats Card - Shows GitHub statistics
✅ Top Skills - Displays most used languages
✅ GitHub Streak Stats - Shows contribution streaks
-
Clone the repository:
git clone https://github.com/your-username/github-readme-generator.git cd github-readme-generator -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open http://localhost:5173 to view the app in your browser.
-
Screen Shots
- Fill in your project details in the form
- Add your GitHub username
- Select which GitHub profile enhancements you want
- Add your social media usernames
- Generate and download your README
- Go to the Animated Typing SVG section
- Add multiple lines of text (each line will animate in order)
- Customize the font (hover the info icon for Google Fonts link), color, and size
- Use the color picker to select your preferred color
- Click the trash icon to remove a line
- Preview the animation in the wider preview window
- Click "Copy Markdown" to copy the centered Markdown code (with success animation)
- React - Frontend framework
- Vite - Build tool
- Tailwind CSS - Styling
- ESLint - Code linting
Contributions are welcome! Please open an issue or submit a pull request.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License.
- GitHub Readme Stats - For GitHub statistics cards
- GitHub Profile Trophy - For GitHub trophies
- Shields.io - For social media badges
- Live GitHub-style Markdown Preview: Instantly see your README as it will appear on GitHub, with all HTML, icons, badges, and analytics perfectly rendered and styled.
- Clickable Skill Icons: Select or deselect skills by clicking on their icons, not just the checkboxes.
- Perfectly Centered Analytics: All analytics cards, including the contribution graph, are centered for a polished look.
- Preview/Back-to-Edit Toggle: Switch between editing and previewing your README with a single click and smooth loader animation.