# bluesky-post-embed

> Custom element for embedding Bluesky posts

Latest version **1.0.6** (published 2025-12-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install bluesky-post-embed
pnpm add bluesky-post-embed
yarn add bluesky-post-embed
bun add bluesky-post-embed
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2025-12-04 |
| First published | 2024-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 56 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 72 |
| Author | externdefs |
| Maintainers | externdefs |

## Links

- npm: https://www.npmjs.com/package/bluesky-post-embed
- Repository: https://github.com/mary-ext/bluesky-embed
- Homepage: https://github.com/mary-ext/bluesky-embed#readme
- Issues: https://github.com/mary-ext/bluesky-embed/issues
- npm.io page: https://npm.io/package/bluesky-post-embed

## Dependencies (3)

- [@atcute/client](https://npm.io/package/@atcute/client.md) ^3.1.0
- [@atcute/bluesky](https://npm.io/package/@atcute/bluesky.md) ^2.1.1
- [@atcute/bluesky-richtext-segmenter](https://npm.io/package/@atcute/bluesky-richtext-segmenter.md) ^2.0.4

## Recent versions

- 1.0.6 (latest) — 2025-12-04
- 0.2.0-alpha.1 (alpha) — 2024-12-03
- 1.0.5 — 2024-12-13
- 1.0.4 — 2024-12-07
- 1.0.3 — 2024-12-04
- 1.0.2 — 2024-12-04
- 1.0.1 — 2024-12-03
- 1.0.0 — 2024-12-03
- 0.2.0-alpha.2 — 2024-12-03
- 0.1.6 — 2024-04-12
- 0.1.5 — 2024-03-30
- 0.1.4 — 2024-02-29
- 0.1.3 — 2024-02-18
- 0.1.2 — 2024-01-25
- 0.1.1 — 2024-01-24
- … 1 more at https://npm.io/package/bluesky-post-embed/versions

## README

# <bluesky-post-embed>

A custom element for embedding Bluesky posts.

## Installation

### via npm

```
npm install bluesky-post-embed
```

then, import the package on your app.

```js
import 'bluesky-post-embed';

import 'bluesky-post-embed/style.css';
import 'bluesky-post-embed/themes/light.css';
```

## Usage

```html
<bluesky-post src="at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.feed.post/3kj2umze7zj2n">
	<blockquote class="bluesky-post-fallback">
		<p dir="auto">angel mode</p>
		— Paul Frazee (@pfrazee.com)
		<a href="https://bsky.app/profile/did:plc:ragtjsm2j2vknwkz3zp4oxrd/post/3kj2umze7zj2n"
			>January 16, 2024 at 9:11 AM</a
		>
	</blockquote>
</bluesky-post>
```

### Attributes

- `src` **Required**  
  AT-URI of the post record
- `contextless` **Optional**  
  Whether to show the post without any context (no parent reply)
- `allow-unauthenticated` **Optional**  
  Whether to allow unauthenticated viewing
- `service-uri` **Optional**  
  URL to an AppView service, defaults to `https://public.api.bsky.app`

### Events

- `loaded`  
  Fired when the embed has successfully loaded the post
- `error`  
  Fired when the embed fails to load the post

## SSR usage

The embeds are powered by a static HTML renderer, this renderer can be used directly in your
server-rendering framework of choice for a zero-JS experience.

```tsx
import { fetchPost, renderPost } from 'bluesky-post-embed/core';

import 'bluesky-post-embed/style.css';
import 'bluesky-post-embed/themes/light.css';

// fetch the post
const controller = new AbortController();
const data = await fetchPost({
	src: `at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.feed.post/3kj2umze7zj2n`,
	signal: controller.signal,
});

// render the post
const html = renderPost(data);
return (
	<bluesky-post
		src={data.thread?.post.uri}
		dangerouslySetInnerHTML={{ __html: html }}
	></bluesky-post>
);
```

Check out examples for [Astro](https://github.com/mary-ext/bluesky-embed-astro) and
[SvelteKit](https://github.com/mary-ext/bluesky-embed-sveltekit).

---
_Source: https://npm.io/package/bluesky-post-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._