Feedback wanter: Building Custom Comments in Umbraco

Questions
1

Hi everyone,

I’m implementing a lightweight custom comment solution for a headless Umbraco v13 + Next.js blog (niche site, ~10–30 comments per month, no third‑party SaaS). I’ve decided to model the link between a Blog Post and its Comments using the Umbraco Relations API. I’d really value feedback on whether this design is sound, and if there are pitfalls I’m overlooking.

Core Idea

  • A single Comment Document Type; every comment is a content item based on this Document Type

  • A “Comments” container content item (using a List View) that holds all Comment nodes to centralize moderation.

  • A custom Relation Type defines a one‑to‑many relationship:

    • Parent object type: Blog Post (Document)

    • Child object type: Comment (Document)

    • Direction: Blog Post → Comment (unidirectional)

  • When a new Comment is created and saved, the system creates a relation linking that Comment to the Blog Post.

  • Add a custom tab on each Blog Post content item that lists only the related comments. Each comment to link to edit-view for easier moderation.

  • A boolean approved property (defaults to false). Only items where approved = true are exposed to the public delivery layer / headless API.

Data Model (Initial Draft)

Comment Document Type properties:

  • AuthorName (string)

  • AuthorEmail (string or optional)

  • Content (plain text or sanitized limited markup; length capped)

  • CreatedDate (set automatically on creation or stored explicitly)

  • Approved (bool, default false)

  • BlogPostReference (either relation or stored UDI/Key)

  • IP (possibly hashed for privacy + rate limiting)

Moderation Approach

Given the low volume, I intend to start simple:

  1. Use the List View on the “Comments” container to open a Comment content item and toggle Approved.

  2. Add custom List View columns: Excerpt, Blog Post Title, Approved?, Created Date, Author (and maybe hashed IP).

  3. On each Blog Post’s “Comments” tab: show related comments (sorted newest first) with a link that opens the specific Comment content item in the backoffice for editing/approval.

Public Submission Flow

  1. Blog post page renders already approved comments by calling a read‑only endpoint filtered on approved = true.

  2. Public comment form POSTs to a custom endpoint (e.g. /api/comments/submit).

  3. Endpoint validates + sanitizes, then creates a new Comment content item (Approved = false).

Security / Abuse Mitigation (Right-Sized)

  • Server-side + client-side sanitization of user input

  • Length limit for Content

  • Basic IP-based rate limiting

  • CSRF-token for submission form

  • Authentication for API-endpoint

  • (Maybe:) Implement honeypots

  • (Maybe:) Implement captcha

Does this overall approach look sensible for a low-volume scenario? Am I overlooking a simpler pattern—or a future regret?

Thanks in advance for any guidance or “we tried that and wish we’d done X” stories!

2

Hi @axmacher, welcome to the forum!

It’s best to avoid storing user-generated content in Umbraco content nodes - use a custom database table, or some other mechanism (if you’re headless with Next.js, you could even fetch the comments directly from where the data’s stored in your Next.js app).

Umbraco’s hardware requirements are largely determined by node count, and storing lots of infrequently edited content can get expensive - in the case of comments, where you won’t need all of Umbraco’s content features, it’s not worth it.

Using a custom table means that you don’t need to use the relation API, just store the post’s UDI in the comment and lookup the comments based on that.

To avoid having to build a backoffice interface for editing/approving the comments you could then use Umbraco UI Builder, which is free for a single collection.

And you’ll definitely want to use some kind of captcha, the bots will find the comment form and abuse it (also bear in mind, it’s one thing to wake up one day to find 10,000 unwanted rows in a database, it’s a whole other thing finding 10,000 unwanted Umbraco nodes :scream:).

1 Like
3

Hi @JasonElkin ! Thank you so much for the feedback. I’ve not worked with Umbraco UI Builder before so definitely having a closer look. If you don’t mind a follow-up question on this though - If I use UI Builder for moderation, does it support permissioning (e.g., only certain editors can approve comments)?

Also, I hear you on the captcha :melting_face:

1 Like
4

By default collections live in their own section, so you’ll need to assign a user group access before users can see/edit the comments.

I haven’t fully looked into the APIs available, but there may be options for more fine grained control. IDK if, for example, you can hide the “save” button based on these docs:

You can almost certainly add some custom logic in a notification to prevent certain actions, e.g. changing a property if the user doesn’t have permission.

You can also make the approval process smoother with a custom action:

1 Like
5

Read the post and found myself pining for UIOMatic.. (licensing vs UiBuilder [previously Konstruct])

referring to github, looks like a start made on v13 porting…

Though wouldn’t want to send you on a wild goose chase on an unrelased/unknown state package… :slight_smile:

6

@mistyn8 Thanks for the tip and links! UIOMatic does look interesting… I’ll keep an eye on it, but agreed, probably best not to rely on an unreleased package just yet. Appreciate it!