A powerful web-based utility for parsing, analyzing, and editing URLs with real-time encoding/decoding capabilities.
- 🔍 URL Parsing: Break down URLs into their components (protocol, host, port, path, hash)
- 🔐 Query Parameter Decoding: Automatically decode URL-encoded query parameters (e.g.,
%20→ space) - ✏️ Live Editing: Edit query parameters in real-time with instant URL recomposition
- 🔄 Automatic Encoding: See both decoded and encoded versions of parameter values
- ➕ Add Parameters: Add new query parameters dynamically
- 🗑️ Delete Parameters: Remove unwanted query parameters
- 📋 Copy to Clipboard: One-click copy of the reconstructed URL
- 🎨 Modern UI: Clean, responsive interface built with TailwindCSS
Simply open index.html in your web browser. No build process or dependencies required!
- Enter or paste a URL (e.g.,
https://example.com/search?q=Hello%20World&category=tech) - Click "Analyze URL" to parse the URL
- View the broken-down components and decoded query parameters
- Edit parameter keys and values directly in the interface
- Add new parameters with the "+ Add Parameter" button
- Delete unwanted parameters with the "Delete" button
- Copy the reconstructed URL with proper encoding
- HTML5: Semantic markup
- TailwindCSS: Utility-first CSS framework (via CDN)
- Vanilla JavaScript: No frameworks, pure JavaScript for URL manipulation
The tool extracts and displays:
- Protocol (e.g.,
https:) - Host (e.g.,
example.com) - Port (if specified)
- Path (e.g.,
/search) - Hash/Fragment (e.g.,
#results)
- Decoded View: Shows human-readable values (e.g., "Hello World")
- Encoded Display: Shows URL-encoded version (e.g., "Hello%20World")
- Live Updates: Changes reflect immediately in the reconstructed URL
- Special Characters: Properly handles spaces, ampersands, slashes, and other special characters
This project is available under the MIT License - see the LICENSE file for details.