feat: add URL Encoder / Query String Builder tool
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Summary
Add a url-tools.html tool with two tabs: a URL encoder/decoder and a visual query-string builder/parser.
Motivation
URL encoding/decoding is a constant need when debugging API calls, reading logs, or sharing links. Combining it with a query-string builder (key-value table ↔ URL) in one page makes it more useful than a plain encode/decode box and meaningfully differentiates it from simple online converters.
Proposed UX
Tab 1 — Encode / Decode
- Textarea input + output
- Mode toggle:
encodeURIComponent(component-safe) vsencodeURI(full-URL-safe) - Encode and Decode buttons; auto-detects direction on paste if one side is empty
- Copy output button
Tab 2 — Query String Builder
- Parse mode: paste a full URL or query string → decompose into an editable key-value table (rows with key input, value input, enabled toggle, delete button)
- Build mode: add rows → live-assembled URL shown above the table
- Copy full URL and copy query-string-only buttons
- "Add row" button; drag-to-reorder rows
Implementation notes
- Category: Code
- Slug:
url-tools - Icon:
🔗 - No npm dependencies —
encodeURIComponent,decodeURIComponent,URL,URLSearchParams, all native - All logic inline in
<script> - Follow
src/_tool-template.htmland runbun run generate:sections,bun run generate:index,bun run generate:faviconafter adding totools.json
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/_tool-template.html and tools.json to understand the single-file tool structure and registration flow. Add url-tools.html with the two described tabs and native URL APIs, then run bun run generate:sections, bun run generate:index, and bun run generate:favicon; done means encoding, parsing, building, copying, row editing, and reordering work in the browser.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript
- Domain
- tooling, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100