content surface · pds

<atproto-blobs>

Browsable grid of a repo's blob CIDs, MIME-aware. Images render as <img>, videos as <video controls>, audio as <audio controls>, everything else as a labeled download tile.

Live

<atproto-blobs src="pfrazee.com" limit="20"></atproto-blobs>

Attributes

Name	Type	Default	Description
`src` *	`string`	—	Handle or DID.
`limit`	`number`	`20`	Blobs per page.

Parts

External CSS can target these via atproto-blobs::part(<name>) { ... }.

Part	What it is
`head`	Counter line above the grid.
`grid`	Tile grid container.
`tile / cid`	Each blob tile + the CID label overlay.
`loadmore / empty`	Pagination button and empty-state.

What it does

Calls com.atproto.sync.listBlobs and paginates CIDs. For each CID, it issues a HEAD request to getBlob to read the Content-Type header, then renders an element appropriate to the MIME:

image/* → <img>
video/* → <video controls playsinline preload="metadata">
audio/* → <audio controls preload="metadata">
anything else → labeled download tile with a content-type-appropriate icon

listBlobs itself returns CIDs only. The HEAD roundtrip is cheap (headers only, no body download) and runs in parallel per page. The PDS exposes Content-Type via Access-Control-Expose-Headers so browsers can read it cross-origin.

Use cases

Protocol debugging: verify that uploaded media landed in a repo. No need to fish through getRecord responses for blob references.
Media archaeology: browse every image a user has ever attached to a record (orphaned or not).
Custom lexicon builders: if your records reference blobs, this surfaces them in one view.

Notes

Some PDSes return 501 MethodNotImplemented for listBlobs — the component catches that and shows a short explanation. Public Bluesky PDSes tend to implement it; self-hosted installs vary.

If a PDS doesn't expose Content-Type via CORS, the HEAD request will succeed but the header read returns null — those blobs fall through to the "other" tile. Rare but possible.

Blobs are raw — no orphan filtering, no grouping by record. If your repo has 10,000 blobs, you'll paginate through 10,000 CIDs.