Real-time · Live Preview · Zero Uploads

HTML to Base64 Encoder

Paste or upload any HTML and instantly get a Base64-encoded data:text/html;base64,… URI. Generate ready-to-use iframe, anchor, and CSP snippets. Live preview included.

Charset:
Output:
HTML Input 0 chars
📄 Drop .html file or click to browse
Base64 Output 0 chars
Live Preview empty
Browser render
3
Snippet Types
Live
HTML Preview
0ms
Server Latency
100%
Private & Secure
How It Works

Encode HTML to Base64 in Three Steps

No sign-up, no server uploads. Paste, encode, and copy a ready-to-use data URI in seconds.

1

Paste or Upload HTML

Type or paste any HTML string into the editor, or drop an .html file directly onto the drop zone. The tool reads the content locally nothing is sent to any server.

2

Instant Base64 Encoding

The HTML text is encoded to UTF-8 bytes using TextEncoder, then converted to a Base64 string. A full data:text/html;base64,… URI is built and the live preview updates in real time.

3

Copy a Snippet or the Raw Base64

Copy the Base64 string or full data URI, download it as .txt, or switch to the Snippets tab to get a ready-to-paste <iframe>, <a> download link, or CSP hash.

Tool Features

Everything You Need to Encode HTML

A complete HTML encoding toolkit with live preview, snippet generation, and reverse decoding.

📄

Paste or Upload HTML

Type directly into the editor, paste from clipboard, or drag and drop an .html or .htm file. The file is read with FileReader never uploaded to a server.

👁

Live HTML Preview

As you type, a sandboxed <iframe> renders the HTML in real time so you can verify the output before copying the encoded string. The preview uses the actual Base64 data URI as its source.

💻

3 Ready Code Snippets

Generate a sandboxed <iframe srcdoc> embed, an <a download> link for downloading the HTML file, and a SHA-256 Content-Security-Policy hash all pre-filled with your encoded HTML.

🔧

HTML Minification

Toggle the minify option to strip redundant whitespace and comments from the HTML before encoding. Reduces Base64 output size, making embedded data URIs smaller for use in attributes and HTTP headers.

↺

Reverse: Base64 → HTML

Paste any Base64 string or data:text/html;base64,… URI to decode it back to readable HTML. Includes a live preview of the decoded output and a download button to save it as an .html file.

🔒

100% Private

All encoding and decoding runs in your browser using TextEncoder and btoa(). No HTML content, no snippets, and no data URIs are ever sent to any server. Safe for internal templates and proprietary markup.

Use Cases

When You Need HTML as Base64

Base64-encoded HTML is used across frontend development, security headers, email tooling, and testing.

01

Sandboxed iframe Embedding

Use <iframe src="data:text/html;base64,…" sandbox> to embed a self-contained HTML document inside a page without hosting it on a server. The Base64 src ensures the content is treated as a separate origin, isolating its JavaScript from the parent page.

02

HTML File Download Links

Combine a Base64 data URI with an <a href="data:text/html;base64,…" download="report.html"> to let users download an HTML file from a fully static page no server, no backend, no file hosting required.

03

Content Security Policy (CSP) Hashes

CSP script-src and style-src directives can whitelist inline scripts and styles using SHA-256 hashes expressed as Base64. Use this tool to compute the Base64-encoded SHA-256 hash of an inline script block and paste it directly into your CSP header.

04

Email Template Testing

Email clients use Base64 to encode HTML parts in MIME multipart messages. Encode your email HTML template here to inspect how it will appear as a Base64 payload in a raw .eml file, or paste raw Base64 from an email header to decode and preview the HTML body.

05

Self-Contained Single-File Apps

Single-file HTML applications can encode sub-documents or frames as Base64 data URIs embedded directly in the main HTML. This allows complex multi-panel layouts, print previews, or documentation viewers to exist as one portable .html file with no external dependencies.

06

API & Webhook Payload Debugging

Some webhooks and APIs transmit HTML content as Base64-encoded strings inside JSON payloads common in email-sending APIs (SendGrid, Mailgun, SES) and document generation services. Decode any Base64 HTML payload here to inspect and preview the actual HTML content.

How It Works Technically

HTML to Base64 Encoding Explained

HTML is a text format, but Base64 operates on bytes. The first step is encoding the HTML string to bytes using UTF-8 (via the browser's TextEncoder API). UTF-8 represents ASCII characters as single bytes and non-ASCII characters as 24 byte sequences.

The resulting byte array is then fed into the Base64 encoder. Base64 groups every 3 bytes into 4 characters from a 64-character alphabet (AZ, az, 09, +, /). This produces output approximately 33% larger than the UTF-8 byte count of the HTML source.

The final data URI format is data:text/html;charset=utf-8;base64,[encoded]. Browsers can use this URI directly as the src of an <iframe> or the href of an <a> tag, rendering or downloading the HTML without any server request.

// HTML string → Base64 data URI
 
function htmlToBase64(html) {
  // Encode HTML to UTF-8 bytes
  const bytes = new TextEncoder()
    .encode(html);
 
  // Convert bytes to binary string
  const bin = String.fromCharCode
    (...bytes);
 
  // Base64 encode
  const b64 = btoa(bin);
 
  // Return full data URI
  return `data:text/html;
    charset=utf-8;base64,${b64}`;
}
FAQ

Frequently Asked Questions

Everything you need to know about encoding HTML to Base64.

A data URI is a URL that contains file content inline rather than pointing to an external resource. The format is data:[mime-type];[encoding],[data]. For HTML, this becomes data:text/html;charset=utf-8;base64,[base64-encoded-html]. Browsers treat this URI exactly like a normal HTML URL they parse and render the HTML content directly from the encoded string.
Yes. Set the src attribute of an <iframe> to the full data URI: <iframe src="data:text/html;charset=utf-8;base64,...">. Add the sandbox attribute to isolate the embedded document's scripts from the parent page. Note that Chrome and some browsers restrict data: URIs in iframes in certain security contexts for those cases, use srcdoc with the raw HTML string instead (see the Snippets tab).
Base64 encodes every 3 bytes as 4 ASCII characters, producing output roughly 33% larger than the source. For HTML, the source byte size depends on the character encoding ASCII-only HTML has a 1:1 byte ratio, while UTF-8 HTML with multi-byte characters (e.g. Chinese, Arabic, emoji) will have a higher byte count than its character count. The tool shows exact original size, byte count, and Base64 size after encoding.
CSP inline script and style hashes use SHA-256 (or SHA-384 / SHA-512), Base64-encoded. The format is 'sha256-[base64-hash]' in the CSP header. Use the Snippets tab to copy the pre-formatted hash value. Paste it into your Content-Security-Policy HTTP header or <meta http-equiv> tag to whitelist that specific inline block without using unsafe-inline.
The minify toggle strips leading and trailing whitespace from each line, collapses multiple consecutive whitespace characters into a single space, and removes HTML comments. It does not rename IDs or classes, modify attribute values, or alter the DOM structure. The minified HTML produces a smaller Base64 string, which is useful when the encoded output will appear in a URL, attribute, or HTTP header with length constraints.
Yes, but the Base64 data URI only encodes the HTML text itself it does not bundle referenced external stylesheets, scripts, images, or fonts. When the iframe or browser renders the HTML, it will attempt to load those external resources normally. If the page has no external dependencies (all styles and scripts are inline), it will render completely from the data URI alone. For truly self-contained pages, inline all CSS in <style> tags and all JS in <script> tags before encoding.
The srcdoc attribute on <iframe> accepts a raw HTML string (HTML-entity-escaped) as the document source, instead of a URL. Unlike src="data:...", srcdoc is universally supported and not subject to the same CSP data: URI restrictions. For most inline HTML embedding use cases, the srcdoc snippet in the Snippets tab is the more compatible approach. Use a data URI only when you need to pass the HTML as a plain URL string.
Switch to the Base64 → HTML tab and paste either the raw Base64 string or the full data:text/html;base64,... URI. The tool strips the data URI prefix automatically, decodes the Base64 payload using atob(), and displays the original HTML. A live preview renders the decoded HTML in a sandboxed iframe, and a download button saves it as an .html file.