Base64 Encoder/Decoder

Base64 Encoder/Decoder turns textarea text into Base64, or Base64 back into text, using the browser’s TextEncoder, btoa, atob, and TextDecoder. The sidebar safety note states that Base64 is encoding, not encryption. The page does not hash, compress, percent-encode URLs, verify JWTs, or convert files.

Nothing runs until you select Encode Base64, Decode Base64, or Load example. The default mode is Encode, URL-safe is off, and Include padding is on. The input starts empty.

Encode and Decode are two buttons. handleModeChange stores the mode, then clears outputText and error. The input text and the two option checkboxes stay as they are. You must convert again after switching.

Encode

encodeText: UTF-8 bytes via TextEncoder, then bytesToBase64 (btoa). Optional URL-safe substitution and optional removal of trailing =.

Decode

decodeText: normalizeBase64Input, atob to bytes, then TextDecoder().decode. The padding checkbox is not passed into decode.

Empty input

If the trimmed textarea is empty, output is cleared. Encode shows “Enter text to encode.” Decode shows “Enter Base64 to decode.” Those buttons stay disabled while !inputText.trim().

Load example uses “Hello, DevToolKit! 🚀” in Encode and “SGVsbG8sIERldlRvb2xLaXQhIPCfkYs=” in Decode, then calls runConversion immediately.

With URL-safe off, encode keeps btoa’s + and / characters. With URL-safe on, toUrlSafeBase64 replaces + with - and / with _ after btoa. The = padding character is not rewritten.

On decode, normalizeBase64Input maps - → + and _ → / only when urlSafe is true. This page does not detect URL-safe input automatically. It does not claim RFC 4648 Base64URL compliance beyond that substitution.

Encode padding

Include padding default is true, so btoa’s trailing = stay. If you uncheck it, bytesToBase64 (and URL-safe encode again) strip /=+$/ from the encoded string.

Decode padding restore

After trim and whitespace removal, if length % 4 is 2 or 3, the function appends “=”.repeat(4 − remainder). Remainder 0 is left unchanged.

Remainder 1

normalizeBase64Input throws “Invalid Base64 input.” before atob.

Other failures

atob or later steps throw; the UI shows error.message, or “Could not process this input.” if message is missing. Output is cleared.

Decode also deletes all whitespace (trim, then replace /\s+/g). Wrapped Base64 can decode if the remaining alphabet is valid. Encode does not strip whitespace; spaces and line breaks in the input are part of the UTF-8 bytes that get encoded.

The Options panel labels text encoding as UTF-8. That label is static; there is no Latin-1, UTF-16, or hex selector. Encode uses new TextEncoder().encode(text). Decode uses new TextDecoder().decode(bytes) with no options (UTF-8 default). Invalid byte sequences are not turned into a dedicated UI error; this component does not pass fatal: true.

Under the input, a counter shows JavaScript character length, line count (split on \r\n, \r, or \n), and UTF-8 byte length of the current input. Empty input shows 0 / 0 / 0. The sidebar Summary uses input and output character counts, plus Yes/No for the two checkboxes—not whether the current output string actually contains =.

This is a text-in, text-out tool. Binary files, images, and data-URI prefixes are not a supported workflow. Decoded bytes that are not useful as Unicode text can still appear as text in the output textarea.

1. Click Encode or Decode.
2. Set URL-safe Base64 and Include padding to match the alphabet and padding you need. Option changes do not replay the last run.
3. Paste into Input text or Base64 input.
4. Click Encode Base64 or Decode Base64.
5. Read Base64 output or Decoded text.
6. Click Copy output when the result is non-empty. On success the label reads Copied for 1.5 seconds.
7. Click Download .txt for encoded-base64.txt in Encode or decoded-text.txt in Decode.
8. Click Clear to empty input, output, error, and the Copied state. It does not reset mode, URL-safe, or padding.

• Not encryption or a way to hide secrets (the sidebar says this explicitly).
• Not hashing.
• Not compression.
• Not URL percent-encoding (that is encodeURI / encodeURIComponent on URL Encoder/Decoder).
• Not JWT splitting or signature verification.
• Not file or binary conversion: textarea only; no file input; download is always a .txt of the output string.
• Not automatic conversion, MIME 76-character wrapping, or an alphabet detector.
• No implemented character ceiling in Base64Tool.jsx (very large strings are still bounded by the browser).

Base64Tool.jsx encodes and decodes in the browser. It does not call trackToolEvent and does not POST the textarea to an encode/decode API. That is not a confidentiality guarantee: the rest of the page can still load site assets and advertising; the privacy policy describes first-party analytics for event metadata (not designed to store tool contents); clipboard writes, downloads, extensions, and shared devices stay outside this component.

Do not treat Base64 output as a protected secret. Local btoa/atob does not encrypt or isolate the text from the browser environment.

• JSON Formatter — after decode, if the text is JSON, paste it there for JSON.parse / JSON.stringify pretty-print. This Base64 page does not parse JSON.
• JWT Decoder — when the input is a three-segment token. That page Base64URL-decodes header and payload JSON and does not verify signatures. Pasting a full JWT here is not the same workflow.
• URL Encoder/Decoder — when you need percent-encoding with encodeURIComponent or encodeURI, not Base64’s +/ alphabet. The two encodings are not interchangeable.

• Confirm you used Encode versus Decode for the task; switching modes clears output.
• If decoding -/_ input, enable URL-safe Base64, then convert again.
• If a receiver requires trailing =, leave Include padding on and encode again after changing it.
• If decode fails, read the message: empty-input copy, “Invalid Base64 input.” for remainder 1, or the engine message from atob.
• Check the downloaded name: encoded-base64.txt versus decoded-text.txt.
• If Copy output stays unchanged, the clipboard API may have been denied; the UI does not surface that as a red error.