Zero JavaScript by default. Add a form island when you need one.
Updated March 2026
Astro ships zero JS by default. Interactive bits opt in via directives like client:load. It supports React, Vue, Svelte, and Preact alongside its own template syntax. Build output is static HTML. So your pages are fast. Really fast. And you only pay for interactivity where you actually need it.
Astro makes static pages. Sutrena hosts them and adds data collection without breaking the zero-JS default. For simple forms, use a plain HTML form with a small inline script. For richer interactivity, make a React or Svelte island with client:load.
This is a good fit for content sites that need occasional forms: feedback widgets, contact forms, newsletter signups, reaction buttons, polls in blog posts. Astro generates the static content, Sutrena hosts and serves it.
For hosting: build your Astro site, then deploy the output HTML to Sutrena Pages via the API, MCP tools, or a deploy script. Multi-page sites work with hierarchical slugs (blog/my-post). Upload images and assets to Sutrena's CDN. Add a custom domain. The entire site — pages, forms, dashboards, and assets — runs on Sutrena with no external hosting needed. If your Astro site uses SSR or edge functions (not static output), you need a runtime host like Vercel or Cloudflare Pages instead.
---
// src/components/ReactionBar.tsx
// An Astro island component -- use with client:load
import { useState } from "react";
const reactions = ["Great", "Helpful", "Confusing", "Outdated"];
export default function ReactionBar({ postSlug }: { postSlug: string }) {
const [sent, setSent] = useState(false);
async function vote(reaction: string) {
const res = await fetch(
"https://sutrena.com/api/forms/frm_your_id/submit",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
reaction,
post_slug: postSlug,
}),
}
);
if (res.ok) setSent(true);
}
if (sent) return <p>Thanks for your feedback!</p>;
return (
<div style={{ display: "flex", gap: "0.5rem" }}>
{reactions.map((r) => (
<button key={r} onClick={() => vote(r)}>
{r}
</button>
))}
</div>
);
}
---
<!-- src/pages/blog/[slug].astro -->
<!-- Usage in an Astro page: -->
<!-- <ReactionBar client:load postSlug={slug} /> -->
<!-- Sutrena form created via API: -->
<!-- POST https://sutrena.com/api/forms -->
<!-- {
"name": "Blog Reactions",
"fields": [
{ "name": "reaction", "type": "select", "options": ["Great", "Helpful", "Confusing", "Outdated"], "required": true },
{ "name": "post_slug", "type": "hidden" }
],
"createDashboard": true
} -->
<!-- Dashboard DSL for reaction analytics: -->
<!-- {
"version": 1,
"widgets": [
{ "type": "metric_card", "title": "Total Reactions", "value": "count(*)" },
{ "type": "pie_chart", "title": "Reaction Breakdown", "groupBy": "reaction" },
{ "type": "bar_chart", "title": "Reactions by Post", "groupBy": "post_slug" },
{ "type": "line_chart", "title": "Reactions Over Time", "groupBy": "$submitted_at:day" }
]
} -->Astro: free, open source. Cloudflare Pages: free. Sutrena Free: $0/month for 10 projects. Sutrena Builder: $9/month for 50 projects with 5,000 submissions each. Total: $0/month for small projects, $9/month for production. Pro: $29/month for 200 projects and unlimited submissions.
These examples use Astro v5 stable. v6 is in beta as of early 2026. The client:load directive and island pattern work the same in both, but import paths and config may change.
Only the island component ships JS. If you use embed.js, it loads async and is about 2 KB. The rest of your page stays zero-JS.
You can point a plain HTML form's action at the Sutrena submit endpoint with method POST. But that does a full page redirect on submit. A small inline script gives a better experience.
Any UI framework -- React, Vue, Svelte, Preact. The form submission is a standard fetch call. No Sutrena-specific integration needed.
Yes. Fetch from the Sutrena API in your frontmatter. Good for displaying totals or top-voted features as static content that updates on each build.
Sutrena is the web runtime for AI agents. Three primitives — pages, forms, and dashboards — accessible through one API. Your agent creates web artifacts, humans interact with them, and your agent gets the data back. Framework-agnostic. Works from any MCP client or HTTP client.
1. Get a trial key (no auth, no signup)
curl -X POST https://sutrena.com/api/trial2. Create a form + dashboard from a template
curl -X POST https://sutrena.com/api/forms \
-H "Authorization: Bearer st_trial_xxx" \
-H "Content-Type: application/json" \
-d '{"templateId": "waitlist", "createDashboard": true}'Get a trial API key instantly with no signup, or create an account for the full experience.