{"@context":"https://schema.org","@type":"BlogPosting","headline":"Free URL Encoder/Decoder Online — Encode, Decode & Generate QR Codes","description":"A complete guide to URL encoding and decoding. Use our free online tool to encode URLs, decode percent-encoded strings, generate QR codes, and create SEO-friendly slugs. 100% client-side, no signup.","datePublished":"2026-05-10","author":{"@type":"Organization","name":"DevToolkit"},"publisher":{"@type":"Organization","name":"DevToolkit","url":"https://devtoolkit.dev"},"url":"https://devtoolkit.dev/blog/url-encoder-decoder-online-tutorial"}
URL Developer Tools Tutorial

Free URL Encoder/Decoder Online — Encode, Decode & Generate QR Codes

· 7 min read

URLs are the backbone of the web, but not every character can travel safely inside them. Special characters — spaces, ampersands, Chinese characters, emojis — must be converted into a format that browsers, servers, and APIs can understand. That process is called URL encoding (or percent-encoding), and every developer, marketer, and content creator needs it.

That is why we built our free URL Toolkit. Paste any text and instantly encode it to a percent-encoded URL, decode it back, generate a QR code, or create an SEO-friendly slug — all in your browser, no signup required.

What Is Percent-Encoding?

Percent-encoding is defined in RFC 3986, the standard that governs URI syntax. It works by replacing unsafe characters with a % followed by two hexadecimal digits representing the character's ASCII or UTF-8 byte value.

For example, a space character becomes %20 (or + in form data), and an ampersand & becomes %26. Without this encoding, a URL like https://example.com/search?q=hello world would break because the space is not a valid URL character.

Characters that must be encoded in URLs include:

  • Reserved characters: :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, = — these have special meaning in URL syntax
  • Unsafe characters: Space, <, >, , , |, \, ^, ~, [, ], ` — these can be misinterpreted by gateways and transport agents
  • Non-ASCII characters: Any character outside the basic ASCII range, including accented letters, Chinese characters, Arabic script, and emojis

Modern JavaScript provides two built-in functions for URL encoding: encodeURI and encodeURIComponent. The difference matters:

  • encodeURI encodes the entire URL but preserves characters with structural meaning (:, /, ?, #, &, =). Use this when you have a complete URL string.
  • encodeURIComponent encodes every reserved and unsafe character, including /, ?, &, and =. Use this for individual query parameter values or path segments.

What Our URL Toolkit Does

Most online URL encoders stop at basic percent-encoding. Ours goes further, because real developer and content workflows need more:

1. URL Encoder / Decoder

Paste any string and click Encode to convert it to percent-encoded form using encodeURIComponent. Click Decode to reverse the process with decodeURIComponent. The tool handles Unicode characters correctly — Chinese text, emojis, and special symbols all encode to valid UTF-8 percent-encoded sequences.

Example encoding:

Input:  Hello World! 你好 🌍
Output: Hello%20World!%20%E4%BD%A0%E5%A5%BD%20%F0%9F%8C%8D

2. QR Code Generator

Enter any text or URL and generate a QR code instantly. The QR code is rendered entirely client-side using a JavaScript library — no server round-trip, no data transmission. You can customize the size (from 128px to 512px) and download the result as a PNG image with a single click.

Use cases include generating QR codes for:

  • Website URLs for print materials and business cards
  • WiFi network credentials (SSID and password)
  • Payment links and donation pages
  • App download links
  • Event check-in codes

3. URL Slug Generator

Convert any title or phrase into a clean, SEO-friendly URL slug. The tool supports four output formats:

  • Kebab-case: free-url-encoder-decoder-online — the standard for blog posts and product pages
  • Snake_case: free_url_encoder_decoder_online — common in API endpoints and file names
  • Date-prefixed: 2026-05-10-free-url-encoder-decoder-online — useful for dated content like news articles
  • Short slug: url-encoder-decoder — concise version for social sharing and short links

The slug generator removes special characters, converts to lowercase, strips extra whitespace, and handles non-ASCII characters gracefully.

How to Encode/Decode URLs: Step by Step

  1. Copy your text: Grab the string you need to encode — a query parameter, a path segment, or an entire URL
  2. Paste into the tool: Open URL Toolkit and paste into the textarea
  3. Click Encode or Decode: The tool converts instantly using JavaScript's built-in functions
  4. Copy the result: Select and copy the output, or use the copy button

If you paste a percent-encoded string and click Decode, the tool will reverse the process and show the original text. If the input is not valid percent-encoding, the tool will show a clear error message.

URL Encoding Reference Table

Here is a quick reference for the most commonly encoded characters:

Character Encoded Character Encoded
Space %20 (or + in forms) & %26
= %3D + %2B
? %3F # %23
/ %2F : %3A
@ %40 % %25
< %3C > %3E
%7B
%7D
[ %5B ] %5D
| %7C \ %5C
^ %5E ~ %7E
` %60 " %22
' %27 , %2C
; %3B $ %24
! %21 * %2A
( %28 ) %29

QR Code Generation: When and Why

QR codes bridge the gap between physical and digital. A user scans a code with their phone camera and instantly opens a URL, connects to WiFi, or downloads an app. No typing required.

Common use cases for QR codes:

  • Marketing materials: Add QR codes to flyers, posters, and business cards that link to your website or landing page
  • Product packaging: Link to setup instructions, warranty registration, or customer support
  • Restaurants and retail: Display QR codes for menus, payment links, or loyalty program signups
  • Events: Use QR codes for ticket validation, session check-ins, or speaker slides
  • Developer workflows: Generate QR codes for local development URLs to test on mobile devices quickly

Our QR code generator creates codes entirely in your browser. The text or URL you enter is never sent to a server. You control the size (128px to 512px) and download the PNG directly.

URL Slug Best Practices

A URL slug is the human-readable part of a URL that identifies a specific page. Good slugs improve SEO, make URLs memorable, and help users understand what a page contains before they click.

Best practices for creating URL slugs:

  • Use lowercase: URLs are case-sensitive on some servers. Lowercase avoids confusion and duplicate content issues
  • Use hyphens, not underscores: Google treats hyphens as word separators. Underscores are treated as part of the word
  • Keep it short: Aim for 3-5 words. Long slugs get truncated in search results and are harder to share
  • Remove stop words: Words like "a", "the", "and", "of" add no SEO value. Remove them when possible
  • Use keywords: Include the primary keyword for the page, but do not stuff
  • Avoid special characters: Stick to letters, numbers, and hyphens. Special characters may break or require encoding
  • Be descriptive: A slug like url-encoder-decoder is better than tool-3

Examples of good vs bad slugs:

Title Bad Slug Good Slug
How to Format JSON Online how-to-format-json-online format-json-online
The Ultimate Guide to URL Encoding the_ultimate_guide_to_url_encoding url-encoding-guide
Free QR Code Generator Tool free-qr-code-generator-tool-2026 qr-code-generator

Frequently Asked Questions

Is this URL encoder free?

Yes, completely free. No signup, no usage limits, no API calls. Everything runs in your browser.

Does this tool send my data to a server?

No. All URL encoding, decoding, QR code generation, and slug creation happens 100% client-side in your browser using JavaScript. Your data never leaves your machine. This makes it safe for sensitive URLs, internal API endpoints, and proprietary data.

What is the difference between encodeURI and encodeURIComponent?

encodeURI is designed for complete URLs. It encodes spaces and non-ASCII characters but preserves URL structure characters like /, ?, &, and =. encodeURIComponent is designed for individual values (like query parameters) and encodes everything including structural characters. Use encodeURI for full URLs, encodeURIComponent for parameter values.

Can I download the QR codes I generate?

Yes. After generating a QR code, click the Download PNG button to save it as a PNG image file. You can choose the size (128px to 512px) before downloading.

What is percent-encoding?

Percent-encoding (also called URL encoding) is a mechanism for encoding arbitrary data in a URI. It replaces unsafe ASCII characters with a % followed by two hexadecimal digits. For example, a space becomes %20 and an ampersand becomes %26. It is defined in RFC 3986 and is essential for transmitting special characters in URLs.

Does the slug generator handle non-English characters?

Yes. The slug generator strips or transliterates non-ASCII characters to produce clean, URL-safe output. For example, Chinese characters are removed and the remaining ASCII text is converted to a valid slug.

Can I encode an entire URL at once?

The tool uses encodeURIComponent by default, which encodes structural characters like / and ?. If you need to encode a complete URL while preserving its structure, use encodeURI in your own code, or encode only the query parameter values individually.

Try It Now

No signup, no installation, no server calls. Open URL Toolkit, paste your text, and encode or decode it instantly. Generate QR codes for any URL, or create SEO-friendly slugs from your article titles.

Looking for more free developer tools? Browse our full tools directory — including JSON Formatter, Regex Tester, and JWT Decoder.

Found this useful? Check out our free developer tools or browse more articles.