Building a URL Encoder/Decoder with Live Mode in Next.js

URL encoding is one of those things every developer needs but nobody wants to open a terminal for. I built a browser-based URL encoder/decoder with live processing, mode switching, and zero server calls. Here's how it works under the hood. The live tool is at ultimatetools.io/tools/coding-tools/url-encoder-decoder/. Why encodeURIComponent and not encodeURI? JavaScript gives you two encoding functions, and picking the wrong one is a common source of bugs. encodeURI encodes a full URL but preserves structural characters like :, /, ?, &, =, and #. It's meant for encoding an entire URL string where you want the structure intact. encodeURIComponent encodes everything except letters, digits, and - _ . ! ~ * ' ( ). It's meant for encoding a single value — like a query parameter. encodeURI("https://example.com/search?q=hello world&lang=en") // "https://example.com/search?q=hello%20world&lang=en" // Structure preserved, only the space is encoded encodeURIComponent("hello world&l