atproto-wc

Framework-agnostic web components for ATProto. Content via PDS-direct reads, engagement via the Constellation backlink index. No Bluesky AppView dependency.

13 components
~62KB minified
0 runtime deps
Shadow DOM + tokens + parts

<script type="module" src="https://unpkg.com/atproto-wc/browser"></script>

<atproto-post src="at://did:plc:.../app.bsky.feed.post/..."></atproto-post>

Showcase

High-level components

<atproto-post>
Full post embed: author, text, embeds, counts.
<atproto-thread>
Ancestors + focal + replies. Full conversation arc.
<atproto-profile>
Profile card with banner, avatar, bio, stats.
<atproto-feed>
Author's posts + reposts, paginated.
<atproto-comments>
Threaded replies via Constellation.
<atproto-lexicon-viewer>
Any record, any lexicon — JSON tree.
<atproto-record-list>
Paginate any collection on any repo. Custom lexicons included.
<atproto-repo>
Browse a repo's every collection. Lazy-expand to records.
<atproto-blobs>
Paginated grid of a repo's blob CIDs. Images render inline.
<atproto-latest-commit>
Repo head: rev + decoded 'last activity' age.
<atproto-repo-status>
Active / deactivated / takendown status badge.
<atproto-like-count>
Live like count for a post.
<atproto-likers>
Avatar grid of who liked a post.
<atproto-reposters>
Avatar grid of who reposted.
<atproto-quoters>
Posts that quoted the target.
<atproto-followers>
Avatar grid of followers.
<atproto-mutuals>
Intersection of two actor sets.
<atproto-backlinks>
Lexicon-agnostic link discovery.
<atproto-generic-count>
Total record count for arbitrary subject + source.
<atproto-distinct-count>
Unique-DID count — the 'how many people' twin.
<atproto-mentions>
Accounts that mentioned this user in a post.
<atproto-citations>
Posts that link to any URL — free referer tracking.
<atproto-list-memberships>
Lists that include this user (bsky curated lists).
<atproto-list>
Render a graph.list record with its members.
<atproto-blockers>
Public blocks. Use thoughtfully.
<atproto-verification>
Decentralized verification claims against a DID.
<atproto-pinned-badge>
Inline badge when a post is its author's pinned.
<atproto-gate-badge>
Inline badge for posts with reply/quote limits.

Atomic primitives

The smaller building blocks. Compose your own layouts when the high-level components don't fit. See the composition guide →

<atproto-avatar>
Just the avatar circle. PDS-resolved, optionally linked.
<atproto-display-name>
User's display name. Falls back to handle.
<atproto-handle>
@handle from the DID document.
<atproto-time>
Relative time formatter. No network.
<atproto-rich-text>
Faceted text rendering. No network.
<atproto-engagement-row>
4 parallel Constellation counts. Subset via `show`.