Base64 encoder / decoder

aGVsbG8gV2ViVHJpY2tzIPCfkYs=

What this Base64 tool does

The converter encodes any text to standard Base64 (RFC 4648 alphabet, A–Z a–z 0–9 + / with = padding) and decodes Base64 back to text. Input is treated as UTF-8, which fixes the classic btoa() problem where anything beyond Latin-1 throws InvalidCharacterError. The result updates as you type, and all work happens in your browser.

How to use it

1. Choose Encode (text → Base64) or Decode (Base64 → text).
2. Paste into the input box. In Encode mode the sample hello WebTricks 👋 shows a 4-byte emoji surviving the trip.
3. Read the output below; in Decode mode an invalid string shows a red “Input is not valid Base64” message instead.
4. Click Copy.

Leading and trailing whitespace is trimmed before decoding, but whitespace in the middle (for example from a 76-column MIME-wrapped email body) is not — join the lines first.

Worked examples

Text	Base64
Hi	SGk=
Man	TWFu
hello	aGVsbG8=
ü (2 UTF-8 bytes)	w7w=
👋 (4 UTF-8 bytes)	8J+Riw==
user:pass (HTTP Basic auth)	dXNlcjpwYXNz

Man has exactly 3 bytes, so it needs no padding; Hi has 2 bytes and gets one =; a single byte gets two. Output length is always 4 * ceil(bytes / 3), which is where the roughly 33% overhead comes from.

Base64, Base64URL and data URLs

Variant	Alphabet	Padding	Where you meet it
Standard (RFC 4648 §4)	A–Z a–z 0–9 + /	=	MIME email, Basic auth, btoa(), XML/JSON binary fields
Base64URL (RFC 4648 §5)	A–Z a–z 0–9 - _	Usually omitted	JWTs, OAuth PKCE, WebAuthn, URL query strings
Data URL	Standard, after data:mime/type;base64,	=	Inline images, fonts and SVG in CSS/HTML

This tool speaks the standard alphabet. To decode a Base64URL value, swap - → + and _ → /; the missing padding is tolerated. To decode a data URL, drop everything up to and including ;base64, first — or use the Image ⇄ Base64 converter, which handles the prefix and shows the image.

The btoa() trap, and the modern fix

btoa("👋") throws because btoa expects a “binary string” where each character is one byte. The reliable pattern is to encode to bytes first:

const toBase64 = (text: string): string => {
  const bytes = new TextEncoder().encode(text);
  return btoa(String.fromCharCode(...bytes));
};

const fromBase64 = (b64: string): string =>
  new TextDecoder().decode(Uint8Array.from(atob(b64), (c) => c.charCodeAt(0)));

Browsers shipping Uint8Array.fromBase64() and .toBase64() (Chrome 140+, Firefox 133+, Safari 18.2+) let you skip the fromCharCode dance and choose { alphabet: "base64url" } directly. Node has had Buffer.from(str).toString("base64") for years. In every case, remember that Base64 is encoding, not encryption: if the value needs to stay secret, it needs real encryption and a key.

When to use Base64 — and when not

Good fits: embedding a tiny icon or font in CSS to save a request, passing binary blobs through JSON, HTTP Basic credentials, storing bytes in a text column. Poor fits: images larger than a few kilobytes (the 33% overhead beats the saved request, and the data cannot be cached separately), anything you hope to “obfuscate”, and large files in localStorage (5 MB quota, and the string takes memory twice while converting).

Related tools and snippets

• Image ⇄ Base64 converter — build or decode data: URLs for images, with a live preview and size readout.
• JWT decoder — reads the Base64URL parts of a token for you.
• URL encoder / decoder — standard Base64 contains + and /, which must be percent-encoded in a query string.
• Hash generator — when you want a one-way fingerprint rather than a reversible encoding.
• Image ⇄ Base64 guide — when inlining images helps page speed and when it hurts.