Every time I needed a quick color converter or JSON formatter, I'd either:
A) Google it and land on an ad-riddled site that loads 47 trackers
B) Install yet another VS Code extension
C) Write a one-off script and forget where I saved it
So I built all the tools I keep reaching for and put them in one place. No installs. No accounts. No ads. Just browser-based utilities at ogpix-pi.vercel.app/tools.
Here's everything and why each one exists.
Image & Visual Tools
1. OG Image Generator — Create Open Graph preview images with custom text, colors, and layouts. The tool that started this whole project.
2. Favicon Generator — Upload an image, get favicons in all the sizes browsers actually need. ICO, PNG, Apple Touch. The whole set.
3. Image Resizer — Resize and crop images to specific dimensions. Preset sizes for social platforms. Everything runs client-side.
4. Color Palette Generator — Pick a base color, get complementary, analogous, and triadic palettes. Copy hex codes with one click.
5. Screenshot Mockup — Drop in a screenshot, get it wrapped in a browser frame or phone mockup. Great for portfolio sites and READMEs.
Text & Content Tools
6. Markdown Previewer — Write markdown on the left, see rendered HTML on the right. Live preview. Supports GFM.
7. Lorem Ipsum Generator — But not the boring kind. Generate placeholder text by paragraphs, sentences, or words. Pick different styles.
8. Word Counter — Paste text, get word count, character count, reading time, and sentence count. I use this for every blog post.
9. Case Converter — camelCase, snake_case, UPPER_CASE, Title Case, kebab-case. Paste and convert.
10. Text Diff Tool — Paste two blocks of text, see what changed. Highlighted additions and deletions. Like a mini Git diff.
Developer Tools
11. JSON Formatter — Paste ugly JSON, get pretty JSON. Validates too. Catches missing commas before your parser does.
12. Base64 Encoder/Decoder — Encode and decode Base64 strings. Also handles file-to-Base64 for data URIs.
13. URL Encoder/Decoder — Because I can never remember what needs percent-encoding and what doesn't.
14. Hash Generator — MD5, SHA-1, SHA-256. Paste text or upload a file. Useful for verifying downloads.
15. Regex Tester — Write a regex pattern, test it against sample text. Shows matches, groups, and explains the pattern. Saves me from regex101 tab-hopping.
16. JWT Decoder — Paste a JWT, see the header and payload decoded. No libraries needed.
\
CSS & Design Tools
17. CSS Gradient Generator — Pick colors and direction, get the CSS. Linear and radial gradients with live preview.
18. Box Shadow Generator — Tweak offset, blur, spread, and color. Copy the CSS. Visual feedback while you adjust.
19. Border Radius Previewer — Drag corners independently. Get the border-radius shorthand. Helpful for those asymmetric shapes.
Conversion Tools
20. Timestamp Converter — Unix timestamp to human date and back. Shows UTC, local time, and ISO 8601. I check this at least once a week.
21. Unit Converter (CSS) — px to rem, em to px, viewport units. Set your base font size and convert between units.
Why Browser-Based?
Privacy. Your data stays in your browser. I don't want your JSON payloads or your JWTs. There's no backend collecting anything because there's no backend at all for these tools.
And speed. No server round-trips means instant results. Type and see output immediately.
Try Them
All 21 tools are at ogpix-pi.vercel.app/tools. Bookmark it. I add new tools whenever I find myself reaching for something that should just exist in a browser tab.
If there's a tool you wish existed, open an issue or DM me. I'll probably build it next weekend.
Top comments (0)