lexicon-agnostic
<atproto-lexicon-viewer>
Generic record viewer. Works with any record from any lexicon — Bluesky, custom, anything addressable by AT-URI.
Live
<atproto-lexicon-viewer src="at://did/<nsid>/<rkey>"></atproto-lexicon-viewer>Attributes
| Name | Type | Default | Description |
|---|---|---|---|
src * | string | — | AT-URI of any record, any lexicon. |
Parts
External CSS can target these via atproto-lexicon-viewer::part(<name>) { ... }.
| Part | What it is |
|---|---|
article / header / type / uri / cid | Header showing the record's metadata. |
tree | Collapsible JSON tree of the record value. |
What it does
Fetches any record from its authoring PDS via getRecord and
renders the result as a collapsible JSON tree. The header shows the record's
$type, AT-URI, and CID. Every object and array can be toggled
open/closed. Strings, numbers, booleans, and nulls each get their own color.
Why lexicon-agnostic matters
Most ATProto tooling hardcodes Bluesky-specific shapes. This component
does not. It renders whatever the record's JSON says — your custom
com.example.recipe lexicon, a follow record, a feed generator,
a starterpack, a post, anything. If the PDS returns it, this renders it.
For custom-lexicon builders, it doubles as a debug view: inspect real records on real PDSes without writing a JSON viewer or opening devtools.
Common uses
- Debug a post that looks weird on bsky.app — see what's actually in the record
- Show off what your custom lexicon looks like in the wild
- Explore what records a user has authored (combine with
<atproto-record-list>) - Generate screenshots for lexicon documentation
When to use this vs alternatives
<atproto-lexicon-viewer>— one record, raw JSON view.<atproto-record-list>— multiple records in a collection, each rendered as a lexicon-viewer.<atproto-post>— when the record is a post and you want the rendered UI, not raw JSON.