5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T1042,

About this Component

CommentsSection brings real, persistent comments to any Framer page. Comments sync across browsers via Firebase Realtime Database, or fall back to localStorage for single-device use. Every colour, font, and behaviour is customizable from the property panel — no code required.

✓ Firebase Sync & Persistence

Comments sync live across every browser and device using Firebase Realtime Database. Just paste your database URL into the property panel. No backend or code required. Falls back to localStorage automatically if no URL is set. Takes 5 minutes to set up, and I am here to help feel free to reach out if needed.

✓ Rich Text & Image Uploads

The compose box expands on click and supports bold, italic formatting and inline image uploads. Images display inline in the comment thread. Image upload can be toggled off from the panel.

✓ Threaded Replies & Likes

Every comment supports nested replies with their own like counts. Choose between a heart or thumbs-up icon from the panel.

✓ Top Comment Card

The most-liked comment is automatically surfaced at the top in a highlighted card. It updates in real time as likes change and only appears once there is a clear leader with at least one like.

✓ Moderation & Reporting

Users can report comments via the ··· overflow menu. Once reports reach the configurable threshold, the comment is auto-hidden from public view. Admins can review, restore, or permanently delete flagged comments using Admin-Mode in the panel.

✓ Spam Protection & Pagination

Built-in per-author daily post limits prevent spam without requiring login. Long threads paginate automatically with a "See all responses" button. Both limits are configurable from the property panel.

✓ Custom Avatars & Initials

Upload a set of avatar images from the panel. Each commenter is assigned one consistently based on their name. If no avatars are uploaded, the component falls back to auto-generated initials with unique hashed colours.

✓ Full Design Control

Every visual detail is exposed in the property panel — 18 colour tokens, font picker, corner radius, padding, dividers, and more. Designed to match any design system from light minimal to dark editorial.

Admin mode: When toggled on, you can remove reported comments.

*Note: Component Preview is currently in admin-mode. Comment remove or report as you test.

Questions & Support

Need more features with this component? Feel free to reach out anytime — I'm here to assist you!

Get in Touch ↗

Change Log

March 25/26: Users can now delete or edit their own comments.
March 28/26: Added translation support with a Language dropdown. English, Italiano, Français, Español, বাংলা and 한국어. Feel free to request other languages.

5a:[["$","$L5d",null,{"post":{"id":"019ce81f-e870-743c-92cf-f27918c68f16","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3959c349-b7b6-42d4-bfc4-08e17a4128bf","name":"Blue Jackson","slug":"blue-jackson","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/70511/avatar-ST9N8w8q9FA94O2Ff0qf5Hhxj0iXoO.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Odv13ikIHuWei2JMx1ip","resolved":true,"title":"Comment Section","body":"$5e","bodyJson":null,"introduction":"For Blog Posts and Articles","slug":"comment-section","author":{"framerUserId":"3959c349-b7b6-42d4-bfc4-08e17a4128bf","name":"Blue Jackson","slug":"blue-jackson","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/70511/avatar-ST9N8w8q9FA94O2Ff0qf5Hhxj0iXoO.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Odv13ikIHuWei2JMx1ip/comment-section-v3ftJhBxVO0R675HQpacpPr99lPb81","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-05T21:31:37.042Z","updatedAt":"2026-06-19T17:17:27.174Z","publishedAt":"2026-03-13T16:55:31.184Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://commentsection.framer.website/","price":"10","paymentUrl":"https://bluejackson.lemonsqueezy.com/checkout/buy/ffdc8580-e448-4dd3-aade-5e60f1faeca4","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"GJbY5X7Ma4N7hzRVbMDG","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-13T16:55:31.184Z","updatedAt":"2026-03-13T16:55:31.184Z","reported":false}}],"$L5f"]

Suggested for you