Svelte 5 Schema-Driven Form Generator (JSON Schema + Zod)

Quick Start

Define a schema, pass the adapter, and render <Autoform>.

<script lang="ts">
  import { z } from "zod";
  import { Autoform } from "autoform-svelte";
  import { zodAdapter } from "autoform-svelte/adapters/zod";

  const schema = z.object({
    name: z.string().min(1),
    email: z.string().email(),
  });
</script>

<Autoform {schema} adapter={zodAdapter} onsubmit={(e) => console.log(e.data)} />

Field Metadata

Customize widgets, placeholders, and object key reordering with .meta({ form: { ... } }).

const schema = z.object({
  message: z.string().meta({
    form: {
      widget: "textarea",
      label: "Message",
      placeholder: "Write your message",
    },
  }),
  shape: z.object({
    type: z.string(),
    radius: z.number(),
  }).meta({
    form: {
      reorderable: true,
    },
  }),
});

Examples

Event Registration

Editable schema expression with automatic form generation.

Schema

Register for Event

Form Data

{}

Shape Builder

Discriminated unions and nested object rendering.

Schema

Shape Builder

Form Data

{}

Theming

Autoform ships with a native HTML theme by default. For styled forms, use the shadcn-svelte theme or create your own.

Native (default)

<!-- Works out of the box with plain HTML elements -->
<Autoform schema={jsonSchema} onsubmit={handleSubmit} />

shadcn-svelte

// lib/theme.ts
import { createShadcnTheme } from "autoform-svelte/themes/shadcn";
import { Button } from "$lib/components/ui/button";
import { Input } from "$lib/components/ui/input";
import { Textarea } from "$lib/components/ui/textarea";
import { Checkbox } from "$lib/components/ui/checkbox";
import { Label } from "$lib/components/ui/label";
import * as Select from "$lib/components/ui/select";
import * as Card from "$lib/components/ui/card";
import * as Field from "$lib/components/ui/field";

export const shadcnTheme = createShadcnTheme({
  Button, Input, Textarea, Checkbox, Label, Field, Select, Card,
});

Using a Theme

<!-- Per-form -->
<Autoform {schema} theme={shadcnTheme} adapter={zodAdapter} />

<!-- Or globally via provider -->
<AutoformProvider theme={shadcnTheme} adapter={zodAdapter}>
  <Autoform {schema} />
  <Autoform {schema2} />
</AutoformProvider>

API Reference

Props

Prop	Type	Default	Description
`schema`	`unknown`	required	Schema object consumed by the adapter
`adapter`	`SchemaAdapter`	jsonSchemaAdapter	Schema conversion adapter (e.g. zodAdapter)
`data`	`Record<string, any>`	`{}`	Bindable form data object
`title`	`string`	-	Form title
`submitLabel`	`string`	`"Save"`	Submit button text
`cancelLabel`	`string`	`"Cancel"`	Cancel button text
`theme`	`AutoformTheme`	nativeTheme	UI component theme

Events

Event	Payload	Description
`submit`	`{ data }`	Fires when form passes validation
`cancel`	-	Fires when cancel button is clicked
`error`	`{ errors: string[] }`	Fires on validation failure

Supported Zod Types

Zod Type	Renders As
`z.string()`	Text input (default), textarea via metadata
`z.number()`	Number input
`z.boolean()`	Checkbox
`z.enum([...])`	Select dropdown
`z.object({...})`	Grouped fields
`z.array(...)`	List with add/remove
`z.discriminatedUnion(...)`	Variant switcher
`z.string().datetime()`	Date/time picker
`.catchall() / z.record()`	Dynamic key/value pairs

FAQ

Can autoform-svelte generate forms from JSON Schema?

Yes. JSON Schema is supported out of the box through the default jsonSchemaAdapter.

Can I generate forms from a Zod schema in Svelte 5?

Yes. Use zodAdapter with Zod v4 to convert a Zod schema to JSON Schema and render the form.

Is this only for admin or internal tools?

It is useful for admin and internal tools, but it can also power product settings and CRUD workflows where schema-driven forms are a fit.

Can I customize generated fields?

Yes. You can customize labels, placeholders, widgets, and object behavior via schema metadata and by providing custom adapters or themes.

What are some common use cases of this library?

Admin panel forms, internal tools, CRUD workflows, and settings pages built from existing schemas