✨ Generate beautiful, tech-themed haiku SVGs for your GitHub README!

HaikuReadme generates poetic, customizable haiku SVGs you can embed in your GitHub profile. Choose from themes, layouts, and border styles — perfect for developers with a love for code and creativity.

🔗 Live demo: HaikuReadme Web

• HaikuReadme
  • 📑 Table of Contents
  • 🚀 Features
  • 📦 Usage
    • 🔧 Query Parameters
    • ✨ Examples
  • 🎨 Theme Previews
  • ⚡ Quick Start
  • 🛠️ Installation & Deployment
    • Prerequisites
    • Steps
  • 🔁 Automated Updates (Optional)
    • GitHub Action Workflow
  • 🧪 Local Development
  • ⚙️ Environment Variables
  • 🤝 Contributing
    • 💡 Contribution Ideas
  • 🌍 Community
  • Technologies Used in HaikuReadme
  • Frontend
  • Backend
  • Deployment
  • Build Process
  • 📄 License
  • 👏 Acknowledgments
  • Contributors ✨

• 🎨 Customizable themes: catppuccin_mocha, dracula, cyberpunk, and more
• 🧱 Layouts: vertical, horizontal, and compact
• 🎁 Embeddable: Drop into any README with one line
• 💡 Automatically updated: Hourly haiku refresh (via GitHub Actions)
• 🌍 Mobile-friendly frontend for on-the-go customization
• 🤝 Open source: Add your own templates, themes, or words!

Embed this in your GitHub README:

![HaikuReadme](https://chinmay29hub-haiku-readme.vercel.app/api?theme=catppuccin_mocha&type=vertical&border=true&t=1748999341)

• Dracula theme, horizontal layout, no border:

  ![HaikuReadme](https://chinmay29hub-haiku-readme.vercel.app/api?theme=dracula&type=horizontal&border=false&t=1748999341)

• Cyberpunk theme, compact layout:

  ![HaikuReadme](https://chinmay29hub-haiku-readme.vercel.app/api?theme=cyberpunk&type=compact&border=true&t=1748999341)

Theme	Preview
catppuccin_mocha
dracula
cyberpunk

Explore more themes at HaikuReadme Web

Embed this in your GitHub README:

![HaikuReadme](https://chinmay29hub-haiku-readme.vercel.app/api?theme=catppuccin_mocha&type=vertical&border=true&t=1748999341)

• Node.js (v16 or higher)
• npm (v8 or higher)
• Vercel CLI (for deployment)

# Clone the repository
git clone https://github.com/chinmay29hub/haiku-readme.git

# Navigate to project
cd haiku-readme

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

# Come back to root directory
cd ..

# Build the project
npm run build

# Deploy to Vercel
vercel

Update your README with your deployed URL.

The haiku SVG updates every hour using a GitHub Action.
This ensures fresh content and bypasses Vercel's response caching.

name: Haiku Generator

on:
  push:
    branches:
      - main
  schedule:
    - cron: '0 * * * *' # Every hour
  workflow_dispatch:

permissions:
  contents: write

jobs:
  update-readme:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the code
        uses: actions/checkout@v3

      - name: Update README with Random Haiku
        uses: chinmay29hub/haiku-readme@v1

See the workflow file in .github/workflows/update-readme.yml.

# Start backend
cd backend
npm start

# Start frontend
cd ../frontend
npm run dev

Or use one command to run both:

npm run dev

API will be available at:
http://localhost:3000/api?theme=catppuccin_mocha&type=vertical&border=true

Create a .env file in the frontend directory:

For local dev:

VITE_API_URL=http://localhost:3000

We welcome contributions from everyone! Check out the CONTRIBUTING.md to get started.

• Add new themes or layouts
• Expand word sets and haiku templates
• Improve UI/UX (animations, responsiveness, accessibility)
• Refactor backend or add tests

Before contributing, please read our Code of Conduct to ensure a respectful community experience.

• Issues – Bug reports & feature requests
• Discussions – Ideas and feedback
• Code of Conduct – Be kind and inclusive

1. React

   • Description: A JavaScript library for building user interfaces using components.
   • Documentation: https://react.dev/

2. Vite

   • Description: A modern frontend build tool that provides fast development and optimized builds.
   • Documentation: https://vitejs.dev/

1. Node.js

   • Description: A JavaScript runtime for building scalable network applications.
   • Documentation: https://nodejs.org/en/docs/

2. Nodemon

   • Description: A tool that helps develop Node.js applications by automatically restarting the server when file changes are detected.
   • Documentation: https://nodemon.io/

1. Vercel
   • Description: A platform for frontend developers to deploy websites and serverless functions.
   • Documentation: https://vercel.com/docs

1. npm
   • Description: A package manager for JavaScript that allows you to install, share, and manage dependencies.
   • Documentation: https://docs.npmjs.com/

Licensed under the MIT License.

• Inspired by devs who mix poetry and code
• Color palettes from Catppuccin
• Powered by Vercel, React, Express

Thanks goes to these wonderful people:

Chinmay Sonawane 💻 🚧 📆 👀 ⚠️ 📖 🤔	actions-user 💻 🚧	UKI 📖	Vara Rahul Rajana 💻	Tuan Nguyen 💻	Colin Frerichs 💻	miguelro20 💻
jesh 💻	Binita Sharma 💻	Shubh Vrat Johri 💻 🤔	allcontributors[bot] 📖