Home
Categories
Social Media
Embed Bluesky Comment Threads on Any Web App – Bluesky Comments

Embed Bluesky Comment Threads on Any Web App – Bluesky Comments

czue First listed on September 23, 2025
Live Demo Download Source Code

Description:

Bluesky Comments is a React component library that lets you display comment threads from the Bluesky social network on your own website.

It pulls comments from a specified Bluesky post and renders them directly within your site’s pages.

Features

  • 💻 Dual Installation. Works as a React component in Node.js projects or can be added to any website via a CDN.
  • 🔎 Flexible Initialization. You can load comments by specifying a Bluesky author handle or a direct post URI.
  • 🗑️ Comment Filtering. Comes with built-in filters to hide common spam or low-quality comments, like those with no likes or only a pin emoji.
  • 🔧 Custom Filters. You can write your own filter functions to control exactly which comments appear.
  • ✨ Custom Empty State. Provides a callback function to handle cases where no comments are found, allowing you to display a custom message.

Preview

embed-bluesky-comment-threads

Use Cases

  • Bloggers. Integrate a comment system on your personal blog that leverages your existing Bluesky audience.
  • Project Documentation. Add a discussion section to your open-source project’s documentation page to gather feedback from users on Bluesky.
  • News Articles. Embed the conversation from a specific Bluesky post that discusses a news article directly below the article itself.
  • Portfolio Websites. Showcase feedback and discussion about your work by linking a relevant Bluesky thread.

How to Use It

1. Install the component library from npm.

npm install bluesky-comments

2. Import the component and its stylesheet.

import 'bluesky-comments/bluesky-comments.css';
import { BlueskyComments } from 'bluesky-comments';

3. use the component in your application. The component can be initialized by specifying the URI of a Bluesky post.

function MyPage() {
  return (
    <main>
      <h1>My Article</h1>
      <p>This is the content of my article.</p>
      <h2>Comments</h2>
      <BlueskyComments uri="https://bsky.app/profile/coryzue.com/post/3lbrko5zsgk24" />
    </main>
  );
}

4. All possible component props.

  • uri: A string representing the direct URL of the Bluesky post to display comments from.
  • author: A string for the Bluesky user’s handle. The library will find the most popular post by this user that links to the current page.
  • onEmpty: A callback function that runs if no comments are found or rendered.
  • commentFilters: An array of functions to hide specific comments. If any function returns true for a comment, it will not be shown.
  • enableDeer: A boolean that, when set to true, adds links to the deer.social Bluesky client.

FAQs

Q: How can I hide comments that are just spam or have very little content?
A: You can use the commentFilters option. The library provides several built-in filters, such as BlueskyFilters.NoLikes to hide comments with no likes or BlueskyFilters.MinCharacterCountFilter(10) to hide very short comments. You can also write your own custom filter functions.

Q: What is displayed if the specified post has no comments or cannot be found?
A: By default, nothing is displayed. You can use the onEmpty callback function to detect this state and render a custom message or fallback content.

Q: Is it better to load comments by author or by uri?
A: Using the uri property is more reliable because it points to a specific post. The author method depends on an API to find the most popular post linking to the current page, which can be inconsistent.

Add Comment