HTML to Base64 Converter

Encode HTML markup as Base64 or as a ready to use data:text/html URI.

HTML
Base64
Runs locally in your browser

About the HTML to Base64 Converter

Markup full of angle brackets, quotes and ampersands breaks the moment it is dropped into a JSON string, a CSV cell or a shell variable. Encoding it as Base64 flattens the whole document into a single run of safe characters that no parser will try to interpret, which is why email platforms and headless testing tools store templates this way.

Choose the raw output when the value goes into an API field, or the data URI output when you want a self contained address a browser can open directly. Both start from the UTF-8 bytes of your markup, so a template containing an em space, a currency symbol or a right to left name survives the round trip without turning into question marks.

The whitespace switch collapses the gaps between tags and squeezes runs of spaces before encoding. Because Base64 grows the payload by a third, trimming an indented template first is a real saving on anything sizeable. The URL-safe alphabet and the 64 or 76 character wrap widths are there for tokens and for MIME bodies respectively.

For a smaller result, minify the markup with HTML Minifier before encoding, and use Base64 to HTML when you need to read a blob someone sent you.

How to use

  1. Paste or type your markup in the left pane.
  2. Select data:text/html URI if you want an address the browser can open, or leave it on raw Base64.
  3. Tick Collapse whitespace first to shrink an indented template, then copy the encoded string.

Common questions

Can a data:text/html URI be opened in the address bar?
Most browsers block top level navigation to data URIs for security. They still work inside an iframe src or an anchor in a sandboxed context.
How much larger does the markup get?
About 33 percent, because every three bytes become four characters, plus padding.
Are non-English characters handled?
Yes. The markup is encoded from its UTF-8 bytes, so accents, Cyrillic, Arabic and emoji all decode back correctly.
Should I encode a whole page this way?
Only for transport or storage. Serving a real page as a data URI blocks caching, relative links and most browser tooling.