🛠️ DevTools Hub

A comprehensive, open-source collection of 80+ developer tools — all running directly in your browser.

Visit · Report Bug · Request Feature

✨ Features

🔒 Privacy First — All processing happens client-side. Your data never leaves your browser.
🚀 80+ Tools — Minifiers, formatters, converters, generators, beautifiers, testers, and more.
🎨 Dark/Light Theme — Automatic theme switching with persistent preference.
📱 Fully Responsive — Works on desktop, tablet, and mobile devices.
🔍 Smart Search — Find tools instantly with real-time search and filtering.
⭐ Favorites — Save your most-used tools for quick access.
📂 Category Browsing — Explore tools organized into logical categories.
⚡ Zero Dependencies — No sign-ups, no accounts, no tracking.
🌐 Open Source — Fully transparent and community-driven.

🛠️ Tools Overview

🎨 CSS & Style Tools (5)

Tool	Description
CSS Minifier	Compress and optimize CSS code
CSS Beautifier	Format and prettify CSS code
Gradient Generator	Create beautiful CSS gradients
Box Shadow Generator	Design and preview box shadows
SVG to CSS Converter	Convert SVG to CSS background/mask

⚡ JavaScript Tools (4)

Tool	Description
JavaScript Minifier	Minify JavaScript for production
JavaScript Beautifier	Format and prettify JavaScript code
HTML to JSX Converter	Convert HTML to JSX for React
cURL to Code	Convert cURL commands to code

📄 HTML & Markup Tools (4)

Tool	Description
HTML Minifier	Clean and compress HTML markup
HTML Beautifier	Format and prettify HTML code
Markdown to HTML	Convert Markdown to HTML
Favicon Generator	Generate favicons from images

📦 Data Tools — JSON / YAML / XML / CSV (12)

Tool	Description
JSON Formatter	Format and validate JSON data
XML Formatter	Format and validate XML data
YAML Formatter	Format and validate YAML data
CSV Formatter	Format and validate CSV data
TOML Formatter	Format and validate TOML files
XML to JSON	Convert XML to JSON format
YAML to JSON	Convert YAML to JSON format
JSON to XML	Convert JSON to XML format
CSV to JSON	Convert CSV to JSON format
TOML to JSON	Convert TOML to JSON format
PHP Array to JSON	Convert PHP arrays to JSON
JSON Schema Generator	Generate JSON Schema from data

🔐 Encoders & Decoders (8)

Tool	Description
Base64 Encoder/Decoder	Encode/decode text to Base64
URL Encoder/Decoder	Encode/decode URLs
HTML Entity Encoder/Decoder	Convert HTML entities
JWT Decoder	Decode and inspect JWT tokens
JWT Generator	Generate and sign JWT tokens
Unicode Converter	Convert between Unicode encodings
ASCII Converter	Convert text to ASCII codes
MIME Type Validator	Validate and lookup MIME types

✨ Generators (10)

Tool	Description
UUID Generator	Generate UUID v4, v5 and others
Password Generator	Generate strong secure passwords
QR Code Generator	Generate QR codes from text
Robots.txt Generator	Generate robots.txt files
Sitemap Generator	Generate XML sitemaps
Random Number Generator	Generate random numbers/strings
Cron Expression Generator	Generate cron expressions
Barcode Generator	Generate barcode formats
OpenAPI Generator	Generate OpenAPI documentation
Mock API Generator	Generate mock REST APIs

📝 Text & String Tools (9)

Tool	Description
Regex Tester	Test regex with matching and groups
Text Case Converter	Convert between text cases
Word Counter	Count words, characters, sentences
Diff Checker	Compare two texts side by side
JSON Diff Checker	Compare JSON objects
Lorem Ipsum Generator	Generate placeholder text
Remove Duplicate Lines	Remove duplicate lines from text
Slug Generator	Generate URL-friendly slugs
Line Sorter	Sort lines alphabetically/numerically

🔄 Converters (7)

Tool	Description
Color Converter	Convert between color formats
Unit Converter	Convert between measurement units
Timestamp Converter	Convert Unix timestamps to dates
Number Base Converter	Convert between number bases
Currency Converter	Convert between currencies
File Size Converter	Convert between file sizes
Roman Numeral Converter	Convert Roman to Arabic numerals

🗄️ Database & DevOps (5)

Tool	Description
SQL Formatter	Format and beautify SQL queries
Docker Run to Compose	Convert Docker commands to Compose
K8s Secret Decoder	Decode Kubernetes secrets
Chmod Calculator	Calculate Linux file permissions
Subnet Calculator	Calculate CIDR ranges

🛡️ Security & Crypto (10)

Tool	Description
SSL Checker	Check SSL/TLS certificate details
Password Strength Checker	Test password strength
Email Validator	Validate email addresses
Hash Generator	Generate MD5, SHA-1, SHA-256
Hash Verifier	Verify file/text integrity
RSA Key Pair Generator	Generate RSA keys
Bcrypt Generator	Generate bcrypt hashes
HMAC Generator	Generate HMAC hashes
AES Encryptor/Decryptor	Encrypt with AES-256-GCM
Certificate Decoder	Decode SSL/TLS certificates

⏰ Date & Time Tools (5)

Tool	Description
Cron Validator	Validate cron expressions
ETA Calculator	Calculate estimated completion time
Date Difference Calculator	Calculate date differences
Timezone Converter	Convert between timezones
Text Statistics	Get detailed text statistics

🌐 Network & Lookup (3)

Tool	Description
IP Lookup	Get IP address information
User Agent Parser	Parse user agent strings
MAC Address Lookup	Look up MAC addresses

🔧 Miscellaneous (4)

Tool	Description
HTTP Status Codes	Reference all HTTP status codes
Emoji Picker	Search and copy emojis
BIP39 Mnemonic Generator	Generate seed phrases
Benchmark Tool	Measure code/API performance

Total: 80+ Tools and counting! 🚀

🏗️ Tech Stack

Technology	Used for
Next.js 14	Framework — App Router
TypeScript	Programming language
TailwindCSS	Styling + CSS Variables
Framer Motion	Animations
Font Awesome	Icons
Vercel	Deployment

📦 Project Structure

devtools-hub/
├── app/
│   ├── (tools)/
│   │   ├── category/[slug]/        # Generic category page
│   │   ├── css-minifier/           # CSS Minifier
│   │   ├── json-formatter/         # JSON Formatter
│   │   ├── color-converter/        # Color Converter
│   │   ├── regex-tester/           # Regex Tester
│   │   └── ...                     # Other tools
│   │
│   ├── components/
│   │   ├── Header.tsx              # Navigation with dropdown
│   │   ├── Footer.tsx              # Footer with newsletter
│   │   ├── ToolCard.tsx            # Tool card component
│   │   └── ...
│   │
│   ├── lib/
│   │   └── utils/
│   │       ├── tools.ts             # All tools data
|   |   └── tools/
│   │       ├── <tool-category>      # Category tools listing
│   │         ├── <tool-name>.ts     # Tool utility
|   |         └── ...                # Other tools
|   |       └── ...                  # Other categories
│   │
│   ├── ...
│   |
|   |── styles/
|   │   └── globals.css                  # Global styles
|   |
│   └── layout.tsx                   # Root layout
│
├── public/
│   └── assets/
│       └── icons/
│
├── ...

🚀 Getting Started

Prerequisites

Node.js 18.17 or later
npm, yarn, or pnpm

Installation

# Clone the repository
git clone https://github.com/zytherdev/devtools-hub.git

# Enter the project directory
cd devtools-hub

# Install dependencies
npm install

# Start the development server
npm run dev

Then open http://localhost:3000 in your browser.

Available Commands

Command	Description
`npm run dev`	Start the development server
`npm run build`	Build for production
`npm start`	Start the production server

🧩 Adding a New Tool

1. Add the tool data

Add your tool to app/lib/utils/tools.ts:

{
  id: 'your-tool',
  name: 'Your Tool Name',
  description: 'Brief description of what your tool does.',
  icon: 'fa-solid fa-icon',
  color: '#your-color',
  badge: 'New', // Optional
  href: '/your-tool',
}

2. Create the tool page

Create app/(tools)/your-tool/page.tsx:

'use client'

import { useState } from 'react'
import { ToolPanel } from '@/app/components/ToolPanel'
import { useToast } from '@zyther/react-toastify'

export default function YourTool() {
  // ... your tool implementation
}

3. Add utility functions

Create the utility file:

app/lib/tools/<your-tool-category-id>/<your-tool-name>.ts

4. Add a category if needed

Add the category to the categories array when required.

5. Update navigation

Update app/components/Header.tsx if necessary.

🎨 Themes

DevTools Hub supports both light and dark themes with automatic persistence.

☀️ Light Theme — Clean, bright interface for daytime use.
🌙 Dark Theme — Eye-friendly dark interface for coding sessions.

The selected theme is stored in localStorage and automatically applied on return visits.

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository.
Create a feature branch:
```
git checkout -b feature/amazing-feature
```
Commit your changes:
```
git commit -m "Add amazing feature"
```
Push the branch:
```
git push origin feature/amazing-feature
```
Open a Pull Request.

Development Guidelines

Use TypeScript for all new code.
Follow the existing code style.
Write clean, commented code.
Ensure responsive design.
Test on multiple browsers.
Update documentation as needed.

📄 License

This project is licensed under the MIT License.

See the LICENSE file for details.

🙏 Acknowledgments

Next.js — React framework
TailwindCSS — Utility-first CSS
Font Awesome — Icon library
Framer Motion — Animation library
The open-source community for inspiration

📞 Support

Issues: GitHub Issues
Email: support@devtools.zyther.dev
Twitter: @zytherdev

Built by zytherdev

"Making development tools accessible to everyone."

Website · GitHub · Twitter

Name		Name	Last commit message	Last commit date
app		app
public/assets/icons		public/assets/icons
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation