What is Base64 Encoder & Decoder?
Formula
UTF-8 bytes = TextEncoder.encode(text) Encode: Base64 = btoa(bytesAsBinaryString) Decode: binary = atob(Base64) Text = TextDecoder.decode(Uint8Array from binary)
Formula Explained
JavaScript’s btoa and atob are defined for “binary strings” where each character code is a byte (0–255). Unicode strings must be converted to UTF-8 bytes first; TextEncoder and TextDecoder are the standard way to do that in modern browsers. Base64 maps every 3 bytes to 4 characters, with = padding when the length is not a multiple of 3. That is why encoded output is longer than the original text. Decoding is the inverse: four Base64 characters map back to three bytes, then UTF-8 decoding interprets those bytes as a string.
Example
Plain text (UTF-8): Hello — 世界 Encoded (example): SGVsbG8g4oCUIOeUnOe6v+eUsQ== Decoding that Base64 string returns the same original text. Invalid input (bad character): SGVsbG*v — contains * which is not valid Base64; decode fails with an error.
Tips & Best Practices
- ✓When pasting from PDFs or chat apps, invisible characters can break decode—try retyping the Base64 or paste into a plain-text editor first.
- ✓Very large inputs can slow down the browser; for huge files prefer desktop or CLI tools.
- ✓Remember Base64 is not encryption—do not use it to protect secrets.
- ✓JWT payloads are Base64URL; replace - with + and _ with / before using standard decoders if needed.
- ✓Line-wrapped PEM blocks: strip headers/footers and concatenate the Base64 body before decoding the inner DER.
Common Use Cases
- •Decoding small Base64 blobs from API responses during debugging
- •Encoding snippets for data URLs or inline configuration samples
- •Checking whether a string is valid Base64 before feeding it to other tools
- •Learning how UTF-8 and binary-safe encoding work together
- •Preparing test vectors for tutorials and documentation