{"id":15062434,"url":"https://github.com/withastro-utils/utils","last_synced_at":"2026-01-31T13:50:24.910Z","repository":{"id":65151389,"uuid":"576205000","full_name":"withastro-utils/utils","owner":"withastro-utils","description":"Server components for Astro (server + client validation)","archived":false,"fork":false,"pushed_at":"2025-11-01T15:14:16.000Z","size":10775,"stargazers_count":36,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-12T04:59:33.307Z","etag":null,"topics":["asp-framework","asp-net","aspx","astrojs","code-behind","elanat","form-binder","form-controls","form-library","form-validation","forms","hooks","htmx","js-free","postback","seo-friendly","ssr","view-state"],"latest_commit_sha":null,"homepage":"https://withastro-utils.github.io/docs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/withastro-utils.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"ido-pluto"}},"created_at":"2022-12-09T08:59:31.000Z","updated_at":"2026-01-10T12:42:49.000Z","dependencies_parsed_at":"2023-11-18T15:25:08.267Z","dependency_job_id":"df2522c2-7c13-441f-9234-cc504424787c","html_url":"https://github.com/withastro-utils/utils","commit_stats":null,"previous_names":["astro-metro/metro-forms"],"tags_count":142,"template":false,"template_full_name":null,"purl":"pkg:github/withastro-utils/utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withastro-utils%2Futils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withastro-utils%2Futils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withastro-utils%2Futils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withastro-utils%2Futils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withastro-utils","download_url":"https://codeload.github.com/withastro-utils/utils/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withastro-utils%2Futils/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28944789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T13:02:32.153Z","status":"ssl_error","status_checked_at":"2026-01-31T13:00:07.528Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asp-framework","asp-net","aspx","astrojs","code-behind","elanat","form-binder","form-controls","form-library","form-validation","forms","hooks","htmx","js-free","postback","seo-friendly","ssr","view-state"],"created_at":"2024-09-24T23:36:05.825Z","updated_at":"2026-01-31T13:50:24.896Z","avatar_url":"https://github.com/withastro-utils.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n# Astro Forms Utils\n\n\u003cimg src=\"./assets/logo.rounded.png\" alt=\"Astro Utils\" height=\"300px\"/\u003e\n\n\n[![Build](https://github.com/withastro-utils/utils/actions/workflows/release.yml/badge.svg)](https://github.com/withastro-utils/utils/actions/workflows/build.yml)\n[![License](https://badgen.net/badge/color/MIT/green?label=license)](https://www.npmjs.com/package/@astro-utils/forms)\n[![License](https://badgen.net/badge/color/TypeScript/blue?label=types)](https://www.npmjs.com/package/@astro-utils/forms)\n[![Version](https://badgen.net/npm/v/@astro-utils/forms)](https://www.npmjs.com/package/@astro-utils/forms)\n\u003c/div\u003e\n\n\u003e Server component for Astro (validation and state management)\n\n\n# Full feature server components for Astro.js\n\nThis package is a framework for Astro.js that allows you to create forms and manage their state without any JavaScript.\n\nIt also allows you to validate the form on the client side and server side, and protect against CSRF attacks.\n\n### More features\n- JWT session management\n- Override response at runtime (useful for error handling)\n- Custom server validation with `zod`\n- Multiples app states at the same time\n\n# Show me the code\n```astro\n---\nimport { Bind, BindForm, BButton, BInput } from \"@astro-utils/forms/forms.js\";\nimport Layout from \"../layouts/Layout.astro\";\n\nconst form = Bind();\nlet showSubmitText: string;\n\nfunction formSubmit(){\n    showSubmitText = `You name is ${form.name}, you are ${form.age} years old. `;\n}\n---\n\u003cLayout\u003e\n    \u003cBindForm bind={form}\u003e\n        {showSubmitText}\n        \n        \u003ch4\u003eWhat you name*\u003c/h4\u003e\n        \u003cBInput type=\"text\" name=\"name\" maxlength={20} required/\u003e\n    \n        \u003ch4\u003eEnter age*\u003c/h4\u003e\n        \u003cBInput type=\"int\" name=\"age\" required/\u003e\n    \n        \u003cBButton onClick={formSubmit} whenFormOK\u003eSubmit\u003c/BButton\u003e\n    \u003c/BindForm\u003e\n\u003c/Layout\u003e\n```\n\n## Usage\n\n### Add the middleware to your server\n\n```\nnpm install @astro-utils/forms\n```\n\nAdd the middleware to your server\n\n\n`src/middleware.ts`\n```ts\nimport astroForms from \"@astro-utils/forms\";\nimport {sequence} from \"astro/middleware\";\n\nexport const onRequest = sequence(astroForms());\n```\n\n### Add to Layout\nAdd the `WebForms` component in the layout\n\n`layouts/Layout.astro`\n```astro\n---\nimport {WebForms} from '@astro-utils/forms/forms.js';\n---\n\u003cWebForms\u003e\n    \u003cslot/\u003e\n\u003c/WebForms\u003e\n```\n\n### Code Integration\nThis changes astro behavior to allow the form to work, it ensure the components render by the order they are in the file.\n\n`astro.config.mjs`\n```js\nimport { defineConfig } from 'astro/config';\nimport astroForms from \"@astro-utils/forms/dist/integration.js\";\n\nexport default defineConfig({\n    output: 'server',\n    integrations: [astroForms]\n});\n```","funding_links":["https://github.com/sponsors/ido-pluto"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithastro-utils%2Futils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithastro-utils%2Futils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithastro-utils%2Futils/lists"}