Atproto markup for HTML

JP’s a Dad now 😳 May 24, 2026
Source

Today it's likely just us #atprotodevs who want to see the at:// uris behind the interesting or useful parts of the atproto-powered sites we visit, but I think we need an agreed way to markup HTML so browser extensions can hook in.

I want your feedback in determining if this suits, and if it does, implementing it on your sites, so the convention spreads!

Using RDFa

A short while back I prototyped this with RDFa tags, and built a browser extension to show off that data. It was as simple as adding two attributes to an HTML element representing atproto data:

<div typeof="schema:Thing" resource="at://uri">
  Some element showing data derived from atproto data
</div>

I added these to my Slay the Spire 2 atproto site, and built the Where it's AT browser extension (Firefox, Chrome, Safari) to highlight & expose the at:// uris, as something of a demo.

A screen recording showing the functionality of Where it's AT — highlighting at:// uris on the Slay the Spire 2 site, clicking through to PDSls, then altering the settings to use aturi instead, and demoing clicking through to there as well.

Rationale

I think there are a number of ways you could use metadata like this:

Going further

If we really like this, I'd propose that the fine folks at @atproto.com ship an RDFa schema specifically for atproto (which could extend later to include permissioned spaces 😉) so that the syntax could provide clearer indications than the default schema:Thing I've used above.

An illustrative (but not well thought through) example:

<html prefix="at: https://atproto.com/ns#">
<body>
  <article
    typeof="at:Record"
    resource="at://did:plc:abc123/app.bsky.feed.post/3kxy..."
  >
    <!-- Something derived from that post -->
  </article>
  <cite>
    by
    <span typeof="at:Identity" resource="did:plc:abc123">Abc123</span>
  </cite>
</html>

It could also support <link typeof="at:Renders" resource="at://did/collection/rkey"> in the <head> to indicate that the whole page is a rendering of the provided at:// uri.

This needs you!

If you like this & build atproto apps then please write here with feedback of what you'd use it for, what's missing, or what you'd change (and why!) — and you can just implement it on your site.

Discussion in the ATmosphere

Loading comments...