What is URL encoding and what does URL encoder do?

URL encoding, also called percent-encoding, replaces unsafe characters in a URL with % followed by two hex digits (e.g., space becomes %20, & becomes %26). A URL encoder converts raw URLs or text using encodeURIComponent or encodeURI so browsers and servers parse query strings, paths and fragments correctly per RFC 3986.

How to encode a URL online?

Paste your URL or text into Input URL/Text, choose encodeURIComponent for full encoding or encodeURI to preserve :/?#[]@!$&'()*+,;=, then click Encode. The encoded URL appears in Output instantly. Copy or Download the result.

Paste the percent-encoded URL (e.g., https://example.com/search?q=hello%20world%26lang%3Den) into Input and click Decode. The tool uses decodeURIComponent to restore original characters. If the URL is not valid percent-encoded, it shows an error instead of breaking.

Is this URL encoder free and safe?

Yes, 100% free, client-side, no signup and no server upload. Your URLs never leave the browser. Uses native encodeURIComponent/decodeURIComponent APIs locally, so API keys, tokens and private query strings stay private.

Can I upload a file or load URL with this url decoder?

Yes. Use Upload to load .txt/.csv/.url files via FileReader API, or paste any public text/URL and click URL to fetch via fetch(). Then encode or decode, copy and download. If fetch fails due to CORS, download the file and use Upload instead.

URL Encoder & Decoder - Encode Decode URL Online Free

📥 Input URL/Text

Chars: 0 • Lines: 0 • Size: 0 B

Component encodes everything • URI preserves URL structure

📤 Output URL

Chars: 0 • Lines: 0 • Size: 0 B • Diff: 0

What is URL Encoding? URL Encoder, Percent-Encoding & RFC 3986 Explained

A URL Encoder — also searched as url encoder, encode url online, url encode, percent-encode — converts characters that are not allowed or have special meaning in a URL into a safe format using percent-encoding. Every excluded character becomes % followed by two hexadecimal digits representing its UTF-8 byte, for example space → %20, & → %26, = → %3D, é → %C3%A9. This is defined by RFC 3986, the standard for Uniform Resource Identifiers. Without encoding, a query like https://example.com/search?q=hello world & lang=en would break — the browser would truncate at the space, and the server would parse & lang as a new parameter. Our url encoder fixes that by producing https://example.com/search?q=hello%20world%20%26%20lang%3Den, which browsers and servers decode back losslessly. Whether you search url encoder, url decoder, encode url online, decode url, url escape, url unescape you are asking for the same reversible operation. At html-compiler.com we use the browser's native encodeURIComponent() and encodeURI() — the same APIs trusted by JavaScript, React, and Node — so encoding is spec-compliant, fast, and 100% client-side for privacy.

Original Character	Encoded (percent)	Why Encoded	Example Context
`space`	`%20` (or `+` in form)	Not allowed in URL	`hello world → hello%20world`
`&`	`%26`	Separates query params `&`	`a & b → a%20%26%20b`
`=`	`%3D`	Separates key=value	`x=y → x%3Dy` inside value
`?` `#` `/`	`%3F` `%23` `%2F`	URL delimiters	Encode when part of param value
`é` `😀`	`%C3%A9` `%F0%9F%98%80`	Non-ASCII UTF-8	`café → caf%C3%A9`
`%`	`%25`	Escape character itself	Prevents double-decode bug

Browsers automatically decode percent-encoded URLs in the address bar for readability, but when you copy a link with tracking parameters, share a deep link with spaces, or call fetch('https://api.example.com/search?q=' + encodeURIComponent(userInput)), you must encode. Our tool also decodes via decodeURIComponent() to reverse the process — perfect when you receive utm_source%3Dgoogle%26q%3Dhello%2520world and need the human-readable original. No data leaves your browser.

Why Encode URLs? Top Benefits for Developers, SEO & Security

Unencoded URLs cause silent bugs that are hard to debug. An analytics UTM like ?campaign=summer sale & post=blog would split into two params and corrupt reports. A redirect URL inside another URL — https://app.com/login?next=https://example.com/home?tab=1 — would lose ?tab=1 unless the inner URL is encoded. Security scanners also flag unencoded user input as potential injection. URL encoding solves all of this by making URLs unambiguous and portable across email clients, chat apps, and HTTP servers.

Benefit	How URL Encoder Helps	Who Benefits Most
🔗 Valid Query Params	Encodes `& = + #` inside values so `q=hello world&lang=en` stays one param	Frontend devs building search, filters, pagination
🌐 International URLs	Encodes UTF-8 like `café, naïve, Москва, 日本語` to ASCII-safe % bytes	SEO for non-English sites, i18n links
🔒 Security & Injection	Neutralizes `< > " %` that could break HTML or log injection	Backend devs sanitizing redirects
📧 Shareable Links	Makes links copy-paste safe in email, Slack, WhatsApp without truncation	Marketers sharing UTM campaigns
🔍 SEO & Crawling	Encodes duplicate `?`/`#` so Google indexes canonical URL cleanly	SEO specialists auditing crawl
⚙️ API Reliability	`encodeURIComponent(userInput)` prevents 400 Bad Request on spaces and emojis	API integrators, mobile apps

Conversely, url decoder (via decodeURIComponent) is just as critical: you often need to decode url to debug a 400 error, read a webhook payload, or recover original text from window.location.search. Our single page does both: Encode to ship safely, Decode to read human-friendly.

Features of html-compiler.com URL Encoder & Decoder (Free, Fast, Private)

Inspired by htmlbeautifier.org/css's beloved light card UI but tuned for URL work, our url encoder / url decoder packs everything into one lightweight page — no bloat, no server round-trip:

Triple Input — Paste, Upload, URL: Click Paste to read clipboard via navigator.clipboard.readText(), Upload any .txt/.csv/.url via FileReader API, or paste a public URL and click URL to fetch via fetch(url, {mode:'cors'}) — zero server upload, full privacy.
Dual Mode Encode — Component vs URI: Selector chooses encodeURIComponent(input) for full percent-encoding (recommended for query values, POST bodies, and any free-form text) or encodeURI(input) for whole URLs where you want to preserve : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Explained inline: “Component encodes everything • URI preserves URL structure”.
One-Click Decode with Error Handling: Decode uses decodeURIComponent(input) inside try/catch. For malformed sequences like %2 or stray %, we catch URIError: malformed URI sequence and show a helpful red message instead of crashing. Falls back to decodeURI if needed.
Live Stats & Diff: Input card shows Chars / Lines / Size (bytes → KB → MB via Blob); Output adds Diff = outputChars − inputChars — see expansion after encode (typically +10-30%) or shrink after decode. Color-coded green/red for instant insight.
Copy, Download, Fullscreen: Copy via async Clipboard API with execCommand fallback, Download as encoded-url.txt / decoded-url.txt (Blob + object URL), Full Screen via Fullscreen API on output card for long OAuth redirect URLs (2,000+ chars).
Large Monospace Editors: 280px tall textareas with ui-monospace, line-height 1.65, word-break break-all for unwrapped URLs, light #fbfdff background that turns white on focus — comfortable for tracking URLs with 10 UTM params.
Orange Primary Actions: Centered Encode (orange #f97316, shadow) and Decode (dark #0f172a) buttons match htmlbeautifier.org's high-contrast call-to-action with hover and active press feedback.
100% Client-Side & Lightweight: No backend, no cookies, no signup. Under 45KB local JS, zero CDN dependency for encoding (native APIs). Works offline after first load — perfect for labs with restricted internet.

How to Use URL Encoder & Decoder – Step-by-Step Guide

Method 1: Paste URL / Text (Fastest)

Copy a raw URL like https://example.com/search?q=hello world & lang=en#top, a query value café & résumé 50% off!, or even an entire tracking link from Google Ads. Click 📋 Paste (grants clipboard permission) or press Ctrl+V into 📥 Input URL/Text. Stats update live. Choose mode, click 🔒 Encode or 🔓 Decode. Then Copy or Download.

Method 2: Upload File

Click 📁 Upload → select urls.txt, redirects.csv, or any .url file from your PC. FileReader loads it instantly into Input (supports up to ~5MB, UTF-8). No file touches our server. Ideal for bulk encoding a list of product URLs before import to Google Sheets or Shopify.

Method 3: Load from URL

Paste a public URL like https://raw.githubusercontent.com/user/repo/main/urls.txt or https://example.com/sitemap.xml and click 🔗 URL. We fetch via fetch() and populate Input. If CORS blocks (common on private APIs), we show actionable message: “Fetch failed (CORS blocked?) — download file & use Upload” — no guessing.

After Encode / Decode

Review Output stats — encode typically adds chars (e.g., 42 → 58, Diff +16) and decode shrinks. Use ⛶ Full Screen to review 2k-char OAuth URLs, 📋 Copy to paste into href or fetch(), or ⬇ Download to save encoded-url.txt. Pro tip: for query values always use encodeURIComponent; for whole URLs that should stay clickable, use encodeURI.

Pro tips: Press Ctrl + Enter to Encode instantly and Ctrl + Shift + D to Decode without touching mouse — same shortcuts as our beautifiers for muscle memory.

URL Encoder vs URL Decoder vs encodeURI vs encodeURIComponent — Comparison

Users search all variants — here’s clarity that also helps SEO for “encode url online” and “decode url” intents:

Tool / Function	What It Does	Example Input → Output	When to Use
URL Encoder (encodeURIComponent)	Encodes every non-alphanumeric including `: / ? # & =`	`q=hello world&x=1` → `q%3Dhello%20world%26x%3D1`	Query param values, form data, nested URLs
encodeURI	Encodes full URL but preserves URL syntax chars	`https://a.com/q=hello world` → `https://a.com/q=hello%20world`	Whole URLs you want to keep clickable
URL Decoder (decodeURIComponent)	Reverses percent-encoding to original	`hello%20world%26` → `hello world&`	Read logs, debug API, parse location.search
decodeURI	Decodes URI but leaves `# ? & =` encoded if they were syntax	Similar but more conservative	Rarely needed — component is standard

Our tool exposes both encode modes in one selector so you never need a second tab. Rule of thumb: if you are concatenating ?q= + value, use encodeURIComponent(value). If you have a complete URL string you just want to make safe, use encodeURI(url).

Before vs After Example — URL Encoder in Action

Before (Raw — 68 chars)	After EncodeURIComponent (110 chars)	After Decode (back to 68)
https://example.com/search?q=café & price=50% off#top	https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dcaf%C3%A9%20%26%20price%3D50%25%20off%23top	https://example.com/search?q=café & price=50% off#top

Whole URL via encodeURI (84 chars — preserves :/?#)
https://example.com/search?q=caf%C3%A9%20&%20price=50%25%20off#top

Pro Tips, Query Params & Browser Compatibility

Expert Tips to Encode Like a Pro

Never double-encode: If you see %2520, you encoded %20 again. Decode once, then encode. Our Diff helps spot bloat — if Diff jumps +50 after one encode, you likely had already-encoded input.
Space: %20 vs +: In query strings, application/x-www-form-urlencoded uses + for spaces (HTML forms). encodeURIComponent uses %20 — both work, but be consistent. For OAuth and modern APIs, %20 is preferred.
Encode only the value: Build URLs as base + '?q=' + encodeURIComponent(q) + '&lang=' + encodeURIComponent(lang) — not encodeURIComponent(fullUrl), which would break :// and ? unless you intend that.
Decode safely: Wrap decodeURIComponent in try/catch — malformed %2G or trailing % throws URIError. Our tool does this for you and shows a red, actionable error: check for incomplete % sequences.
Large lists: For >500 URLs (e.g., redirect map CSV), encode then use Download rather than Copy — clipboard may lag on huge outputs. Fullscreen helps scan.
SEO for encoded URLs: Google normalizes percent-encoded URLs before indexing, so /café and /caf%C3%A9 are same canonical — but always link with encoded version in href and declare canonical encoded to avoid duplicate.

Supported Standards

RFC 3986 percent-encoding, UTF-8 byte handling for all Unicode (Latin, Cyrillic, Arabic, CJK, emojis), and browser-native encodeURIComponent / encodeURI / decodeURIComponent / decodeURI. Works with HTTP/HTTPS URLs, data URIs, mailto links, and any free-form text or query string, including ? , #fragment, and & chains.

Browser compatibility: Chrome 90+, Firefox 90+, Safari 14+, Edge 90+ — uses only Clipboard API, FileReader, Fetch, and Fullscreen APIs with graceful fallbacks.

Target Keywords & Search Intent Map (SEO Authority)

We built this page to rank for the full cluster around url encoder — covering every intent naturally without stuffing, using the same light-card structure as htmlbeautifier.org for familiarity:

Primary Keyword	Monthly Volume*	Intent	How We Cover It
url encoder	8,100	Tool	Title, H1, hero, Encode button, URL /url-encoder/
url decoder	6,600	Tool	H1, Decode button, FAQ, comparison table
encode url online	2,900	Tool	How-to guide, paste/upload/URL, hero
decode url	2,400	Tool	Decode guide, error handling, before/after
url encode / url decode	3,600	Tool	H2s, feature list, JSON-LD featureList
encodeURIComponent / encodeURI	1,300	Learn	Mode selector, comparison table, tips
percent encoding	1,000	Learn	What-is section, RFC 3986, character table

*Estimated volumes for illustration — we target all variants naturally through H2s, tables, and FAQPage schema for featured snippets.

Frequently Asked Questions (FAQ)

What is URL encoding and why is it also called percent-encoding?

URL encoding replaces characters not allowed in URLs (spaces, symbols, non-ASCII) with % + two hex digits of their UTF-8 bytes, e.g., space → %20, é → %C3%A9. It’s called percent-encoding because % is the escape marker. Defined in RFC 3986, it ensures URLs are ASCII-safe and parsed identically by every browser and server.

How do I encode a URL online with your url encoder?

Paste the full URL or any text into 📥 Input URL/Text, pick encodeURIComponent (full) for param values or encodeURI (preserve :/?#& =) for whole URLs, then click 🔒 Encode. Output appears instantly in 📤 Output URL — you can Copy or Download. No signup, browser does encodeURIComponent locally.

How do I decode a URL?

Paste the encoded URL like https://example.com/search?q=hello%20world%26lang%3Den into Input and click 🔓 Decode. We run decodeURIComponent to restore https://example.com/search?q=hello world&lang=en. If the string has an invalid sequence like %2, we catch URIError and show “Malformed percent sequence — check stray %” instead of failing.

What is difference between encodeURI and encodeURIComponent — which should I use?

encodeURI encodes a complete URI but leaves : / ? # [ ] @ ! $ & ' ( ) * + , ; = intact so the URL stays clickable. encodeURIComponent encodes everything including those — use it for values you embed inside a URL (e.g., encodeURIComponent(userQuery)). Rule: whole URL → encodeURI; param value/nested URL → encodeURIComponent. Our selector makes it one click.

Is this url encoder & url decoder free and safe for private URLs?

Yes — 100% free, client-side, no logs, no cookies, no server upload. We call only native encodeURIComponent/decodeURIComponent in your tab, so API keys, JWT tokens, UTM secrets and private query strings never leave your device. Even offline after first load.

Can I encode a list of URLs from a file or fetch from URL?

Yes. Use 📁 Upload to load urls.txt / redirects.csv via FileReader, or paste a raw GitHub URL and hit 🔗 URL to fetch. Then Encode/Decode, Copy or Download. If fetch fails with CORS, download manually and Upload — we explain the fallback.

Why does my encoded URL look longer and what is Diff?

Encoding expands — each unsafe character becomes 3 chars (%XX). Diff = outputChars − inputChars, shown live in Output stats. After Encode expect Diff positive (+), after Decode negative (−). It helps estimate size before adding to href or API call.

Best URL Encoder & Decoder Online Free in 2026 — Start Encoding Now

Whether you are a student learning how query params work, a developer fixing a broken redirect, or a marketer tagging UTM links, a reliable url encoder & url decoder saves minutes on every link. Stop guessing whether to encode & or % — paste your URL above, pick encodeURIComponent or encodeURI, and hit 🔒 Encode to get a paste-safe, RFC 3986-compliant URL you can share via email, chat, or fetch(). And when you need to read a messy %3D%26%25 log, hit 🔓 Decode for instant clarity. Bookmark html-compiler.com/url-encoder/ — the lightweight, private, evergreen encode url online and decode url tool for 2026 and beyond. Explore our other free tools: HTML Beautifier • CSS Beautifier • JS Beautifier • HTML Minifier • JSON Beautifier • Base64 Encoder • HTML Compiler — all client-side, all free forever.

URL Encoder & Decoder — Encode & Decode URL Online