Hello everyone! I’m Chinmay, just a guy who’s been coding for a bit and trying to figure it all out. I made this thing called HaikuReadme, and it’s honestly one of the coolest projects I’ve worked on. It’s a tool that makes little haiku poems about tech stuff—like coding and servers—and turns them into SVG pictures you can stick in your GitHub README. I’m pumped to tell you about it, and I’d love for you to check it out, maybe even help me make it better!
How It All Kicked Off
Okay, I have used different readme tools for my github readme profile. Like the profile views, contribution graph, github trophies, etc. I wanted something that screamed “me.”. Intially, I had this idea of building a "LinkedIn Badge Generator" for readme. But someone already built it. So, I thought, what if I made haikus about coding? Like, “Debug all night long” kinda vibes. And what if they were images? That’s when HaikuReadme popped into my head. It’s my first project using vercel serverless functions, and I’m still learning the ropes, but I think it’s pretty neat.
What’s the Deal with HaikuReadme?
HaikuReadme makes SVG images of haikus about tech, like “Code runs / Git saves / Loop shines.” You just add one line to your README, and boom, you’ve got a poetic picture. You can pick how it looks—colors like Dracula (super purple!) or Catppuccin Mocha, and layouts like tall or wide. I have also developed a website where you can change stuff and copy the code fast.
Here’s how you do it:
)
That gives you a cool haiku image. Wanna try it? Go to HaikuReadme Web and play around.
🤖 GitHub Actions to Refresh Haiku Hourly
This is optional but you can set up GitHub Actions to swap out haikus every hour, so your README stays fresh without you doing anything. If you look closely in the api url there is query param t=1745307612. The actions does nothing but changes t value to the current time. Apparently, vercel was caching the svg responses so I came up with this workaround where different t values give you different responses. This was real pain in the a**.
Even if you don't set up the above workflow your haiku refreshes every 24 hours.
Building It Was Wild
I’m no expert, so building this was like a rollercoaster. For the website, I used React with this thing called Vite ‘cause I read it’s fast. For the backend, used Node and Express. Before the vercel cache troubles, I had hard time generating svg's. I tried different libraries but the svg's were not as good. So, I went with a svg string approach.
For generating haiku texts, it grabs words like “byte” or “cloud” from words.json, mixes them with haiku patterns in templates.json, and makes SVGs with svg.js. I have hosted apps before on vercel but I had to host both react and node in the same vercel app instance. I followed this awesome article here that helped me deploy!
Wanna see the code? It’s all at -
chinmay29hub
/
haiku-readme
Generate tech-themed haiku SVGs for your GitHub README with customizable themes and layouts. Add poetry to your profile! 📜✨
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
🚀 Features
- 🎨 Customizable themes:
catppuccin_mocha,dracula,cyberpunk, and more - 🧱 Layouts:
vertical,horizontal, andcompact - 🎁 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:
🔧 Query Parameters
Parameter
Description
Options
Default
theme
Color scheme
catppuccin_mocha, dark, dracula, nord, tokyo_night, gruvbox_dark, solarized_dark, cyberpunk
catppuccin_mocha
type
Layout style
vertical, horizontal,
How You Can Jump In
Helping out is easier than it sounds. I wrote a CONTRIBUTING.md to explain everything. Here’s some stuff you could do:
- Toss in new words to
words.json, like “neural” or “merge.” You don’t need to code! - Make a new theme in
svg.js. I’d kill for something like a neon green one. - Fix little things, like the border checkbox in
App.css—it’s a bit off on some screens.
Maybe you’ve got better ideas than me. I’d love to see what we can do together, like add new features or fix stuff I screwed up.
Just fork the repo, grab the code, and run npm install in frontend and backend. Test it with npm run dev for the website or npm start for the server. Then send me a pull request. I’ve got some “good first issue” tasks, like “Add 10 Tech Words,” to keep it simple.
Repo’s here: github.com/chinmay29hub/haiku-readme.
What I Wanna Do Next
I’ve got some plans for HaikuReadme. Maybe add a dark mode button for the website or more word groups, like ones about AI or gaming. Add more customization options in the params and UI like width, height, animated text, etc.
Why I Think It’s Cool
HaikuReadme’s not just another README thing. It’s a way to show you’re a coder with a bit of flair. Whether you’re starting out or a pro, a haiku SVG makes your profile feel special. I love switching to the Cyberpunk theme and seeing what haikus come up—it’s like a tiny surprise every time. It’s small, but it makes GitHub more fun.
Give it a go! Stick a haiku in your README, check out the website, or poke around the code. If you like it, star the repo to help others find it. I’d love your feedback in the comments—any tricks for jazzing up GitHub profiles? Or cool haiku ideas? Let’s make coding a bit more poetic! 😄
Thanks for reading!
