r3ply Demo#

The purpose of this page is to demonstrate what a site that uses r3ply could look like.

In r3ply, comments can be sent as emails. This allows visitors to use their own email clients, giving them a native app experience when writing. More importantly, however, is the pseudonym derived from their email address allows for content moderation while protecting their privacy. All without needing any type of login system!

The question then becomes can an email-based comment system be a good experience for users? This demo page is here to demonstrate the possibilities and to let you be the judge.

Check out the demo below or continue reading to see the details.

Writing Comments#

The experience of actually drafting a comment takes place in the user's email client of choice. This allows for them to compose offline, async, and using a native text editor if they like. This includes additional features that would be otherwise difficult or overkill to implement, like comment history, side-by-side comments scrolling, and in general is just an overall more modular design.

Privacy Respecting#

r3ply automatically anonymizes all the email addresses of the commenters, before they arrive for mode ration. This works by applying an HMAC-256 function on their email address, using the site's signet as a key envelope. You can read more about the details in the docs (or view the source on GitHUb).

Easy as Pushing a Button#

To make drafting an email comment easier, this demo pre-populates the details in a mailto link. If you combine that link with some CSS you get a button that is easy to use:

Easy Button.

But it encodes an email just like you would when submitting a form or making an API call.

Message-Id: <[email protected]>
Date: Wed, 5 Nov 2025 14:42:21 +0100
To: [email protected]
From: "Bob" [email protected] (supplied automatically by the email client)
Subject: /demo/

﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍
1. Write you comment above this ☝️ line
2. When you're ready just hit send 📤
3. Do NOT edit the email subject ⚠️

NOTE: Your email address will remain private

A subset of markdown can be used
(no images, headings, or script tags)

(Email signatures below 👇 will be ignored)
﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉﹉

-Bob

Content Addressable#

The Subject: field is just the path of the content that is being commented on. This creates a very flexible system, as the subject is any URL, like the path of a page, but you can also do much more.

Replying to Other Comments#

For example, implementing replies to other comments is straightforward. Let's assume the comment from above has id=bdc179db. In this case a response could just be a mailto link appending that id to the path:

Message-ID: <[email protected]>
From: <[email protected]>
To: <[email protected]>
Subject: /demo/#bdc179db
Date: Sun, 2 Nov 2025 23:00:00 +0000

Hi Bob! (...)

This makes for a very old-web style, comment addressable system that's perfectly suited for static websites.

Commenting on Text Fragments#

In fact, one could even take this even further and allow their site visitors to select and respond to specific text. To do this you would just append a text fragment (MDN ↗).

If you have javascript enabled you can try it out now. Just highlight some text on the page and you should see a comment icon appear.

And after clicking that icon, we see the same process as before:

Restricting Comments at Certain Paths#

Subject paths can also be restricted/opened (docs) flexibly in your r3ply config.

Comment Moderation#

After a comment has been received, it's processed by r3ply and then sent for moderation according to the site's config.

Moderating Channels#

You can configure different moderating channels, along with the ability to filter which get used and when.

In the case of this demo, the comments use GitHub moderation. To maintain total separation from the codebase, the comments themselves are stored in separate repo, and are pulled into the r3ply site as a git submodule. Here's an excerpt from the config:

[[moderation.github]]
owner = "asimpletune"
repo = "r3ply-site-comments"
"file_path_{}" = "{{ comment.ts_rcvd }}_{{ comment.id[:8] }}-{{ author.pseudonym[:7] }}.md"
"base_branch_{}" = "main"
"head_branch_{}" = "comment-{{ comment.ts_rcvd }}-{{ comment.id[:8] }}.md"
"commit_msg_{}" = """Comment submitted:\n
  - Sender: {{ author.pseudonym }}
  - Timestamp: {{ comment.ts_rcvd }}
  - Subject: {{ comment.subject.url }}
\n> {{ comment.txt | split(pat="\r\n") | join(sep="\n> ") }}"""
"pr_title_{}" = "New comment ({{ comment.id[:8] }}) on {{ comment.subject.url }} by author `{{ author.pseudonym[:7] }}`"
"allow*" = [ "*@spenc.es" ]

The allow* list above let's you specify the email address or pseudonym of users who should be allowed to bypass comment moderation altogether.

Instant Delivery#

In addition to this, comments can be made available immediately by enabling the cache option. They can then be fetch via frontend javascript.

[comments]
"paths*" = ["/demo/", "/docs/**/", "/project/**/"]
cache = true

Displaying Comments#

Last is what it's like to displaying the actual comments on your website. The short answer is that comments are rendered just like any other content. However r3ply gives you tools to make this as easy as possible.

Each comment arrives by default as JSON. This object represents the 'comment context' (docs), however you can configure how you want the comments to look by using a templating language (docs) that uses this context.

In addition to this, you can use re – the r3ply CLI tool – tool (docs) to simulate receiving comments via the local file system to get your r3ply config and website pipeline just right.

Comment Fields#

This demo intends to show one possible example of how these comments can be integrated into a static site. Each comment has been made to look similar to an actual email, which makes their fields readily understandable.

Comment-ID: <60e3283a…> (links to the comment, individually)
From: <5bcb8f1…> (pseudonym of sender)
Subject: /demo/
Date: Mon, 27 Oct 2025 15:25:31 +0000
Auth: [dkim : x , spf : x , dmarc : x] (auth details of the orig. email)

Now, if only we had a captain. . . What about it? How much is it? That's 100 pieces of eight. I'd like to make you an offer. Great!

Comment Navigation#

This demo also implements a hn style commenting system with prev, next, parent, and root controls, in addition to adding a # control for a comment to link to itself.

On mobile it uses a shorthand version of the same navigation, but / for root, .. for parent, and . for self, along with ⭣ and ⭡ for next and prev.