encodeURIComponent tool
A space becomes %20, & becomes %26 and = becomes %3D, so hello world & café turns into hello%20world%20%26%20caf%C3%A9 and fits inside one query value. Every value gets encodeURIComponent rules; decoding reverses them. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Text
- hello world & café
- Output
- hello%20world%20%26%20caf%C3%A9
- Calculation mode
- Encode
- Input
- hello world & café
- Length
- 31
When you build a query string, one unescaped ampersand or space can split a parameter and break an integration. This encodeURIComponent tool applies the same rules as JavaScript encodeURIComponent and decodeURIComponent: reserved characters become percent-encoded sequences on the way out, and valid %XX sequences become readable text on the way back.
What encodeURIComponent actually protects
A full URL is not a single opaque blob. Schemes, path separators, query delimiters, and fragment markers have structural meaning. encodeURIComponent is the function you use when the value must travel as data inside that structure without rewriting the structure itself. Spaces become %20, ampersands become %26, equals signs become %3D, and non-ASCII text such as accented letters or emoji is expanded into UTF-8 percent sequences so proxies and servers do not misread byte boundaries.
That is different from encodeURI, which leaves many reserved characters alone because it assumes you are encoding a whole address. If you encode an entire https:// link with component rules, the colons and slashes turn into % sequences and the link stops working. If you leave a free-text search term unencoded and paste it after ?, an embedded & looks like a new parameter.
This tool always uses component semantics so each value is safe to place after a key, between path segments when the segment is data, or inside a form body that later becomes a query.
How to use it and read the result
Send a text field with the string you care about and an optional mode field set to encode or decode. Encode is the default: the engine runs encodeURIComponent on the input and returns mode, the original input, the transformed output, and the output length so pipelines can assert size budgets without a second pass. Decode runs decodeURIComponent and returns the same shape with the recovered string in output.
Empty strings are valid and round-trip to empty strings. Missing text also fails validation before any transform runs.
Where component encoding fits real workflows
Search and filter UIs build shareable links from user-typed phrases that include spaces, quotes, and non-Latin scripts; encoding each field before assembly keeps the shared link stable across email clients and chat apps that rewrite bare URLs. Log and support tools often show raw request lines with percent sequences; decoding those values recovers the original search terms or file names for investigation without pasting into a throwaway console.
Data migrations reverse double-encoded columns when older exporters encoded twice, or apply a single consistent component encode when storing values that will later be spliced into redirects. Teaching and code-review checklists use a known-good encodeURIComponent reference so junior developers can compare language-specific helpers against the JavaScript baseline and spot libraries that treat plus signs or tildes differently.
What you can do with it
Safe query parameter values
Encode emails, names, and free-text filters before appending them to ?key=value pairs so reserved characters never split the query string.
Decode request logs and exports
Turn percent-encoded path or query fragments from access logs and CSV exports back into readable UTF-8 for support and analytics.
Cross-stack parity checks
Compare another language's URL encoder against JavaScript encodeURIComponent output so mixed microservices agree on escape rules.
FAQ
What is the difference between encodeURIComponent and encodeURI?
encodeURIComponent escapes reserved characters such as &, =, ?, and / so a value is safe as data. encodeURI leaves those structure characters alone for whole URLs. This tool always uses component semantics.
What happens if decode input is malformed?
Fix the string or treat it as opaque data instead of decoding.
Is the encodeURIComponent tool free?
The browser tool is free and runs locally.
Does it handle Unicode and emoji?
Yes. Encoding uses UTF-8 percent sequences matching JavaScript encodeURIComponent, so accented text and emoji round-trip correctly when decoded.
Should I encode the whole query string or each value?
Encode each value on its own, then join them with plain & and = signs. Encoding an already built query string escapes the separators too, so the receiving server can no longer tell where one value ends and the next begins.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/enc/url-component \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"hello world & café"}'const res = await fetch("https://api.kit.forhosting.com/enc/url-component", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "hello world & café"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/enc/url-component",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "hello world & café"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/enc/url-component", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"hello world & café"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"hello world & café"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/enc/url-component", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"text": "hello world & café"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "enc.url_component",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Use it to prepare values before they enter a URL, to reverse encoding from logs or third-party payloads, and to get a deterministic result whether you run free in the browser or call the KIT API.
How to call the endpoint and read the result
Numbers and booleans are coerced to text the same way JavaScript stringifies them before encoding, which helps quick API tests. Malformed percent sequences on decode, such as a lone percent sign or an incomplete %X tail, raise invalid_input with a message that names the decode failure; those tasks are not billed. Because the path is pure parse with no network, model, clock, or random source, the same pair of text and mode always yields the same JSON object on the free browser tool and on the paid API. At $0.002 per successful request the price tracks a tiny edge transform, so you can encode thousands of query values in a cleanup job without negotiating tiers. Prefer encoding each value, then joining with literal & and = characters, rather than encoding an already-built query string, so delimiters stay structural and only payload characters are escaped.
Where component encoding fits real workflows
Outbound webhooks are the classic case: a customer email, ticket subject, or free-text tag must sit in a callback URL without breaking the receiver's parser.
Technical questions
Can I encode and decode with the same endpoint?
Yes. Set mode to encode (default) or decode. The response always includes mode, input, output, and length.