A comprehensive collection of 80+ browser-based tools built with Next.js, TypeScript, and Tailwind CSS. Every tool runs entirely in your browser — no uploads, no servers, no accounts required.

• Background Removal: AI-powered background removal using ONNX Runtime Web
• Phone Mockups: Place screenshots into iPhone/Android device frames
• Image Compression: Compress images while maintaining quality
• Format Converter: Convert between JPG, PNG, WebP, GIF, BMP, TIFF, SVG
• Color Correction: Adjust brightness, contrast, saturation, hue, and more
• Color Converter: Convert between HEX, RGB, and HSL with live preview
• SVG Tools: Edit and manipulate SVG vector graphics

• PDF Tools: Merge, split, compress, and manipulate PDF files
• Zip Tools: Create, extract, and manage ZIP archives
• CSV/Excel Viewer: View and edit CSV and Excel files
• File Converter: Convert between CSV, TSV, JSON, XML, and YAML

• Video Editor: Trim, convert, and edit video files
• Audio Editor: Edit and process audio files
• Mic & Camera Tester: Check your camera preview and test microphone levels

• Text Case Converter: Convert between uppercase, lowercase, camelCase, snake_case, kebab-case, and more
• Text Counter: Count words, characters, lines, and paragraphs
• Code Formatter: Format and beautify code with syntax highlighting
• Rich Editor: WYSIWYG rich text editing
• Lorem Ipsum Generator: Generate placeholder text
• Typing Test: Measure your WPM and accuracy
• Text Diff Viewer: Compare two texts and highlight changes
• Markdown Editor: Live split-pane Markdown preview
• HTML Formatter: Prettify or minify HTML code
• Notepad: Auto-saving scratchpad stored locally
• Text Sorter: Sort, deduplicate, shuffle, and filter lines of text
• Morse Code Converter: Encode and decode Morse code
• Word Frequency Analyzer: Analyze word frequency with CSV export
• Markdown to HTML: Convert Markdown to clean HTML output
• Text Repeater: Repeat any text N times with a custom separator

• JSON Formatter: Format, validate, minify, and sort JSON
• YAML ↔ JSON: Convert between YAML and JSON formats
• URL Encoder/Decoder: Percent-encode and decode URLs
• Text to Binary: Convert text to binary, hex, octal, and decimal
• JSON to CSV: Convert JSON arrays to CSV format
• Base64 Tools: Encode or decode Base64 strings and files
• QR Code Generator: Generate QR codes for URLs, text, WiFi, and vCards
• Barcode Generator: Generate CODE128, EAN-13, UPC-A, CODE39 barcodes
• QR Code Scanner: Scan QR codes via camera or image upload
• Barcode Scanner: Scan barcodes via camera or image upload
• Charts: Create bar, line, pie, and other chart types
• Fake Data Generator: Generate realistic JSON/CSV test data (names, emails, addresses, and more)

• Invoice Generator: Create professional invoices
• Unit Converter: Convert between measurement units
• Calculator: Basic and scientific calculator modes
• Time Zone Converter: Convert times between time zones
• Age Calculator: Calculate exact age in years, months, and days
• Number Base Converter: Convert between binary, octal, decimal, and hex
• Expense Tracker: Track expenses with budgets and category reports
• Currency Converter: Convert between major currencies with cached daily rates
• Loan Calculator: Monthly payment and amortization schedule calculator
• Percentage Calculator: Five calculation modes for percentage math
• Aspect Ratio Calculator: Calculate and scale aspect ratios
• BMI Calculator: Body Mass Index in metric or imperial with healthy range
• Tip Calculator: Bill splitting and tip calculation per person

• Todo List: Organize tasks with filters and completion tracking
• Timer & Countdown: Timer with fullscreen mode
• Pomodoro Timer: Focus sessions with break tracking and daily stats
• World Clock: Real-time clocks for multiple cities and time zones
• Stopwatch: Precision stopwatch with lap tracking and CSV export
• Habit Tracker: Daily habit tracking with streaks, stored locally

• UUID Generator: Generate UUID v4 identifiers
• JWT Decoder: Decode and inspect JSON Web Tokens
• Hash Generator: Generate MD5, SHA-256, SHA-512 hashes
• Password Generator: Generate secure passwords with custom rules
• Password Strength: Analyze password entropy and crack time
• Text Encryption: AES-256-GCM encryption via the Web Crypto API
• HTTP Status Codes: Reference for all 1xx–5xx status codes
• Unix Timestamp Converter: Epoch ↔ human-readable date
• Regex Tester: Test regular expressions with live match highlighting
• Cron Parser: Parse cron expressions and show next scheduled runs
• CSS Minifier: Minify or beautify CSS code
• SQL Formatter: Format and beautify SQL queries

• CSS Gradient Generator: Visual linear, radial, and conic gradient builder
• Color Palette Generator: Generate harmonious palettes from a base color
• Image Resizer: Resize to exact dimensions, percentage, or preset sizes
• Screen Recorder: Record your screen, window, or tab — no extensions needed
• Color Contrast Checker: WCAG AA/AAA accessibility contrast ratio checker
• Color Blindness Simulator: Preview images as seen with deuteranopia, protanopia, tritanopia, and achromatopsia
• EXIF Viewer: View camera metadata, GPS coordinates, and shooting settings
• Emoji Picker: Browse, search, and copy Unicode emojis

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn + Radix UI
• State Management: Zustand
• Icons: Lucide React
• Animations: Framer Motion
• Testing: Vitest + React Testing Library

• Node.js 20.0 or higher
• npm, yarn, pnpm, or bun

git clone https://github.com/aghyad97/browserytools.git
cd browserytools

bun install

bun dev

Navigate to http://localhost:3000.

bun run test          # Run all tests
bun run test:watch    # Watch mode
bun run test:coverage # Coverage report

src/
├── app/                    # Next.js App Router pages
│   ├── (home)/            # Home page
│   ├── blog/              # Blog listing and posts
│   └── tools/             # Individual tool pages
├── components/            # React components
│   ├── ui/               # Reusable UI components (shadcn)
│   └── [ToolName].tsx    # Tool-specific components
├── lib/                  # Utility functions
│   ├── tools-config.ts   # Tool registry
│   ├── blog-data.ts      # Blog post metadata
│   └── search-utils.ts   # Fuzzy search
└── store/                # Zustand stores

1. Add the tool entry to src/lib/tools-config.ts
2. Create the page at src/app/tools/[tool-name]/page.tsx
3. Create the component at src/components/[ToolName].tsx
4. The tool will automatically appear in the homepage grid and sitemap

1. Fork the repository and create a feature branch
2. Make your changes with TypeScript types
3. Run bun run test to ensure nothing is broken
4. Submit a PR with a clear description

Open an issue with a clear description, steps to reproduce, and browser/OS info.

• ⭐ Star the repository on GitHub
• GitHub Sponsors: Sponsor us
• Ziina: One-time donation

MIT License — see LICENSE for details.

• GitHub Issues: Open an issue
• Twitter: @aghyadev

Made with ❤️