Svelte Form Builder

Svelte Form Builder

This skill applies only to forms implemented with SvelteKit remote functions (form(schema, handler)).

Before using this workflow, confirm the form is a remote-form candidate via your project's form decision tree.

Workflow

1. Understand the fields and validation requirements.
2. Generate a form JSON following the schema below.
3. Ask the user to visit https://svelte-form-builder.vercel.app/v2 and import the JSON.
4. In the builder, ensure Valibot validation and SvelteKit remote functions are toggled on.
5. Use btca to verify up-to-date SvelteKit remote-function patterns when needed.
6. Implement the generated client/server code in the project, preserving existing UI structure and using shadcn-svelte components.

Form Builder JSON Schema

Generate a form JSON structure for the Svelte form builder using this exact schema:

• Return an array of rows
• Each row has: "id" (string), "fields" (array)
• Each field must have:
  • "id": unique string (e.g., "field-1")
  • "name": display name (e.g., "Input", "Email")
  • "type": field type — text, email, password, number, textarea, boolean, select, radio, date-picker, slider, input-otp, phone, combobox, tags-input, file, location-input
  • "category": same as type for most fields, or "checkbox"/"switch" for boolean
  • "label": field label shown to user
  • "description": helper text (optional)
  • "placeholder": placeholder text
  • "required": boolean
  • "position": "full" (or "left"/"right" for side-by-side, max 2 per row)
  • "options": array for select/radio/combobox (each with "id", "value", "label")
  • "multiple": boolean (optional) for select/combobox (false=single, true=multiple)

Example

[
	{
		"id": "row-1",
		"fields": [
			{
				"id": "field-1",
				"name": "Input",
				"type": "text",
				"category": "text",
				"label": "Full Name",
				"description": "Enter your full name",
				"placeholder": "John Doe",
				"required": true,
				"position": "full"
			}
		]
	}
]