atproto-embed

v2.1.2

Published

a month ago

Embed Bluesky posts, profiles, or a comment section with a single script tag. Supports up to 100 profiles from a list or starter pack.

0High
0Medium
0Low

romiojoseph

A near-zero-dependency, vanilla JS/CSS embed toolkit for Bluesky / AT Protocol content.

You load one script (dist/embed.js) and it auto-loads only what is needed for posts/discussions, profile cards, and members grids.

Disclaimer: Entirely vibe coded.

Features

Single entrypoint: one <script> tag (dist/embed.js) as loader.
Auto runtime loading: loads post.js, profile.js, and members.js only when matching containers exist.
Post + discussion embeds from AT URI or Bluesky-style post URLs.
Profile widget with optional avatar, cover, metrics, and CTA buttons.
Members widget for list URLs, list AT URIs, starter-pack URLs, and starter-pack AT URIs.

Usage

Load the loader:

<script src="https://cdn.jsdelivr.net/npm/atproto-embed@latest/dist/embed.js"></script>

Post

<div
  class="atproto-embed"
  data-uri="at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.post/3mhgprzgahs2l"
  data-mode="post"
  data-width="100%"
  data-max-width="728px"
  data-show-likes="true"
  data-show-reposts="true"
  data-show-replies="true"
  data-show-quotes="true"
  data-show-bookmarks="true"
  data-show-metrics="true"
  data-show-timestamp="true"
  data-show-actions="true"
  data-show-reply-context="true"
  data-show-embeds="true"
  data-show-images="true"
  data-show-video="true"
  data-show-external="true"
  data-show-quote-posts="true"
  data-external-layout="vertical"
  data-show-badges="true"
  data-show-labels="true"
  data-dark="false"
>
</div>

Discussion

<div
  class="atproto-embed"
  data-uri="at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.post/3mhgprzgahs2l"
  data-mode="discussion"
  data-width="100%"
  data-max-width="728px"
  data-show-likes="true"
  data-show-reposts="true"
  data-show-replies="true"
  data-show-quotes="true"
  data-show-bookmarks="true"
  data-show-metrics="true"
  data-show-timestamp="true"
  data-show-actions="true"
  data-show-reply-context="true"
  data-show-embeds="true"
  data-show-images="true"
  data-show-video="true"
  data-show-external="true"
  data-show-quote-posts="true"
  data-external-layout="vertical"
  data-show-badges="true"
  data-show-labels="true"
  data-show-reply-quote-labels="false"
  data-show-main-post="true"
  data-show-liked-by="true"
  data-show-replies-tab="true"
  data-show-quotes-tab="true"
  data-show-tabs="true"
  data-show-sort="true"
  data-show-join-button="true"
  data-replies-sort="oldest"
  data-dark="false"
>
</div>

Profile

<div
  class="atproto-profile"
  data-profile="bsky.app"
  data-width="100%"
  data-max-width="440px"
  data-size="full"
  data-show-avatar="true"
  data-show-display-name="true"
  data-show-handle="true"
  data-show-verification="true"
  data-show-description="true"
  data-show-cover="true"
  data-show-metrics="true"
  data-show-followers="true"
  data-show-following="true"
  data-show-posts="true"
  data-show-follow="true"
  data-show-connect="true"
  data-client-name="Bluesky"
  data-client-domain="bsky.app"
  data-dark="false"
>
</div>

Members

<div
  class="atproto-members"
  data-list="https://bsky.app/profile/bsky.app/lists/3lvpca43j5z26"
  data-avatar-only="false"
  data-width="100%"
  data-max-width="960px"
  data-columns="3"
  data-limit="15"
  data-show-avatar="true"
  data-show-display-name="true"
  data-show-handle="true"
  data-show-verification="true"
  data-show-metrics="true"
  data-show-posts="true"
  data-show-followers="true"
  data-show-following="true"
  data-dark="false"
>
</div>

Dark mode (optional)

By default widgets render in light mode. To enable the built-in dark palette, set data-dark="true" on any container.

Members: avatar-only mode (optional)

To render the members widget as avatars only (with a hover popover for details), set data-avatar-only="true".

Supported Inputs

Post embed (`data-uri`)

at://did:.../app.bsky.feed.post/<rkey>
https://<client>/profile/<handle-or-did>/post/<rkey>

Members widget (`data-list`)

List AT URI: at://did:.../app.bsky.graph.list/<rkey>
List URL: https://<client>/profile/<handle-or-did>/lists/<rkey>
Starter-pack AT URI: at://did:.../app.bsky.graph.starterpack/<rkey>
Starter-pack URL (profile form): https://<client>/profile/<handle-or-did>/starter-pack/<rkey>

Starter-pack inputs are resolved through app.bsky.graph.getStarterPack and then rendered via its backing list.