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