# atproto-wc

> Framework-agnostic custom elements for rendering ATProto content — posts, profiles, feeds, threads, backlinks, arbitrary records. 34 elements, ~12KB gzipped, zero runtime dependencies. Works anywhere custom elements work: plain HTML, Astro, Next, Vite, Svelte, plain ESM.

Content is read straight from the authoring PDS (`com.atproto.repo.getRecord` / `listRecords`, with the PDS discovered from the DID document). Engagement (likes, reposts, replies, quotes, follows, mentions, citations, blocks, list memberships) comes from the Constellation backlink index. No calls to `public.api.bsky.app`. The practical consequence: every element works against any lexicon — point `<atproto-record-list>` at `com.example.myschema` and it renders; point `<atproto-backlinks>` at a custom record and you get every collection+path linking to it.

A `src` attribute accepts three shapes, auto-detected: an AT-URI (`at://did:plc:.../app.bsky.feed.post/...`), a `bsky.app` URL (parsed into an AT-URI), or a handle (resolved via `/.well-known/atproto-did` on the handle's domain).

## Agent reference

- [llms-full.txt](https://atproto-wc.com/llms-full.txt): Complete agent-friendly reference — install, every element with its attributes, styling tokens, `::part()` names, programmatic API, framework integration, and common gotchas. Fetch this first if you're writing code against the library.

## Docs

- [Homepage](https://atproto-wc.com/): Overview + live showcase + the full element grid.
- [Styling](https://atproto-wc.com/styling): CSS custom properties, `::part()` targets, four worked themes (warm / compact / elevated / serif).
- [Atoms overview](https://atproto-wc.com/atoms): Composition guide for the six primitive elements — use these when the high-level components don't fit.

## Source

- [GitHub repo](https://github.com/iammatthias/atproto-wc): Source, issues, and the README (a user-facing guide).
- [npm package](https://www.npmjs.com/package/atproto-wc): `bun add atproto-wc` or `npm i atproto-wc`.
- [CDN](https://cdn.jsdelivr.net/npm/atproto-wc/dist/browser.js): Drop-in `<script type="module">` — auto-registers every element.

## External services

- [Constellation](https://constellation.microcosm.blue): Default backlink index. Override with `setConstellationEndpoint()` or the per-element `constellation="..."` attribute.

## Quick start

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/atproto-wc/dist/browser.js"></script>

<atproto-post src="https://bsky.app/profile/iammatthias.com/post/3mgkx2wf4pc2w"></atproto-post>
<atproto-profile src="iammatthias.com"></atproto-profile>
<atproto-feed src="iammatthias.com" limit="10"></atproto-feed>
```