Astro Forms Utils

Server component for Astro (validation and state management)

Full feature server components for Astro.js

This package is a framework for Astro.js that allows you to create forms and manage their state without any JavaScript.

It also allows you to validate the form on the client side and server side, and protect against CSRF attacks.

More features

• JWT session management
• Override response at runtime (useful for error handling)
• Custom server validation with zod
• Multiples app states at the same time

Show me the code

---import { Bind, BindForm, BButton, BInput } from"@astro-utils/forms/forms.js";importLayoutfrom"../layouts/Layout.astro";const form =Bind();let showSubmitText:string;function formSubmit(){showSubmitText=`You name is ${form.name}, you are ${form.age} years old. `;}---
<Layout>
<BindFormbind={form}>
{showSubmitText}
<h4>What you name*</h4>
<BInputtype="text"name="name"maxlength={20}required/>
<h4>Enter age*</h4>
<BInputtype="int"name="age"required/>
<BButtononClick={formSubmit}whenFormOK>Submit</BButton>
</BindForm>
</Layout>

Usage

Add the middleware to your server

npm install @astro-utils/forms

Add the middleware to your server

src/middleware.ts

importastroFormsfrom"@astro-utils/forms";import{sequence}from"astro/middleware";exportconstonRequest=sequence(astroForms());

Add to Layout

Add the WebForms component in the layout

layouts/Layout.astro

---import {WebForms} from'@astro-utils/forms/forms.js';---
<WebForms>
<slot/>
</WebForms>

Code Integration

This changes astro behavior to allow the form to work, it ensure the components render by the order they are in the file.

astro.config.mjs

import{defineConfig}from'astro/config';importastroFormsfrom"@astro-utils/forms/dist/integration.js";exportdefaultdefineConfig({output: 'server',integrations: [astroForms]});