ToolHarbor

A fast, SEO-optimized collection of developer utilities built with Next.js. Each tool is designed to work client-side, load instantly, and provide real value to developers.

All tools run fully in your browser — your input stays on your device.

Live site: toolharbor.dev (browse tools: toolharbor.dev/tools)

Tech Stack

• Framework: Next.js 16.1 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Rendering: Static Site Generation (SSG)
• Hosting: Vercel

Available Tools (66)

Formatters & Minifiers

Tool	Description
JSON Formatter	Format, validate, and beautify JSON data with syntax highlighting
SQL Formatter	Format and beautify SQL queries with proper indentation
YAML Formatter	Format, validate, and beautify YAML data with key sorting and custom indentation
XML Formatter	Format, validate, and beautify XML data with syntax validation
HTML Formatter	Format, beautify, and minify HTML code with proper indentation
HTTP Header Formatter	Normalize HTTP headers and convert between raw headers and JSON format
JSON Minifier	Minify and compress JSON data by removing all unnecessary whitespace
HTML Minifier	Minify HTML code by removing whitespace, line breaks, and unnecessary characters
CSS Minifier	Minify CSS code by removing comments, whitespace, and unnecessary characters
SQL Minifier	Minify SQL queries by removing whitespace and compressing to a single line
XML Minifier	Minify XML data by removing whitespace and line breaks with validation

Encoders & Decoders

Tool	Description
Base64 Encoder	Encode and decode Base64 strings instantly
URL Encoder/Decoder	Encode and decode URLs with percent-encoding
HTML Encoder/Decoder	Encode and decode HTML entities to prevent XSS and display HTML safely
JWT Decoder	Decode and inspect JSON Web Tokens instantly
URL Parser	Parse any URL into protocol, host, path, query parameters, and hash
User Agent Parser	Parse user agent strings to identify browser, OS, device type, and rendering engine
Cron Expression Parser	Parse and explain cron expressions in plain English with next run times
HTTP Status Code Lookup	Look up any HTTP status code with descriptions, categories, and search
MIME Type Lookup	Look up MIME types by file extension or content type with a searchable developer reference
Unicode Escape/Unescape	Escape text to \uXXXX Unicode sequences or unescape them back to readable text

Generators

Tool	Description
UUID Generator	Generate random UUIDs (v4) for your applications
Hash Generator	Generate MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes
HMAC Generator	Generate HMAC-SHA256, HMAC-SHA384, and HMAC-SHA512 with a secret key
Slug Generator	Generate clean, URL-friendly slugs from any text
Query String Builder	Build URL query strings from key-value pairs or parse existing URLs
Lorem Ipsum Generator	Generate placeholder text by paragraphs, sentences, or words
Cron Expression Generator	Generate cron expressions visually with an easy-to-use schedule builder
Password Generator	Generate strong, secure random passwords with customizable length and character options
JWT Generator	Generate and sign JSON Web Tokens (JWT) for testing with HS256, HS384, HS512
NanoID Generator	Generate cryptographically secure NanoID-style random IDs with custom alphabet
RSA Key Pair Generator	Generate RSA 2048/4096-bit key pairs in PEM format using Web Crypto API

Converters

Tool	Description
CSV to JSON Converter	Convert between CSV and JSON formats easily
JSON to YAML Converter	Convert between JSON and YAML formats instantly
JSON to CSV Converter	Export JSON arrays to CSV for Excel and spreadsheets
JSON to TypeScript	Convert JSON data to TypeScript interfaces or type aliases instantly
JSON Flatten/Unflatten	Flatten nested JSON to dot-notation keys or unflatten back to nested structure
NDJSON Converter	Convert between JSON arrays and NDJSON (Newline Delimited JSON) format
Timestamp Converter	Convert Unix timestamps to dates and vice versa
Timestamp Batch Converter	Convert multiple Unix timestamps to dates at once with timezone toggle
Case Converter	Convert text between camelCase, PascalCase, snake_case, kebab-case, and more
Color Converter	Convert colors between HEX, RGB, and HSL formats with live preview
Number Base Converter	Convert numbers between binary, decimal, hexadecimal, and octal instantly
.env to JSON Converter	Convert .env environment variable files to JSON and back instantly
cURL to Fetch Converter	Convert curl commands to JavaScript fetch() code with headers, body, and auth
Text to ASCII Converter	Convert text to ASCII codes (decimal, hex, binary, octal) or codes back to text

Text Tools

Tool	Description
Word & Character Counter	Count words, characters, sentences, and paragraphs with reading time
Find & Replace	Find and replace text with regex, case sensitivity, and whole word matching
Remove Duplicates	Remove duplicate lines from any list with trim, case matching, and sorting
Text Sorter	Sort lines alphabetically, by length, or randomly with case and trim options
Line Numbering	Add line numbers to any text with configurable format, padding, and start number
Text Reverser	Reverse text by characters, words, or lines instantly
Text Diff Checker	Compare two texts and see differences highlighted line by line

Testers & Validators

Tool	Description
Regex Tester	Test and debug regular expressions with real-time matching
JSON Schema Validator	Validate JSON data against a JSON Schema to check structure and types
JSON Diff	Compare two JSON objects and see added, removed, and changed values highlighted

Preview

Tool	Description
Markdown Preview	Preview Markdown as rendered HTML in real-time
CSV Viewer	View and preview CSV data as a formatted table with delimiter support
Base64 Image Viewer	Preview base64 encoded images with auto format detection, dimensions, and download

AI Tools

Tool	Description
LLM Token Counter	Estimate token counts for GPT-4o, Claude, Llama, and Gemini models side by side
Context Window Calculator	Calculate how much of an LLM context window your prompts use with visual breakdown
Prompt Template Formatter	Create reusable prompt templates with {{variables}} and fill them via a dynamic form
AI Agent Config Generator	Generate CLAUDE.md, .cursorrules, copilot-instructions.md, and more from your stack
AI Tool Schema Builder	Build function calling schemas for OpenAI and Anthropic Claude visually
JSON to TOON Converter	Convert JSON to TOON (Token-Oriented Object Notation) and see token savings
TOON Formatter & Validator	Validate TOON data and convert it back to JSON with syntax checking

Getting Started

Prerequisites

• Node.js 20+
• Bun (recommended) or npm/yarn/pnpm

Installation

cd toolharbor
bun install

Development

bun dev

Open http://localhost:3000 to view the app.

Build

bun run build
bun start

Project Structure

toolharbor/
├── app/
│   ├── layout.tsx              # Root layout
│   ├── page.tsx                # Homepage
│   ├── globals.css             # Global styles
│   ├── sitemap.ts              # Auto-generated sitemap
│   ├── robots.ts               # Robots.txt config
│   ├── cookie-policy/          # Cookie policy page
│   ├── privacy-policy/         # Privacy policy page
│   └── [lng]/
│       └── tools/
│           ├── page.tsx            # Tools index page
│           ├── json-formatter/     # Each tool has its own folder
│           ├── base64-encoder/
│           └── ...                 # 66 tools total
├── components/
│   ├── Header.tsx              # Site header
│   ├── Footer.tsx              # Site footer
│   ├── ToolLayout.tsx          # Shared tool page layout
│   ├── ToolCard.tsx            # Tool card for listings
│   ├── ToolsDirectory.tsx      # Tools index directory
│   ├── JsonLd.tsx              # JSON-LD structured data
│   ├── tool-sections/          # Reusable SEO content sections
│   │   ├── ToolFeatures.tsx
│   │   ├── HowToUse.tsx
│   │   ├── ToolExamples.tsx
│   │   ├── ToolExplanation.tsx
│   │   ├── ToolFAQ.tsx
│   │   └── AdSlot.tsx
│   └── ui/                     # Base UI components
│       ├── Button.tsx
│       ├── Card.tsx
│       ├── CopyButton.tsx
│       ├── Textarea.tsx
│       ├── ReadOnlyTextarea.tsx
│       ├── Input.tsx
│       ├── Select.tsx
│       ├── ModeToggle.tsx
│       ├── SwapButton.tsx
│       ├── ErrorMessage.tsx
│       └── InfoBox.tsx
├── lib/
│   ├── seo.ts                  # SEO utilities
│   ├── utils.ts                # General utilities
│   ├── tools-registry.ts       # Single source of truth for all tools
│   └── tools/                  # Pure tool logic (one file per tool)
│       ├── json.ts
│       ├── base64.ts
│       ├── uuid.ts
│       └── ...
└── public/
    ├── ads.txt
    └── symbol-boat.svg

Adding a New Tool

1. Create folder: app/tools/<tool-slug>/
2. Add files:
   • page.tsx -- Next.js entry with metadata
   • <ToolName>Tool.tsx -- Interactive UI component
   • content.ts -- SEO content (features, steps, examples, FAQ)
3. Add logic to lib/tools/<tool>.ts
4. Export from lib/tools/index.ts
5. Register in lib/tools-registry.ts -- this automatically updates the tools index page, sitemap, and homepage

Each tool page includes:

• H1 title with primary keyword
• Tool UI (above the fold)
• Features list
• How to use steps
• Input/output examples
• Explanation (300-600 words)
• FAQ section
• Related tools links

Scripts

Command	Description
bun dev	Start development server
bun run build	Build for production
bun start	Start production server
bun run lint	Run ESLint
bun run format	Format code with Prettier
bun run format:check	Check code formatting

Design Principles

• Speed first: Minimal JS, no heavy libraries, Lighthouse > 90
• Client-side: Tools work offline, no backend required
• SEO-optimized: Unique titles, descriptions, structured data
• Clean UI: Dark mode, minimal design, copy buttons everywhere

License

MIT License. See LICENSE for details.