portabl.ink

Self-contained web pages in a link

portabl.ink is a tool to create self-contained web pages in a link. Use portabl.ink to share portable prose, decentralised documents, pocket prototypes, and more!

Examples

Hint: To open a portable link, use the context menu to open the link in a new tab. Or drag the link itself into your tab bar!

1. portable poetry(2,490 byte link 38% compressed from 3.97 KB doc)
2. tiny tic-tac-toe(1,078 byte link 23% compressed from 1.37 KB doc)
3. fluid simulation(11,278 byte link 67% compressed from 34.40 KB doc)

How it works

portabl.ink works by using data URLs. Within a data URL, the tool bundles both the compressed data and the instructions needed to decompress and bootstrap that data. This produces a self-contained, compressed document in a single portable link.

Code is on GitHub.

Limitations

Much of a portable link’s limitations come from being a data URL, which can sometimes make links tricky to use. The following lists some issues and their workarounds:

1. Links can get lengthy – It’s recommended to save links as bookmarks instead.
2. Browsers block navigation to these links – Explicitly opening the links in a new tab can work.
3. Some email apps strip these links. Some apps don’t accept these at all (ex. link in bio).

Sometimes, the best way to use a portable link is to paste it into the browser’s address bar.

Library

The core link bundling function can be used as a library.

import pack from "https://kalabasa.github.io/portabl.ink/pack.js", or download pack.js.

// example_usage.js
import pack from "./pack.js";

async function copyLink(element) {
  const url = await pack(element.innerHTML);
  navigator.clipboard.writeText(url);
}

More on GitHub.

Why?

For fun

Related tools

Similar projects include itty.bitty, meml.ink, selfedit, and SingleFile.