URL Encoder/Decoder

Convert text to URL-safe encoding or decode percent-encoded URLs.

Open tool Back to tools
// about

About this Tool

Web addresses cannot contain spaces or special symbols. This tool converts special characters into safe web format (% symbols) and turns encoded URLs back into normal readable text.

How to use it

  1. Paste the web link or text you want to convert.
  2. Choose 'Encode' for web safety or 'Decode' to read normal text.
  3. Click 'Run' and copy your updated URL.

Why people use this tool

  • Fixes broken web links containing spaces, accents, or non-English characters.
  • Decodes confusing web address links so you can see where they really go.
  • Fast instant conversion right inside your browser.

Frequently Asked Questions

Why do URLs have symbols like %20?

Web browsers replace spaces with %20 so web servers understand where the link starts and ends.

When should I encode a URL?

Encode whenever your link parameter contains spaces, question marks, or special non-English letters.

Is this tool free to use?

Yes, completely free with no limits on how many URLs you convert.

Guides · Encoding · 9 min read

Base64 Encoding Explained: How It Works, Where It Is Used and Common Myths

Email attachments, image data URIs and JWT tokens all rely on Base64. This guide explains exactly what Base64 does, why the output is longer than the input, and when you should and should not use it.

All computer data is ultimately bytes. Yet many channels can only carry text safely: email bodies, HTTP headers, JSON documents and URLs. If you push raw image bytes or ciphertext through those channels, control characters and line breaks can corrupt the data, or an intermediate system may rewrite it.

Man   → TWFu
Hi    → SGk=
한    → 7ZWc
안녕  → 7JWI64WV
Learn how Base64 turns 3 bytes into 4 characters, what the trailing = means, how Base64URL differs, and why Base64 is not encryption.
Read guide →

Related guides

Encoding 7 min read

URL Encoding (Percent-Encoding) Guide: Why Text Turns Into %20 and %EC%95%88

Which characters are allowed in a URL, how percent-encoding works, why spaces become %20 or +, and how to avoid double encoding.

Read guide
QR & barcodes 7 min read

Making QR Codes That Scan: Error Correction Levels, Print Size and Barcodes

How QR codes work, choosing error correction (L, M, Q, H), minimum print size and quiet zone, why codes fail to scan, and QR vs product barcodes.

Read guide
Build it with AI

Build this tool yourself with AI

Want your own version of this tool? Copy the work-order prompt into an AI chat, or save the skill file for an AI coding agent. Both describe the features, edge cases and test cases we used when building it.

AI work-order prompt

Paste it as-is into an AI chat such as Claude, ChatGPT or Gemini.

You are an experienced full-stack web developer. Build a web tool called "URL Encoder/Decoder" that meets the requirements below.

## Goal

Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.

## Core features

- Encode and decode modes
- Component mode (encodeURIComponent) or full-URL mode (encodeURI)
- Option to write spaces as %20 or +
- Break a query string into a key/value table
- Copy result

## Inputs

- A URL or a value to encode
- Mode and space-style option

## Outputs

- Encoded or decoded result
- List of query parameters with decoded values

## Edge cases and handling rules

- Warn when double encoding such as %2520 is detected
- Keep malformed sequences (%G1, trailing %) and show a warning instead of crashing
- Let the user decide whether + means a space
- Handle byte sequences that are not valid UTF-8

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- Component-encoding 'a b&c=d' gives 'a%20b%26c%3Dd'
- '안녕' gives '%EC%95%88%EB%85%95'
- Full-URL mode keeps :, /, ? and = in 'https://x.com/a?q=1'

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

Skill (SKILL.md)

Save it as .claude/skills/build-url-codec/SKILL.md for AI coding agents such as Claude Code to reuse whenever you build or change this tool.

---
name: build-url-codec
description: Use when building or changing a URL Encoder/Decoder tool. Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.
---

# Build: URL Encoder/Decoder

## Goal

Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- Encode and decode modes
- Component mode (encodeURIComponent) or full-URL mode (encodeURI)
- Option to write spaces as %20 or +
- Break a query string into a key/value table
- Copy result

## Inputs

- A URL or a value to encode
- Mode and space-style option

## Outputs

- Encoded or decoded result
- List of query parameters with decoded values

## Rules

- Warn when double encoding such as %2520 is detected
- Keep malformed sequences (%G1, trailing %) and show a warning instead of crashing
- Let the user decide whether + means a space
- Handle byte sequences that are not valid UTF-8
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] Component-encoding 'a b&c=d' gives 'a%20b%26c%3Dd'
- [ ] '안녕' gives '%EC%95%88%EB%85%95'
- [ ] Full-URL mode keeps :, /, ? and = in 'https://x.com/a?q=1'

Tips for working with AI

  • Tell the AI your stack (for example React, Vue or plain HTML) on the first line so the code matches your project.
  • Ask it to run the listed test cases and show the results before you accept the code.
  • Never paste real secrets, customer data or API keys into the prompt; use sample values instead.