Vibe Engines is free, interactive AI engineering & system design — runs in your browser. Pick a learning path
Base64 & URL Encoder
A Base64 and URL encoding tool. Paste text to get its standard Base64, URL-safe Base64URL, and percent-encoded forms at once, or switch to decode to recover the original — all UTF-8 aware and computed in your browser. Handy for JWTs, data URIs, query strings and API debugging.
Text-only channels need a safe way to carry bytes and awkward characters, and these three encodings are the common ones. Type text and the tool shows its standard Base64, its URL-safe Base64URL and its percent-encoded form at once. Switch to Decode and it tries the same input both ways, Base64 and URL-encoding, and shows what each interpretation gives back.
What it computes
Base64 (RFC 4648, section 4) first converts your text to UTF-8 bytes. It then reads the bytes three at a time, 24 bits, splits each group into four 6-bit numbers from 0 to 63, and writes each number as one character of the alphabet A–Z a–z 0–9 + /. A final group of one or two bytes is padded with = so the output length is always a multiple of four.
bytes = UTF-8 encoding of the text
length = 4 × ceil(bytes ÷ 3) Base64, with = padding
Base64URL = Base64 with + → -, / → _, trailing = removed
URL-encoded = encodeURIComponent(text) each unsafe byte → %XXBase64URL (RFC 4648, section 5) carries exactly the same bits with the two URL-hostile characters swapped and the padding dropped. Percent-encoding keeps A–Z a–z 0–9 - _ . ! ~ * ' ( ) as they are and writes every other UTF-8 byte as % plus two uppercase hex digits. Decoding reverses each path: - and _ are mapped back, the padding is restored, the Base64 is decoded to bytes and the bytes are read as UTF-8.
A worked example
The default input is Hello, Vibe Engines 👋.
- It is 21 characters (JavaScript counts 22, because the emoji is a surrogate pair) and 24 UTF-8 bytes: 20 ASCII bytes plus four for 👋,
F0 9F 91 8B. - 24 bytes make 8 groups of three, so the output is
4 × 8 = 32characters with no padding. - The first group,
Hel, is48 65 6C, or bits010010 000110 010101 101100: the numbers 18, 6, 21 and 44, which areS G V s. - The last group,
9F 91 8B, splits into 39, 57, 6 and 11, which aren 5 G L.
Base64 SGVsbG8sIFZpYmUgRW5naW5lcyDwn5GL
Base64URL SGVsbG8sIFZpYmUgRW5naW5lcyDwn5GL
URL-encoded Hello%2C%20Vibe%20Engines%20%F0%9F%91%8BThe two Base64 forms match here because no digit was 62 or 63 and no padding was needed. Shorter inputs show the difference:
| Input | Base64 | Base64URL | URL-encoded |
|---|---|---|---|
| café? | Y2Fmw6k/ | Y2Fmw6k_ | caf%C3%A9%3F |
| café | Y2Fmw6k= | Y2Fmw6k | caf%C3%A9 |
In Decode mode, the Example button loads SGVsbG8sIFZpYmUgRW5naW5lcyDwn5GL. The Base64 row returns Hello, Vibe Engines 👋, and the URL-encoding row returns the input unchanged, since it holds no % sequences.
Assumptions and limits
- Text, read as UTF-8. You paste text, not a file. If decoded bytes are not valid UTF-8, for example an image or compressed data, they appear as replacement characters (U+FFFD) rather than as an error.
- One unbroken string. Leading and trailing whitespace is trimmed, but padding is restored by counting characters, so line breaks inside wrapped Base64, as in email attachments, can make valid input fail. Join the lines first.
- Not strict RFC 3986.
encodeURIComponentleaves! ' ( ) *unescaped. Some signing schemes, such as OAuth 1.0 signatures, require those escaped too. - No form encoding. A space is written as
%20, and a+is not read back as a space.
How to use the result
- Standard Base64 for email attachments,
data:URIs, binary inside JSON and the HTTP Basic authentication header. - Base64URL for JWT segments, URL tokens, file names and the PKCE code challenge, which all use the unpadded URL-safe form.
- Percent-encoding for one query value or path segment at a time. Encoding a whole URL this way also escapes its
://and slashes. - Budget for size. Base64 adds about a third: a 3 MB image becomes 4 MB of text, which matters against payload and header limits.
- Garbled output usually means a mismatch: text encoded twice, the wrong alphabet, or binary that was never text.
How it works
- Standard Base64, URL-safe Base64URL, and percent-encoding at once.
- Encode and decode directions, both UTF-8 aware.
- Decoding accepts either Base64 alphabet, with or without = padding.
- Runs fully in your browser, so nothing is uploaded.
Frequently asked questions
What is the difference between Base64 and Base64URL?
Both turn bytes into text using 64 printable characters and carry exactly the same bits. Standard Base64 uses + and / and pads with =, which breaks inside URLs: + can be read as a space, / is a path separator and = is reserved in query strings. Base64URL, defined in RFC 4648 section 5, swaps + for - and / for _ and usually drops the padding, so the result can go into a URL, a filename or a JWT segment without further escaping. This tool shows both forms side by side.
Is Base64 encryption?
No. Base64 is an encoding, not encryption. It is fully reversible by anyone, needs no key, and exists to represent binary safely as text, not to hide it. Never use Base64 to protect a secret: this very tool decodes it in one step. Its real jobs are embedding bytes in text formats, such as data URIs, email attachments, JWT segments, HTTP Basic authentication headers and API payloads that must be plain text.
Why does Base64 encoding of non-ASCII text need care?
The browser function btoa() works on single bytes, one per character. It throws an error on any character above U+00FF, such as an emoji, and it silently encodes a character like é as one Latin-1 byte instead of the two bytes UTF-8 uses, so another system decodes the wrong text. The correct approach is to convert the text to UTF-8 bytes first, Base64 those bytes, and reverse both steps when decoding. This tool does that, so accents and emoji round-trip correctly.
Why is Base64 output about a third larger than the input?
Base64 writes every 3 bytes as 4 characters, because each character carries only 6 bits. The output is therefore 4 times the number of 3-byte groups, rounded up, which is about 133% of the input. A final group of 1 or 2 bytes is padded with two or one = signs in standard Base64. Remember that the input size is counted in UTF-8 bytes, not characters, so text with accents or emoji grows more than its character count suggests.
When do I need URL percent-encoding instead of Base64?
Percent-encoding, such as %20 for a space, makes arbitrary text safe inside one part of a URL: a query-string value, a path segment or a form field. Unlike Base64, it leaves letters, digits and a few symbols readable and only escapes the rest, one UTF-8 byte at a time. Use it for URL components a person may read, and use Base64URL when you need to pack binary or already encoded data into a compact, URL-safe token.
Why does URL decoding leave plus signs as plus signs?
The decoder uses the standard JavaScript function decodeURIComponent, which follows the generic URI rules of RFC 3986, where + is an ordinary character. Only HTML form encoding, application/x-www-form-urlencoded, uses + to mean a space. If you paste a form body or a query string produced by a form, replace each + with %20 first and the spaces will come back. Encoding has the mirror behavior: this tool always writes a space as %20, never as +.