Finally,,, portable html

Did you know you can send entire HTML documents as URLs?

As everyone knows, website URLs use an http or https scheme—the scheme is the bit that goes before the colon. Almost everyone knows that is just one of many protocols most browsers are capable of using. Some other popular schemes include:

• tel
• ftp
• mailto
• file
• view-source
• about

But only most people know you can also use the data URI scheme! Here’s an example:

data:text/plain,hello%20world!

Copy that into your browser address bar and go, and you will see the text!

So you can encode most MIME types like this, including images, PDFs, etc. But since we’re in a browser, obviously the most fun thing to do is give it HTML because it will attempt to render the data.

data:text/html,<h1>Hello, World!</h1><p>Welcome to my website!</p>

You can also base64 encode the data, e.g., the same content as above:

data:text/html;base64,PGgxPkhlbGxvLCBXb3JsZCE8L2gxPjxwPldlbGNvbWUgdG8gbXkgd2Vic2l0ZSE8L3A+Cg==

Here’s a weird effect I got when I was playing around with this:

data:text/html;base64,PGJvZHkgc3R5bGU9ImJhY2tncm91bmQ6bGluZWFyLWdyYWRpZW50KHJnYig4NSwxMzgsMTE5LDAuNSkscmdiKDI1NSwyNTUsMjU1LDAuNSkscmdiKDE2NiwxMDgsMTU1LDAuNSkpLGxpbmVhci1ncmFkaWVudCgwLjI1dHVybixyZ2IoMCwwLDAsMC41KSxyZ2IoMTY2LDEwOCwxNTUsMC41KSxyZ2IoMjU1LDI1NSwyNTUsMC41KSxyZ2IoODUsMTM4LDExOSwwLjUpLHJnYigwLDAsMCwwLjUpKSI+PC9ib2R5Pg==

The obvious utility of this is sending your friends little HTML files without them having to download and open something—just click the link and the browser renders it!

I haven’t tested yet what the limits are with regards to sending a large amount of base64-encoded text content via chat apps or email links.