HTML to Base64 Converter
Encode HTML to Base64 data URIs for embedding in iframes, CSS, or email. Live preview included.
What Is HTML to Base64 Encoding?
HTML to Base64 encoding converts raw HTML markup into a Base64-encoded string that can be embedded directly in URLs, src attributes, CSS, or JSON — no file hosting required. The result is a data URI in the form data:text/html;charset=utf-8;base64,<encoded> that any modern browser can render as a complete web page.
This tool goes further than a plain encoder: it shows a live rendered preview of your HTML inside a sandboxed iframe, so you can immediately verify that your markup looks and behaves correctly before copying the output. You also get three separate copy buttons — one for the raw Base64 string, one for the full data URI, and one for a ready-to-paste <iframe> embed snippet.
When to Use Base64-Encoded HTML
Base64 HTML data URIs are the right tool for several specific situations:
- Sandboxed iframes — Embed self-contained HTML widgets or previews in a page without needing a separate URL or server route.
- Email clients — Some HTML email workflows use Base64-encoded inline content to include rich templates or previews without external links.
- Content Security Policy (CSP) — Data URIs can satisfy strict CSP policies where external
srcreferences are blocked. - Offline apps and PWAs — Store snippets of HTML inline in JavaScript or JSON without a separate file fetch.
- Code sharing and testing — Share a working HTML demo as a single URL that anyone can paste into a browser address bar to see it render immediately.
How to Embed HTML in an iframe Using a Data URI
The basic pattern is straightforward. Encode your HTML to Base64, then use it as the src of an iframe:
<!-- HTML to encode -->
<!DOCTYPE html>
<html>
<head><style>body{font-family:sans-serif;color:#3b82f6}</style></head>
<body><h1>Hello from Base64!</h1></body>
</html>
<!-- Resulting embed -->
<iframe
src="data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+..."
width="100%"
height="200"
sandbox="allow-scripts"
></iframe>The sandbox attribute is recommended for security: it prevents the embedded HTML from accessing cookies, localStorage, or the parent page's DOM unless you explicitly allow it.
HTML to Base64 in JavaScript
In a browser environment you can encode HTML with btoa(), but you need to handle UTF-8 first — btoa() only accepts Latin-1 characters:
// Safe UTF-8 encode
function htmlToBase64(html) {
return btoa(unescape(encodeURIComponent(html)));
}
// Or with TextEncoder (modern browsers)
function htmlToBase64Modern(html) {
const bytes = new TextEncoder().encode(html);
let binary = '';
bytes.forEach(b => binary += String.fromCharCode(b));
return btoa(binary);
}
const b64 = htmlToBase64('<h1>Hello 👋</h1>');
const dataUri = `data:text/html;charset=utf-8;base64,${b64}`;In Node.js, use Buffer.from(html).toString('base64') — it handles UTF-8 natively with no extra steps.
Email HTML Embedding
Some email clients — particularly Apple Mail, Thunderbird, and Outlook on macOS — support rendering data: URIs in iframes. This can be useful for embedding self-contained HTML email previews. However, major webmail clients including Gmail and Outlook Web App strip or block data URIs for security reasons. If you need cross-client compatibility, inline all styles and avoid relying on data URI rendering.
Decode Base64 Back to HTML
The reverse operation uses JavaScript's atob() function, with the reverse UTF-8 unwrapping:
// Decode Base64 string (or strip data URI prefix first)
function base64ToHtml(input) {
const b64 = input.replace(/^data:[^;]+;base64,/, '');
return decodeURIComponent(escape(atob(b64)));
}Switch this tool to Decode mode and paste any Base64 string or full data URI to get the original HTML back along with a live preview. This is handy for inspecting unknown data URIs you encounter in CSS, HTML source, or API responses.
For related encoding workflows, see our Base64 Encoder for encoding plain text, the Base64 Decoder for decoding any Base64 string, and the URL to Base64 tool for fetching and encoding remote resources.
How to Use
- Paste your HTML — Paste or type HTML into the editor. Works with full pages or HTML fragments.
- Click Convert — Click the Convert button. The tool encodes your HTML to Base64 using the browser's
btoa()function. - Preview the result — The Live Preview pane renders your HTML in a sandboxed iframe so you can verify it looks correct.
- Copy your output — Copy the Base64 string, full data URI, or iframe embed code using the individual copy buttons.
Frequently Asked Questions
What is an HTML Base64 data URI?
An HTML Base64 data URI is a self-contained URL that encodes an entire HTML document or fragment as a Base64 string, prefixed with 'data:text/html;base64,'. It lets browsers render the HTML directly from the URI without any server request — useful for iframes, email clients, and offline apps.
Why does btoa() fail with special characters?
JavaScript's btoa() only handles Latin-1 characters (byte values 0–255). If your HTML contains UTF-8 characters like emoji or non-ASCII text, you must first encode them: btoa(unescape(encodeURIComponent(html))). This tool handles that automatically.
How do I embed HTML in an iframe without a server?
Use a Base64 data URI as the iframe src attribute, e.g. an iframe element with src="data:text/html;charset=utf-8;base64,ENCODED_HTML". This tool generates that exact code for you. No server, no file hosting — the entire page is encoded in the URL.
Can I use a Base64 HTML data URI in an email?
Support varies. Some email clients (like Apple Mail or Outlook on Mac) will render a data URI in an iframe, but many web-based clients (Gmail, Outlook Web) block data URIs for security reasons. It's generally more reliable to inline all CSS and host images separately for email.
What is the size overhead of Base64 encoding?
Base64 encoding increases data size by approximately 33%. Every 3 bytes of raw HTML become 4 Base64 characters. A 10 KB HTML file will become roughly 13.3 KB after encoding. Keep this in mind when embedding Base64 data URIs in performance-sensitive pages.
How do I decode a Base64 data URI back to HTML?
Switch to Decode mode in this tool and paste your Base64 string or full data URI. The tool strips the 'data:text/html;base64,' prefix, decodes with atob(), and shows both the original HTML source and a live rendered preview.
Is there a file size limit for HTML to Base64 conversion?
There is no hard limit imposed by this tool — it runs entirely in your browser. In practice, data URIs above ~2 MB may cause slowness or be rejected by some browsers. For very large HTML documents, consider server-side hosting instead.
What's the difference between data:text/html and data:text/html;charset=utf-8?
The charset=utf-8 declaration tells the browser to interpret the decoded bytes as UTF-8 text, which is essential for non-ASCII characters (accents, CJK, emoji). Without it, some browsers default to Latin-1 and may render characters incorrectly. This tool always adds charset=utf-8 to be safe.
Comments
No comments yet. Be the first!