HaikuReadme

✨ 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

---

📑 Table of Contents

• 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 ✨

---

🚀 Features

• 🎨 Customizable themes: catppuccin_mocha, dracula, cyberpunk, and more
• 🧱 Layouts: vertical, horizontal, and compact
• 🔤 Font options: Fira Code, Roboto, JetBrains Mono, and more
• 🎁 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!

---

📦 Usage

Embed this in your GitHub README:

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

🔧 Query Parameters

Parameter	Description	Options	Default
theme	Color scheme	catppuccin_mocha, dark, dracula, nord, tokyo_night, gruvbox_dark, solarized_dark, cyberpunk, velvet_dusk, solar_flare	catppuccin_mocha
type	Layout style	vertical, horizontal, compact	vertical
border	Show border	true, false	true
font	Font family	Fira Code, Roboto, Inconsolata, Arial, Courier New, Comic Sans MS, Lobster, Oswald, Indie Flower, Impact, JetBrains Mono	Fira Code

✨ Examples

• Dracula theme, horizontal layout, no border:

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

• Cyberpunk theme, compact layout with custom font:

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

• Custom font example:

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

🎨 Theme Previews

Theme	Preview
catppuccin_mocha
dracula
cyberpunk

Explore more themes at HaikuReadme Web

---

⚡ Quick Start

Embed this in your GitHub README:

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

---

🛠️ Installation & Deployment

Prerequisites

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

Steps

# 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.

---

🔁 Automated Updates (Optional)

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

GitHub Action Workflow

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.

---

🧪 Local Development

# 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

---

⚙️ Environment Variables

Create a .env file in the frontend directory:

For local dev:

VITE_API_URL=http://localhost:3000

---

🤝 Contributing

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

💡 Contribution Ideas

• 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.

---

🌍 Community

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

---

Technologies Used in HaikuReadme

Frontend

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/

Backend

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/

---

Deployment

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

---

Build Process

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

---

📄 License

Licensed under the MIT License.

---

👏 Acknowledgments

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

---

Contributors ✨

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] 📖