npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

live-comments

v0.1.3

Published

Drop-in comment/pin widget for Next.js apps — let external reviewers leave feedback on any page element

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

ricardo-fndricardo-fnd

Keywords

Readme

live-comments

Drop-in comment widget for Next.js apps. Let clients and reviewers leave feedback directly on your pages — pinned to specific elements or as general notes. No account needed for reviewers, just a name.

Features

  • Element pinning — pin comments to any page element (images, text, buttons, etc.)
  • General comments — leave page-level feedback
  • Visual pin indicators — floating comment cards on pinned elements
  • Cross-page navigation — click a comment to jump to the pinned element, even on other pages
  • Admin moderation — resolve and delete comments (env-var auth)
  • Email notifications — notify the site owner via SMTP when reviewers submit feedback
  • Multi-project support — share one database across projects, scoped by site ID
  • Zero CSS conflicts — fully styled with prefixed Tailwind
  • Portuguese (PT-PT) UI

Setup

1. Install

npm install live-comments

2. Configure environment variables

Add to your .env.local:

# Database (required)
LIVE_COMMENTS_DATABASE_URL=postgres://user:[email protected]/dbname

# Site ID — use a unique value per project sharing the same database
LIVE_COMMENTS_SITE_ID=my-project

# Admin credentials (for resolve/delete)
LIVE_COMMENTS_ADMIN_USERNAME=admin
LIVE_COMMENTS_ADMIN_PASSWORD=secret

# Email notifications (optional)
LIVE_COMMENTS_SMTP_HOST=smtp.gmail.com
LIVE_COMMENTS_SMTP_PORT=587
[email protected]
LIVE_COMMENTS_SMTP_PASS=app-password
[email protected]

3. Run database migration

npx live-comments setup

4. Add to your layout

// app/layout.tsx
import { LiveComments } from 'live-comments'
import 'live-comments/styles.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <LiveComments />
      </body>
    </html>
  )
}

5. Update next.config

// next.config.ts
const nextConfig = {
  serverExternalPackages: ["pg", "nodemailer"],
}

export default nextConfig

How It Works

  1. A floating comment button appears in the bottom-right corner
  2. Click it to open the comments panel or toggle comment mode
  3. In comment mode, hover over elements to highlight them, click to attach a comment
  4. Comments persist in your Postgres database
  5. Admin can log in via the toolbar menu to resolve/delete comments
  6. "Submeter comentários" sends an email summary to LIVE_COMMENTS_NOTIFY_EMAIL

Tech Stack

  • React client components (no external state library)
  • Server actions for all data operations
  • PostgreSQL via pg
  • Nodemailer for email
  • Tailwind CSS with lc- prefix (no style conflicts)

License

MIT