Astro Actions Has a Free API You Should Know About

Astro Actions lets you define and call type-safe backend functions directly from your Astro components. No REST endpoints, no fetch boilerplate — just define a function and call it.

Why Astro Actions Simplifies Full-Stack Development

A developer building a contact form in Astro had to create an API route, handle CORS, validate input manually, and write fetch calls. With Astro Actions, they defined one function and called it from their form — type-safe, validated, zero boilerplate.

Key Features:

• Type-Safe — Full TypeScript inference from server to client
• Input Validation — Built-in Zod validation
• Form Support — Works with progressive enhancement
• Error Handling — Structured error responses
• Zero Config — No API routes needed

Define an Action

// src/actions/index.ts
import { defineAction } from "astro:actions"
import { z } from "astro:schema"

export const server = {
  subscribe: defineAction({
    input: z.object({ email: z.string().email() }),
    handler: async ({ email }) => {
      await addToNewsletter(email)
      return { success: true }
    }
  })
}

Call from Client

---
// src/pages/index.astro
---
<script>
import { actions } from "astro:actions"

const form = document.querySelector("form")
form.addEventListener("submit", async (e) => {
  e.preventDefault()
  const result = await actions.subscribe({ email: "[e-mail]" })
  if (result.data?.success) alert("Subscribed!")
})
</script>

Why Choose Astro Actions

1. No API boilerplate — define function, call function
2. Built-in validation — Zod schemas for free
3. Progressive enhancement — works without JavaScript too

Check out Astro Actions docs to get started.

---

Need web automation? Check out my Apify actors or email [e-mail] for custom solutions.