B64 Studio — Professional Base64 Tool

Encode in 4 steps

1

Paste or type your content

Click the "Source text" field and paste any text — HTML, JSON, CSS, JavaScript, plain text, or even emoji. Character count and line count update live as you type.

2

Choose an output format (optional)

Pick one of the 5 format chips: Plain (default), Data URI, HTML embed, CSS background, or JSON. The output updates instantly when you switch formats.

3

Click Encode or press Ctrl+Enter

The Base64 result appears in the output field. Four stats update: input chars, output chars, size overhead percentage, and encode time in milliseconds.

4

Use your result

Copy — puts result on clipboard. Download — saves as .txt file. Save — adds to persistent history. Swap — sends output directly to the Decoder tab.

Output format reference

Plain

Raw Base64 string only. Best for APIs, tokens, authentication, and custom integrations where you control how the data is used.

SGVsbG8gV29ybGQ=

Data URI

Adds data:text/html;base64, prefix. Paste into a browser address bar to view the content directly, or use in src attributes.

data:text/html;base64,SGVs…

HTML Embed

Wraps content in an <iframe> tag with a data URI source. Drop into any HTML page to display content inline without any external files.

CSS Background

Formats as background-image: url() CSS property. Use to embed inline backgrounds in stylesheets without separate HTTP requests for images.

background-image: url("data:…")

JSON

Wraps in a JSON object with data, format, encoding, length, and encodedAt fields. Ideal for REST APIs and structured data exchange.

{"data":"SGVs…","format":"base64"}

Pro tips for encoding

⚡

Full Unicode support: Emoji, Chinese, Arabic, and all Unicode characters are handled correctly using encodeURIComponent internally. No character will be lost or corrupted.

📊

Size overhead is always ~33%: Base64 converts every 3 bytes into 4 characters. A 300-byte input becomes exactly 400 characters of output. Plan accordingly for large payloads in HTTP headers.

🔁

Instant round-trip testing: After encoding, click Swap to send the output directly to the Decoder. Decode it and verify the result matches your original exactly.

👁️

HTML auto-preview: When you choose the "HTML embed" format, a live render of the iframe appears below the output automatically — no separate step needed.

💾

Save often: Click Save to preserve the current encode operation in History. History persists after page reload and holds up to 50 entries.

Keyboard shortcuts

Ctrl+Enter→ Encode

Ctrl+⇧+C→ Copy output

Ctrl+⇧+X→ Clear all

Ctrl+1→ Switch to Encode

Ctrl+2→ Switch to Decode

Ctrl+3→ Switch to Files

Ctrl+4→ Switch to Compare

Ctrl+5→ Switch to History

Esc→ Close modal

Encoder

Format

Source text

0 chars0 lines

0

Input chars

0

Output chars

—

Size overhead

—

Encode time

Base64 output—

HTML Preview

Shortcuts Ctrl+Enter encode Ctrl+⇧+C copy Ctrl+⇧+X clear all

Decode in 4 steps

1

Paste your Base64 string

Paste any valid Base64 string, a full Data URI (data:text/html;base64,…), or a JSON wrapper with a "data" field. The decoder automatically strips headers and padding issues.

2

Click Decode or press Ctrl+Enter

The decoded content appears in the output field. If the content is JSON, it's automatically pretty-printed with proper indentation. Character count is shown in the output field header.

3

Auto-detect the content type

Click Detect type to classify the decoded content as HTML, JSON, JavaScript, CSS, Image, or plain Text. A colored badge appears next to the output label. HTML and image types also trigger a live preview pane.

4

Copy, download, or save

Use Copy for clipboard, Download to save as a file, or Save to persist in history for later retrieval.

Accepted input formats

①

Plain Base64

A raw Base64 string like SGVsbG8gV29ybGQ=. The most common format. Whitespace and newlines are automatically stripped before decoding.

②

Data URI

data:text/html;base64,SGVs… — Everything before the comma (including the MIME type) is automatically stripped so only the Base64 data is decoded.

③

JSON wrapper

If you paste a JSON object that contains a "data" key (as produced by this tool's JSON format), the value is extracted automatically and decoded.

④

URL-safe Base64

Some systems (like JWT tokens) use - and _ instead of + and /. The decoder normalises these automatically so they decode correctly.

Decoding tips

⚠️

Padding errors: If you see "Invalid Base64", the string might be missing = padding characters. The decoder adds them automatically, but if it still fails, check for non-Base64 characters in your string.

🖼️

Image decoding: If the decoded content begins with data:image/, a visual preview of the image appears below the output automatically. Works with PNG, JPG, GIF, SVG and WebP.

🔍

Large outputs: For very long decoded results, use the Download button to save to a file rather than copying from the textarea, to avoid browser performance issues.

🔗

JWT tokens: JWT tokens have 3 Base64url-encoded parts separated by dots. Decode each part separately (copy the middle part for the payload). The decoder handles URL-safe encoding automatically.

Decoder

Base64 input0 chars

Decoded output—

Preview

Shortcuts Ctrl+Enter decode Ctrl+⇧+C copy

Encode files in 3 steps

1

Add files via drag-and-drop or browse

Drag one or more files directly onto the drop zone, or click the zone to open a file browser. Each file appears as a pill showing its name and size. Click the ✕ on a pill to remove individual files. Maximum 5 MB per file.

2

Click "Encode files"

All selected files are read and encoded. A progress bar tracks completion when processing multiple files. Results appear in the output area with each file clearly labeled by name and size.

3

Download or copy the results

Use Download results to save all encoded content as a single .txt file, or Copy all to grab everything to clipboard. Each file's Base64 is separated by a visible divider line.

Supported file types

📄

Text files: .txt, .html, .css, .js, .ts, .json, .xml, .csv, .md, .yaml, .env and any other plain text format. These are read as UTF-8 text and encoded.

🖼️

Images: .png, .jpg, .jpeg, .gif, .svg, .webp and other image formats. Uploaded images are read as binary and Base64 encoded — the result can be used directly in a Data URI.

📦

Other files: Any file up to 5 MB. The file is read as text. For binary files (PDFs, ZIPs), the encoding may not be perfectly reversible via this text-mode reader — use a dedicated binary encoder for those.

⚠️

Size limit: Files larger than 5 MB are rejected. For bigger files, split them before uploading, or use a command-line tool like base64 on Linux/macOS.

File encoding tips

📦

Batch mode: Select multiple files at once. Each is encoded independently and separated with a labeled divider in the output, making it easy to copy individual results.

🔄

Re-encode: Remove a file pill with ✕ and re-add the file to include a fresh encoding. Click "Encode files" again to regenerate the output.

🖼️

Inline images: To use an encoded image as an inline <img> tag, take the Base64 result and prepend data:image/png;base64, (adjust MIME type as needed).

File Encoder

No files selected

📂

Drop files here or click to browse

Text, HTML, images, JSON · Max 5 MB each · Multiple files OK

Results—

Comparing two Base64 strings

1

Paste two Base64 strings side by side

Enter one Base64 string in the left "String A" field and a second string in the right "String B" field. Both are decoded independently using the same auto-cleaning rules as the Decoder tab.

2

Click "Compare strings"

Both strings are decoded and the decoded values are compared. A large match/mismatch indicator appears, with a count of differing characters and the length of each decoded string.

3

Verify a round-trip

Classic use case: encode something in the Encode tab → copy output → paste in String A. Then paste your original text, encode it again with different settings, and paste in String B. Compare to check equivalence.

💡

Whitespace differences: The decoder strips whitespace before decoding, so SGVs\n= and SGVs= will decode to the same result and show as matching.

Compare two Base64 strings

String A0 chars

String B0 chars

Working with history

1

Save operations manually

After encoding or decoding, click the Save button in the respective tab. The entry is stored in your browser's localStorage and persists between page reloads indefinitely.

2

Search and filter

Use the search bar at the top to filter history entries by content. Filtering is live as you type and matches against the stored input text. Works well for finding specific encodings by content snippet.

3

Restore any past operation

Click the restore icon (↺) on any history entry to instantly load it back into the correct tab (Encode or Decode). The format setting is also restored for encode operations so you get back the exact same state.

4

Delete individual entries or clear all

Click the ✕ on a history entry to delete just that one entry. Use Clear all to wipe the entire history. The operation cannot be undone. History holds up to 50 entries — oldest are removed automatically when full.

🔒

Privacy: All data is stored locally in your browser's localStorage. Nothing is ever uploaded or transmitted to any server. Clearing your browser's site data will also clear history.

History