Emoji buttons on each post. Click to react. Fetch reaction counts via the API to see which posts people actually care about.
Updated March 2026
Static changelogs are great until you want to know if anyone actually reads them. This adds emoji reactions to each post. Users click a thumbs-up or rocket, and the reaction goes to Sutrena with the post_id. Fetch reaction counts via the API to see which posts got the most engagement. No database, no API server. Just Astro, Cloudflare Pages, and one Sutrena form. `sutrena_collect` with `autoEntryPageId` creates the reaction form and auto-publishes to the changelog.
Architecture
| Tool | Role | Cost |
|---|---|---|
| Astro | Static site generator | Free (open source) |
| Cloudflare Pages | Static site hosting | Free |
| Sutrena | Reaction storage, public API | $0 (free) / $29/mo (Pro) |
Total cost: $0-$29/mo
Pro is $29/month for 100 projects and all your other work too. Build five blueprints on Pro and it is still $29/month. That is where the value is — at scale.
Astro generates your changelog as static HTML. Each post page includes a ReactionBar component with client:load so it hydrates in the browser. Click an emoji, it POSTs the post_id and reaction type to Sutrena. publicResults is on so the component can fetch current counts.
Fetch submissions via the public API, group by reaction type and post_id to see which emoji types people use and which posts they react to.
Form Definition
Hidden post_id and a reaction type. Emoji names stored as text (thumbsup, heart, tada, rocket) for clean grouping when you fetch via the API. publicResults lets the frontend show counts without auth.
{
"name": "Changelog Reactions",
"fields": [
{
"name": "post_id",
"type": "hidden"
},
{
"name": "reaction",
"label": "Reaction",
"type": "select",
"options": [
"thumbsup",
"heart",
"tada",
"rocket"
],
"required": true
}
],
"publicResults": true
}Frontend Integration
An Astro web component with emoji buttons. Each button POSTs post_id and reaction to Sutrena. Uses a custom element so it works with Astro's island architecture. Replace frm_YOUR_FORM_ID with yours.
---
// src/components/ReactionBar.astro
// Use with client:load to hydrate in the browser
---
<reaction-bar data-post-id={Astro.props.postId}></reaction-bar>
<script>
class ReactionBar extends HTMLElement {
connectedCallback() {
const postId = this.dataset.postId;
const FORM_ID = "frm_YOUR_FORM_ID";
const emojis = [
{ key: "thumbsup", display: "\u{1F44D}" },
{ key: "heart", display: "\u{2764}\u{FE0F}" },
{ key: "tada", display: "\u{1F389}" },
{ key: "rocket", display: "\u{1F680}" },
];
this.innerHTML = emojis
.map(
(e) =>
`<button data-reaction="${e.key}" style="font-size:1.5rem;cursor:pointer;background:none;border:none;padding:0.25rem;">${e.display}</button>`
)
.join("");
this.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", async () => {
const reaction = btn.dataset.reaction;
const res = await fetch(
`https://sutrena.com/api/forms/${FORM_ID}/submit`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ post_id: postId, reaction }),
}
);
if (res.ok) btn.style.opacity = "0.5";
});
});
}
}
customElements.define("reaction-bar", ReactionBar);
</script>Yes. sutrena_collect creates the form and webhooks in one call. sutrena_launch deploys pages with analytics. The code examples below show primitive APIs for full control, but compound tools handle most setups faster.
By default, yes. To limit it, add a hidden user_id field (from cookies or local storage) and set uniqueBy: ["post_id", "user_id"]. For anonymous reactions, unlimited is usually fine.
Fetch submissions filtered by post_id from the public API, group by reaction type in your frontend, and display the count next to each button. A few lines of JavaScript.
Yes. The concept is the same for Hugo, Eleventy, Jekyll, whatever you use. Swap the Astro component for a vanilla JS script or framework-specific component.
No. The page still loads as static HTML. The reaction component hydrates after load and makes one fetch call. Clicks are independent requests that do not block the UI.
Sutrena is the web runtime for AI agents. Forms, Pages, Analytics, Webhooks, Automations — all through 67 MCP tools and one REST API. Your agent creates web artifacts, humans interact with them, and your agent gets the data back. Use any one feature or all of them together.
Pages
Deploy HTML instantly
Forms
Collect structured data
Automations
DSL-based pipelines with 14 step types
Analytics
Privacy-first, no cookies
Webhooks
Slack, Discord, Telegram
1. Get a trial key (no auth, no signup)
curl -X POST https://sutrena.com/api/trial2. Create anything — a page, form, automation, or analytics site
# Create a form
curl -X POST https://sutrena.com/api/forms \
-H "Authorization: Bearer st_trial_xxx" \
-H "Content-Type: application/json" \
-d '{"name": "waitlist", "fields": [{"name": "email", "label": "Email", "type": "email", "required": true}]}'
# Or deploy a page
curl -X POST https://sutrena.com/api/pages \
-H "Authorization: Bearer st_trial_xxx" \
-H "Content-Type: application/json" \
-d '{"slug": "index", "title": "My Site", "html": "<h1>Live</h1>"}'Get a trial API key instantly with no signup, or create an account for the full experience.