gem-hunter
主要言語: Svelte
Schema-first generated forms for Svelte 5. Supports zod, shadcn-svelte and more!
Schema-first generated forms for Svelte 5 with adapter-based schema support.
bun install autoform-svelte
If you use Zod schemas:
bun install zod
<script lang="ts"> import { Autoform } from "autoform-svelte"; import { zodAdapter } from "autoform-svelte/adapters/zod"; import { z } from "zod"; const schema = z.object({ query: z.string().min(1), enabled: z.boolean().default(true), }); let data = $state({ query: "", enabled: true, }); </script> <Autoform {schema} adapter={zodAdapter} bind:data onsubmit={(e) => console.log("submit", e.detail.data)} oncancel={() => console.log("cancel")} />
zodAdapter from autoform-svelte/adapters/zodjsonSchemaAdapter (default) from autoform-sveltecreateCustomAdapter() for custom librariesimport { createCustomAdapter } from "autoform-svelte"; const myAdapter = createCustomAdapter((schema) => schema.toJSON());
Use schema metadata to customize form rendering:
z.string().meta({ form: { label: "Message", widget: "textarea", placeholder: "Write your message", }, }); z.object({ title: z.string(), details: z.string(), }).meta({ form: { reorderable: true, }, });
Supported keys:
form.widget: "input" | "textarea" (string fields only, default is "input")form.label: field label overrideform.placeholder: placeholder text for supported controls (input/textarea/select/date/number)form.reorderable: enable object key reordering controls (default is disabled)schema: unknown (required)adapter?: SchemaAdapter (default: jsonSchemaAdapter)data: Record<string, any> (bindable)title?: stringsubmitLabel?: string (default: "Save")cancelLabel?: string (default: "Cancel")submit: { data: Record<string, any> }cancelerror: { errors: string[] }