svebcomponents/atproto 
I built this to dogfeed @svebcomponents.dev - so it works with every framework that supports custom elements and can even be rendered on the server with svelte, react, vue & astro. It will hydrate on the client, and once users log in, get live updates from the atproto ecosystem via spacedust.
The component comes with a bridge backend, that is needed for oauth callback, authentication & live updates to posts via SSE . The default bridge is hosted on my own VM and I pledge to continue running it free of charge as long as my wallet permits.
But if you'd rather use cookie based auth, or are just a huge nerd (props!) you can self host the bridge with the building blocks I provide - or have an agent vibe up a backend against the web component's API specifications.
This is mostly built on community infrastructure, it uses @microcosm.blue 's spacedust as its interaction firehose & constellations for showing you your likes. Thank you @bad-example.com! I am beyond excited about what the ATmosphere ecosystem means for the web!
first!
Reply from "here" (docs) is really #cool ! @theosteiner.de ;)
TODO (for me) - buildFacets (# & @theosteiner.de ) - language of the reply - i18n options
@bsky.app Could we have: repo:app.bsky.feed.post?action=create&action=delete-ONLY_CREATED_FROM_THIS_APP Atm, delete is too much 🤗
happy you like it, means a lot!! facets, i18n & language would all be very valuable things to add - looking forward to your contribution
This is awesome! 😍
FYI @theosteiner.de the "Open original" link on the demo points to the wrong thread 🤔
Ugh, forgot to update that one - thanks!
Omg this is siiiiickk!! 🔥 Congrats on the launch!
Nice !
Neat stuff!
<script type="module"
src="https://atproto.svebcomponents.dev/cdn" >
</script>
<atproto-comments
thread="https://bsky.app/profile/theosteiner.de/post/3mreni33v7k2c"
></atproto-comments>
<style>
atproto-comments {
--atproto-comments-accent: #2563eb;
--atproto-comments-radius: 4px;
font-family: ui-monospace, monospace;
}
</style>By default, <atproto-comments> only sends requests to
its hosted bridge if the user signs in and therefore explicitly opts
into using the service. It stores only what it needs and is commited to
respecting your privacy.
The styles for <atproto-comments> are scoped by shadow
DOM. CSS custom properties and parts adapt the component to the typography
of the host page.
Once users sign in, they receive live updates via server sent events
from the hosted bridge.
You can also self-host the bridge for advanced security (cookie based auth)
and control every layer of the stack.
Setup options
Each level unlocks more fine-grained control over how you distribute the comment component and where data flows from.
Pasted into static HTML or a CMS. See the snippet above.
Add the package and import it once into your own bundle. Type definitions and a custom elements manifest ship with it. Install guide ↓
The thread is rendered into declarative shadow DOM on the server and adopted in place on the client. SvelteKit, Vue, Astro & React are supported by svebcomponents as of today. See the SSR guide ↓
Run OAuth, posting, and live events on your own infrastructure instead of the hosted service. See self-hosting ↓
Quickstart
The custom element works with Svelte, Astro, Eleventy, React, plain HTML, or anything else that can load an ES module.
pnpm add @svebcomponents/atproto.comments
import "@svebcomponents/atproto.comments" ; <atproto-comments
thread="https://bsky.app/profile/bsky.app/post/…"
></atproto-comments>Server rendering
Server rendering works the same way everywhere: import the component's
renderer entry (@svebcomponents/atproto.comments/ssr) once
on the server, its browser entry on the client, and write <atproto-comments> like any other tag. A small adapter
renders declarative shadow DOM during SSR — including the thread fetch — and
the browser adopts it in place on hydration, so the first paint already shows
comments.
@svebcomponents/ssr
Add the Vite plugin before Svelte's and import the renderer entry in hooks.server.ts.
@svebcomponents/ssr-react/rsc
Point jsxImportSource at the adapter, load both entries, use
the tag as JSX.
@svebcomponents/ssr-vue
Add the Vite plugin before Vue's and app.use() the adapter
on both app instances.
@svebcomponents/ssr-astro
Add the integration, import the renderer entry in frontmatter and the browser entry in a script.
Setup guide ↗Architecture
Reads go straight from the browser to a public AppView. Writes run through the bridge's OAuth flow and land as ordinary posts in the commenter's own PDS repo. Live updates travel the other way: Spacedust signals the bridge, which fans out one SSE stream per viewer. The bridge coordinates all of this; it never stores or serves comment content.
Component reference
You probably only need to set thread. The remaining
properties allow fine control over sorting, depth limits, moderation
handling, and infrastructure choices.
| Property | Type | Default | Purpose |
|---|---|---|---|
thread | string | — | An AT URI, or a post URL from any viewer using the /profile/{did}/post/{record_id} scheme. |
service | string | hosted | Bridge backend service OAuth, posting, and live events. Change when self-hosting. |
readonly | boolean | false | Hides in-page sign-in and posting. |
live | signed-in | all | off | signed-in | Who gets live updates? Affects when data is sent to the bridge, so please check the privacy policy before changing. |
sort | oldest | newest | likes | oldest | How comments are ordered at each level. |
max-depth | number | 6 | Maximum nested reply depth rendered inline. |
labels | hide | collapse | show | collapse | Treatment for moderation-labelled posts. |
viewer | URL | bsky.app | App view used for profile and post links. Think bluesky, mu.social, etc. |
viewer-name | string | hostname of the viewer property | “Reply on …”. Defaults to Bluesky for the default viewer. |
appview | URL | public.api.bsky.app | Public AppView used to fetch thread snapshots. |
show-root | boolean | false | Render the discussion's root node above the replies. |
replies | expanded | collapsed | expanded | Collapsed keeps replies behind a toggle and fetches only the root post until they are opened. With show-root, renders a post card. |
composer | dialog | inline | dialog | Inline opens the reply composer below the post instead of as a modal, so it stays inside the element's own box (for example in a resizing iframe). |
page-url | string | - | The embedding page's canonical URL. Enables no-JavaScript sign-in on a same-origin, cookie-mode service. |
fetched-at | epoch ms | ISO date | - | When threadData was fetched. Set automatically by SSR prefetch; age older than stale-time triggers one background refresh. |
stale-time | number (ms) | 60000 | How long a preloaded snapshot is trusted before one client-side refresh from the public AppView. Infinity disables it. |
Call element.revalidate() to request a refresh outside the
normal event path. Concurrent calls are deduplicated.
atproto-comments:loadedThe first client-side snapshot loaded.
atproto-comments:revalidatedAn interaction or comment event refreshed the snapshot.
atproto-comments:commentThe live service observed a new reply URI.
atproto-comments:live-statusThe upstream changed between connected and reconnecting.
atproto-comments:signed-inThe reader completed ATProto OAuth.
atproto-comments:postedThe reader published a reply.
atproto-comments:errorA load or background refresh failed.
Right now
Since 2026-08-23
This is almost everything the bridge will ever track. We are committed to your privacy.
Self-hosting
The service property selects the backend used for OAuth, posting,
and the SSE stream. Set it to use your own deployment instead of the hosted
bridge.
In cross-origin deployments, such as the hosted bridge, the component holds a short-lived, origin-bound bridge JWT.
A self-hosted bridge can be same-origin and therefore use a http only
same-site cookie instead, bolstering security.
Both modes run the same
open-source bridge code, which stores only transient auth data and basic,
privacy respecting metrics.
The bridge sends live thread updates via SSE to connected users,
leveraging the incredible spacedust project. Showing
readers which posts they have already liked or reposted is a backlink
question, answered by its sibling constellation. Both are
part of microcosm.
Component
<atproto-comments
thread="at://did:plc:…/app.bsky.feed.post/…"
service="/atproto"
></atproto-comments>Server
createAtprotoCommentsService({
publicUrl: "https://your.blog",
basePath: "/atproto",
sessionMode: "cookie",
sessionSecret,
keys,
stateStore,
sessionStore,
serviceSessionStore,
});
svebcomponents.dev @svebcomponents.dev
<atproto-comments> is a web component that allows you to simply drop a thread onto your page and have users read & write comments on your site. all your users need is an ATmosphere account (bluesky, eurosky, their own PDS hosted from their basement) to log in using oauth. atproto.svebcomponents.dev