-
Notifications
You must be signed in to change notification settings - Fork 251
Home
This document covers advanced use for itty.bitty
Drag one into the editor to convert it.
Paste a codepen URL into the editor. Get started with a template or look at some samples. This must be a Pro account to work.
One simple way to host is to forward a domain. Just paste the itty.bitty url in the redirect.
Most shortlink providers (and Twitter shortlinks) can serve as a host, but note that they may have a size limit.
While most sites support 2000 bytes, some can handle more. Maximum sizes for links in various apps & Browsers (approximate, size in bytes)
App | Max bytes | Notes |
---|---|---|
4,088 | ||
Slack | 4,000 | |
Discord | 4,000 | |
iMessage | 4,000 | URLs with more than 300 nonbreaking characters in a row will be split. LZMA compression usually fixes this, but raw data urls may fail. |
QR Code | 2,953 | |
Bitly | 2,048 | |
Browser | ||
Google Chrome (win) | 32,779 | |
(mac) | Lots | Only 32,775 in url bar |
Firefox | >64,000 | |
Microsoft IE 11 | 4,043 | Only shows 2,083 |
Microsoft Edge | 2,083 | Anything over 2083 will fail |
Android | 8,192 | |
Safari | Lots | Only shows 5211 |
Because they use standard formats, you can generate and decode itty.bitty links from the command line
Encoding (Mac)
echo -n 'hello world' | lzma -9 | base64 | xargs -0 printf "https://itty.bitty.site/#/%s\n"
Encoding (Linux)
echo -n 'hello world' | lzma -9 | base64 -w0 | xargs -0 printf "https://itty.bitty.site/#/%s\n"
Encoding (Win Git/WSL)
echo -n 'hello world' | xz --format=lzma -9 | base64 -w0 | printf "https://itty.bitty.site/#/%s\n" "$(cat -)"
Encoding (Python)
'https://itty.bitty.site/#/'+base64.b64encode(lzma.compress(bytes("hello world",encoding="utf-8"), format=lzma.FORMAT_ALONE, preset=9)).decode("utf-8")
Encoding (Node.js)
'https://itty.bitty.site/#/'+Buffer.from(lzma.compress("Hello World", 9)).toString('base64')
Decoding (Mac)
echo -n "[URL]" | sed -E 's/^.*#[^\/]*\/\??//g' | base64 -D | lzma -d
Decoding (Linux)
echo -n "[URL]" | sed -E 's/^.*#[^\/]*\/\??//g' | base64 -d | lzma -d
Decoding (Win Git/WSL)
echo -n "[URL]" | sed 's/^.*#[^\/]*\///g' | base64 -d | xz --format=lzma -d
IB V.2 features (https://itty.bitty.app)
These features are works in progress, and may be unstable or change. The legacy renderer is available at itty.bitty.site/v1
IB2 supports Gzip and Brotli compression. Gzip will be used in lieu of lzma if it yields a smaller result. Client side brotli compression is not implemented. Compression type will be inferred from the first few bytes of data if not specified
echo -n 'hello world' | brotli | base64 | xargs -0 printf "https://itty.bitty.app/#/%s\n"
echo -n 'hello world' | gzip -9 | base64 | xargs -0 printf "https://itty.bitty.app/#/%s\n"
Encrypted content will prompt for a password before decoding. Encryption type should be specified with cipher=\[aes|des|...];
.
echo -n 'hello world' | gzip -9 | openssl enc -aes-256-cbc | base64 | xargs -0 printf "https://itty.bitty.app/#/data:text/plain;cipher=aes;gzip64,%s\n"
Title, description, and image can be included as path components before the # fragment. If present, these will be rendered as the preview data.
https://itty.bitty.app/Title-text/d/Description-text/https://example.com/image.png/#/DATA
An emoji can be specified in lieu of an image url:
https://itty.bitty.app/Title-text/d/Description-text/🤓#/DATA
Note: Including this metadata requires serverside rendering - the body of the content will still be rendered clientside.
Itty bitty app supports custom renderers for structured data. Recipes and bookmarklets are special cased currently, but any renderer can be implemented by specifying a render attribute (render=https://script_url.js;) within the data URL.
Recipes use a ld+json format, which is commonly found on many recipe sites - these can be extracted using the bookmarklet at https://bookmarklet.bitty.site
#/data:application/ld+json;base64,RECIPE_JSON
Javascript bookmarklets are displayed with basic instructions for how to add them to your browser : https://itty.bitty.app/#Show_Alert/javascript:alert('hello')