Hi dev.to community!
I’m a Product Manager who loves clean, single-purpose tools. Last week, I shared my project on Hacker News and was surprised to get 198 points. Many developers shared the same pain point: Unicode symbols are everywhere, but finding their specific encodings (HTML, CSS, JS, UTF-8) is often a mess.
So I built fontgenerator.design.
1. The Problem
Usually, if you need a specific symbol like ≌ (All Equal To), you have to search through fragmented sites or messy Wikipedia tables. You might find the symbol, but not the CSS escape code or the JavaScript string you actually need for your code.
2. The Solution: One Page, All Encodings
I designed this tool to give every symbol its own clean, detailed page. For example, on our Unicode Symbols index, you get:
- One-click Copy: Quick buttons for everything.
- Developer Info: HTML entities, CSS codes, JS strings, and even UTF-8/16 bytes.
- Usage Context: How to use it on different OS and professional software (Word, Excel, etc.).
- Massive Library: Over 3,431 symbols categorized by Math, Tech, UI, and more.
3. Our Tech Stack
To keep it fast and type-safe, we used:
- Framework: Next.js (^16.0.7) with App Router.
- UI: React (^19.1.1).
- Language: TypeScript (^5.9.2).
- Styling: Tailwind CSS (^3.4.17) for that clean, "brutalist" look.
4. Wait, who wrote the code? 🤖
Here is the fun part: I didn't write a single line of this code manually.
I am a Product Manager, and while I understand how things work, I built this entire project using "Vibe Coding" (mostly natural language prompts and AI collaboration). It’s amazing how modern tools allow someone with a PM background to translate a vision into a production-ready tool that actually survived the Hacker News front page.
5. Improved by Community Feedback
Thanks to initial feedback, I’ve already added:
- Improved Search (supports
U+XXXXand fuzzy names). - Fixed Mobile UI (bigger tap targets for symbols).
- Added Font Tips for when symbols show up as "Tofu" boxes (□).
I’m still a "code-newbie" PM, so I’d love to hear from the experts here. What other features or symbols would make your life easier when dealing with Unicode?
If you're interested in my Vibe Coding workflow, let me know in the comments and I'll write a detailed post about it!
Check it out here: fontgenerator.design/symbols
Top comments (1)
This is a really thoughtful and well-executed tool—solving a very real pain point in a clean, developer-first way. I especially like the idea of giving each symbol its own page with all encodings in one place; that’s exactly how utilities like this should work. The fact that you shipped this using AI-driven “vibe coding” as a PM makes it even more impressive and promising for where product development is headed. I’m genuinely interested to see how this evolves, and I’d love to read more about your workflow and future feature ideas.