Gathering detailed insights and metrics for bluesky-comments
Gathering detailed insights and metrics for bluesky-comments
Installations
npm install bluesky-commentsDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
22.13.0
NPM Version
11.3.0
Releases
11
Languages
4
TypeScript
CSS
JavaScript
HTML
TypeScript (80.42%)
CSS (11.81%)
JavaScript (5.45%)
HTML (2.32%)
Developer
czue
Download Statistics
Total Downloads
36,334
Last Day
5
Last Week
84
Last Month
266
Last Year
36,334
GitHub Statistics
MIT License
198 Stars
133 Commits
8 Forks
5 Watchers
1 Branches
6 Contributors
Updated on Aug 29, 2025
Maintainers
1
Package Meta Information
Latest Version
0.12.0
Package Id
bluesky-comments@0.12.0
Unpacked Size
8.07 MB
Size
1.03 MB
File Count
14
NPM Version
11.3.0
Node Version
22.13.0
Published on
May 23, 2025
Total Downloads
Cumulative downloads
Total Downloads
36,334
Last Day
-58.3%
5
Compared to previous day
Last Week
16.7%
84
Compared to previous week
Last Month
-25.9%
266
Compared to previous month
Last Year
0%
36,334
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Bluesky Comments
Embed Bluesky comments on your website easily.
Installation in a Node.js project as a React component
To use this library in a React project, first install the library:
1npm install bluesky-comments
Then import it (and the CSS) in your React app/page/component:
1import 'bluesky-comments/bluesky-comments.css' 2import { BlueskyComments } from 'bluesky-comments';
And use it in any React component like this:
1function App() { 2 return ( 3 <> 4 <div>Comments Will Display Below</div> 5 <BlueskyComments author="you.bsky.social" /> 6 </> 7 ) 8}
See the Usage section below for details on the options and API.
Installation on any website via CDN
To add a comments section to any website, follow these steps
1. Add an element to your page where you want the comments to show up
Add something like this to your site:
1<div id="bluesky-comments"></div>
You can use whatever id you want, but it has to match the container id used in the getElementById call
in the usage step.
2. Add the CSS files
Add the default styles the page <head> somewhere in a base template:
1<link rel="stylesheet" href="https://unpkg.com/bluesky-comments@<VERSION>/dist/bluesky-comments.css">
3. Add source maps for React
Add the following importmap to your page anywhere before you use the library:
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react-dom/client": "https://esm.sh/react-dom@18/client"
}
}
</script>
4. Import the library and instantiate the component with React in an ES module script:
1<script type="module"> 2 import { createElement } from 'react'; 3 import { createRoot } from 'react-dom/client'; 4 import { BlueskyComments } from 'https://unpkg.com/bluesky-comments@<VERSION>/dist/bluesky-comments.es.js'; 5 6 const author = 'you.bsky.social'; 7 const container = document.getElementById('bluesky-comments'); 8 const root = createRoot(container); 9 root.render( 10 createElement(BlueskyComments, { 11 "author": author, 12 }) 13 ); 14</script>
See the Usage section below for details on the options and API.
Usage
Examples in this section use the React JSX syntax. If you're installing on a project that doens't
use JSX or any build tooling (i.e. a regular website), you can instead use the createElement
function and pass the react options in.
For example, the following two examples are equivalent:
React JSX:
1<BlueskyComments 2 author="you.bsky.social" 3 uri="https://bsky.app/profile/coryzue.com/post/3lbrko5zsgk24" 4/>
Equivalent without JSX:
1root.render( 2 createElement(BlueskyComments, { 3 author: "you.bsky.social", 4 uri: "https://bsky.app/profile/coryzue.com/post/3lbrko5zsgk24", 5 }) 6);
Initializing the library based on the author
Note: this functionality is dependent on a flakey API and is not very reliable. More information here.
1<BlueskyComments author="you.bsky.social" />
If you use this mode, the comments section will use the most popular post by that author that links to the current page.
Initializing the library based on a post URL
1<BlueskyComments uri="https://bsky.app/profile/coryzue.com/post/3lbrko5zsgk24" />
If you use this mode, the comments section will use the exact post you specify. This usually means you have to add the comments section only after you've linked to the article.
(Advanced) Providing custom default empty states
You can pass in a onEmpty callback to handle the case where there are no comments rendered
(for example, if no post matching the URL is found or there aren't any comments on it yet):
1<BlueskyComments 2 uri="https://bsky.app/profile/coryzue.com/post/3lbrko5zsgk24" 3 author="you.bsky.social" 4 onEmpty={ 5 (details) => { 6 console.error('Failed to load comments:', details); 7 document.getElementById('bluesky-comments').innerHTML = 8 'No comments on this post yet. Details: ' + details.message; 9 } 10 } 11});
(Advanced) Filtering comments
You can pass in an array of filters to the commentFilters option. These are functions that take a comment and return a boolean. If any of the filters return true, the comment will not be shown.
A few default filters utilities are provided:
BlueskyFilters.NoPins: Hide comments that are just "📌"BlueskyFilters.NoLikes: Hide comments with no likes
You can also use the following utilities to create your own filters:
BlueskyFilters.MinLikeCountFilter: Hide comments with less than a given number of likesBlueskyFilters.MinCharacterCountFilter: Hide comments with less than a given number of charactersBlueskyFilters.TextContainsFilter: Hide comments that contain specific text (case insensitive)BlueskyFilters.ExactMatchFilter: Hide comments that match text exactly (case insensitive)
Pass filters using the commentFilters option:
1import {BlueskyComments, BlueskyFilters} from 'bluesky-comments'; 2 3<BlueskyComments 4 // other options here 5 commentFilters={[ 6 BlueskyFilters.NoPins, // Hide pinned comments 7 BlueskyFilters.MinCharacterCountFilter(10), // Hide comments with less than 10 characters 8 ]} 9/>
You can also write your own filters, by returning true for comments you want to hide:
1const NoTwitterLinksFilter = (comment) => { 2 return (comment.post.record.text.includes('https://x.com/') || comment.post.record.text.includes('https://twitter.com/')); 3} 4<BlueskyComments 5 // other options here 6 commentFilters={[ 7 NoTwitterLinksFilter, 8 ] 9/>
Enabling deer.social links
If you'd like to include links to deer.social in addition to BlueSky,
you can pass the enableDeer parameter when initializing the library:
1<BlueskyComments 2 // other options 3 enableDeer=enableDeer={true} 4/>
Development
To develop on this package, you can run:
npm install
npm run dev
This will set up a local development server with a simple page showing comments, and watch for changes.
You can also run npm run build (build once) or npm run watch (watch for changes)
to copy the built files to the dist directory.
From there you can reference the files in your own projects.
No vulnerabilities found.