Web Snippet Builder
Turn Markdown into a Base64-encoded HTML data URI ready to drop into any iframe or CMS field.
What each step does
Write Markdown
Paste your Markdown into the input. It’s converted to HTML with GitHub-flavored Markdown on, so tables, strikethrough, and fenced code blocks work. Raw HTML in your Markdown passes straight through.
Minify HTML
Comments are removed, runs of whitespace collapse to a single space, and the gaps around block tags like <p>, <ul>, and <h2> are dropped.
Base64 Encode
The minified HTML is encoded as UTF-8 bytes, converted to Base64, and prefixed with data:text/html;charset=utf-8;base64, so it’s ready to paste and every browser reads the text as UTF-8.
Why the steps run in this order
- Markdown first, because it’s the easiest format to write and to review. Nobody wants to hand-edit HTML hidden inside a Base64 string.
- Minify before encoding. Base64 turns every 3 bytes into 4 characters, so the URI is about a third bigger than the HTML. Every byte you trim before encoding saves about 1.33 characters after.
- Encode last. Once it’s Base64 you can’t read or tweak it. To change the snippet, edit the Markdown and run the pipeline again.
- The minify step is small on Markdown output. The converter only puts newlines between tags, so a short snippet loses a few bytes. It earns more when your Markdown contains pasted HTML with comments and indentation.
Worked example: A store-hours box for a site builder
Your site builder has an embed block that takes an iframe URL but not raw HTML. You want a small hours box you can update by editing Markdown.
- Paste the 119 characters of Markdown below and press Run all.
- Markdown to HTML gives 173 characters: an <h2>, a paragraph with a <strong>, and a two-item list. The apostrophe in “We’re” becomes '.
- The minifier takes it to 167 characters. Only the newlines between tags go.
- The encoder returns a 260-character data URI that starts data:text/html;charset=utf-8;base64,PGgyPlN0b3JlIGhvdXJz. Press Copy result.
- In the site builder, paste the URI as the iframe source.
## Store hours We're open **Monday to Friday**, 9am to 5pm. - Closed on public holidays - Call us for same-day pickup
Result: A 260-character string that renders the box inside the iframe with no file to host. It uses the browser’s default styles, so add a <style> tag at the top of the Markdown if you want your own font.
What it won’t do
- Whitespace is collapsed everywhere except inside <pre>, <textarea>, <script>, and <style>, so code blocks keep their indentation but extra spaces in ordinary text become one.
- There’s no built-in styling. The iframe shows browser defaults, which usually means a serif font and blue links.
- Raw HTML in your Markdown is not sanitized. Only run Markdown you wrote or trust.
- Some CMS fields strip data: URLs when you save, and email clients don’t run iframes at all. Test in the real destination before you rely on it.
Tips for best results
- Keep the Markdown somewhere safe. The data URI is build output, not source.
- Leave a blank line between paragraphs. Lines without one between them end up in the same paragraph.
- Open the preview on each step to see what changed. It shows the first 200 characters of that step’s output.
- If the snippet needs a style, put a <style> tag at the very top of the Markdown so it lands before the content.
Questions
What is a data URI?
A URL that carries the content itself instead of pointing to a server. data:text/html;charset=utf-8;base64, followed by Base64 text is a complete HTML page in one string, and an iframe can load it with nothing to host.
Can I open the result in a browser tab to check it?
Yes. Paste it into the address bar and press Enter. Browsers stop web pages from sending you to data: URLs on their own, but typing or pasting one yourself works.
Can the snippet read cookies from the page it’s embedded in?
No. A data: iframe gets its own opaque origin, so scripts inside it can’t read the parent page’s cookies or storage. It also can’t load anything that needs your site’s login.
Is my Markdown sent anywhere?
No. All three steps run in your browser. Open the preview on each step to see exactly what it produced.