Developer tools / URL

Encode a URL component correctly.

Encode text for one part of a URL, or decode percent-encoded text. This tool explains the difference between a component and a complete URL.

Read the quick guide

Private by design
Encoding and decoding happen in this browser. Your input is not sent to a server.

Free online tool

URL component encoder and decoder

Enter text, then choose an operation.

0 characters
Encode text to use as one URL component, or paste a percent-encoded component to decode.
Ready when you are.
Processes one URI component; it does not encode or validate a complete URL.

A practical guide

Encode the part, not the whole address.

URL encoding is about representing data safely in a URL component. Choosing the wrong encoding function can change the structure of a link.

By Amit Kumar Das Published

What is a URL component?

A URL has structural parts such as its scheme, host, path, and query. A value inserted into one of those parts is a component. For example, when a search term is the value of a query parameter, encode that value rather than encoding the entire URL.

Text value

green tea & honey

Encoded component

green%20tea%20%26%20honey

In JavaScript, encodeURIComponent() encodes a component and decodeURIComponent() decodes one. For example, a complete URL can be assembled by encoding only the dynamic value:

const searchTerm = encodeURIComponent("green tea & honey");
const url = `/search?q=${searchTerm}`;

Spaces and plus signs are not interchangeable everywhere

This tool uses JavaScript's URI-component functions. They encode a space as %20, and decoding leaves a literal + as a plus sign. Some form and query-string conventions represent spaces as +; that is a different convention. Do not assume this component decoder parses form data or query parameters.

Do not encode an entire URL as one component

Encoding a full URL with encodeURIComponent() also encodes its separators, such as :, /, and ?. The result is text representing one value, not a navigable URL with the same structure. Encode individual dynamic path segments or parameter values at the point where they are added.

What this tool does and does not do

The tool applies the browser's encodeURIComponent() or decodeURIComponent() function to the full input as one component. It handles Unicode using the browser's built-in implementation and reports malformed percent sequences or invalid encoded UTF-8 as errors. It does not parse URLs, encode a complete address, convert form-style + spaces, validate a destination, or make a URL safe to trust. Encoding is not encryption or a security control.

Continue learning

Explore the other browser-based developer tools or browse the practical tutorial library.

Is my input uploaded or stored?

No. Encoding and decoding happen locally in your browser. This tool does not submit your text to TeachyLeaf.

Why does decoding fail?

The input may contain an incomplete or invalid percent escape, or bytes that are not valid UTF-8. Check that each percent sign is followed by two hexadecimal digits and that the encoded text represents valid UTF-8.

Does encoding make a URL safe?

No. Component encoding changes how text is represented. It does not verify a destination, prevent phishing, or replace validation and security checks in an application.