Documentation

Comprehensive Guide

Master Svelte Form Builder with this in-depth guide covering all features, advanced techniques, and best practices.

Understanding the Interface

Svelte Form Builder V2 features a modern 3-panel layout designed for maximum efficiency:

Left Panel: Fields & Templates

The left panel contains two tabs accessible from the header:

  • Fields Tab: Browse all available field types organized by category (Basic, Advanced, Layout, etc.)
  • Templates Tab: Access pre-built form templates for common use cases like login, signup, contact forms, and more

Middle Panel: Form Editor

The editor panel is where you build and customize your form:

  • Drag & Drop: Reorder fields by dragging them up or down
  • Accordion Customization: Click any field to expand its settings and customize properties
  • Side-by-Side Fields: Arrange two fields horizontally in a single row for responsive layouts
  • Field Actions: Delete, duplicate, or move fields between positions

Right Panel: Live Preview

The preview panel shows your form in real-time:

  • Instant Updates: See changes immediately as you edit
  • Interactive Testing: Test validation rules and field behavior
  • Responsive View: Preview how your form looks on different screen sizes

Working with Fields

Available Field Types

Svelte Form Builder supports a wide range of field types:

Basic Fields

  • Text: Single-line text input
  • Email: Email input with validation
  • Password: Password input with show/hide toggle
  • Number: Numeric input with min/max constraints
  • Tel: Telephone number input
  • URL: URL input with validation
  • Textarea: Multi-line text input

Selection Fields

  • Select: Dropdown selection
  • Combobox: Searchable dropdown with autocomplete
  • Radio Group: Single selection from multiple options
  • Checkbox: Boolean toggle
  • Switch: Toggle switch

Advanced Fields

  • Date: Date picker
  • Time: Time picker
  • File: File upload
  • Range: Slider for numeric ranges

Layout Elements

  • Title: Section heading
  • Description: Explanatory text
  • Separator: Visual divider

Field Configuration

Each field can be customized with various properties:

Common Properties

  • Label: Display name for the field
  • Name: Form field identifier (used in code generation)
  • Placeholder: Hint text shown when field is empty
  • Description: Helper text displayed below the field
  • Required: Whether the field must be filled
  • Disabled: Whether the field is read-only

Validation Properties

  • Min Length: Minimum character count (text fields)
  • Max Length: Maximum character count (text fields)
  • Min Value: Minimum numeric value (number fields)
  • Max Value: Maximum numeric value (number fields)
  • Pattern: Regular expression for custom validation

Validation Libraries

Svelte Form Builder supports three popular validation libraries. Choose the one that best fits your project:

Zod

The most popular TypeScript-first schema validation library. Great for complex validation logic and type inference.

Zod Schema Example 
import { z } from 'zod';

export const schema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
  age: z.number().min(18, 'Must be 18 or older'),
});

Valibot

A lightweight, modular alternative to Zod with excellent tree-shaking support. Perfect for bundle size-conscious projects.

Valibot Schema Example 
import * as v from 'valibot';

export const schema = v.object({
  name: v.pipe(v.string(), v.minLength(2, 'Name must be at least 2 characters')),
  email: v.pipe(v.string(), v.email('Invalid email address')),
  age: v.pipe(v.number(), v.minValue(18, 'Must be 18 or older')),
});

ArkType

The fastest TypeScript validation library with a unique syntax. Ideal for performance-critical applications.

ArkType Schema Example 
import { type } from 'arktype';

export const schema = type({
  name: 'string>=2',
  email: 'string.email',
  age: 'number>=18',
});

Advanced Features

Side-by-Side Fields

Create responsive layouts by placing two fields side-by-side in a single row:

  1. Add a field to your form
  2. Click the "Add to Right" button in the field's settings
  3. Select another field to place on the right side
  4. Both fields will appear horizontally on larger screens and stack on mobile

Tip

Use side-by-side layouts for related fields like "First Name" and "Last Name" or "City" and "Postal Code" to create more compact, professional-looking forms.

Form Templates

Save time by starting with pre-built templates:

  • Login Form: Email and password fields
  • Signup Form: Registration with email verification
  • Contact Form: Name, email, and message fields
  • Feedback Form: Rating and comments
  • Profile Form: User profile information
  • Reset Password: Password reset flow

Saving & Loading Forms

Never lose your work with the built-in save feature:

  1. Click the "Save" button in the header
  2. Give your form a descriptive name
  3. Your form is saved to browser local storage
  4. Load it later from the saved forms list
  5. Edit, duplicate, or delete saved forms as needed

Sharing Forms

Share your forms with team members or across devices:

  1. Click the "Share" button in the header
  2. Copy the generated share link
  3. Anyone with the link can view and edit the form
  4. The form data is encoded in the URL (no server storage)

Code Generation

Understanding Generated Code

When you click "View Code", the builder generates five essential files:

1. Client Code (+page.svelte)

The Svelte component that renders your form. Includes:

  • Form markup with all fields
  • Superforms integration
  • Error handling and display
  • Success message handling

2. Server Code (+page.server.ts)

The SvelteKit server-side code that handles form submission:

  • Load function to initialize the form
  • Form action to process submissions
  • Server-side validation
  • Error handling

3. Schema (schema.ts)

The validation schema using your chosen library:

  • Type-safe field definitions
  • Validation rules
  • Error messages

4. JSON Export

A JSON representation of your form structure:

  • Import/export form configurations
  • Version control friendly
  • Share with AI tools for modifications

5. Installation Commands

Package manager commands to install required dependencies:

  • Supports npm, pnpm, yarn, and bun
  • Includes all necessary packages
  • shadcn-svelte component installation

Best Practices

Form Design

  • Keep it Simple: Only ask for information you truly need
  • Logical Flow: Order fields in a natural, logical sequence
  • Clear Labels: Use descriptive, concise labels
  • Helpful Descriptions: Provide context with field descriptions
  • Group Related Fields: Use side-by-side layouts for related information

Validation

  • Client & Server: Always validate on both sides
  • Clear Error Messages: Tell users exactly what's wrong and how to fix it
  • Real-time Feedback: Show validation errors as users type
  • Reasonable Constraints: Don't make validation too strict

Accessibility

  • Proper Labels: Every field should have a clear label
  • Error Association: Link error messages to their fields
  • Keyboard Navigation: Ensure forms work without a mouse
  • Focus Management: Guide users through the form logically

Troubleshooting

Common Issues

Validation Not Working

If validation isn't working as expected:

  • Ensure you've installed the correct validation library
  • Check that the schema is imported correctly
  • Verify the adapter matches your validation library
  • Make sure field names match between schema and form

Components Not Found

If you get import errors for UI components:

  • Install missing shadcn-svelte components
  • Check component import paths
  • Ensure shadcn-svelte is properly configured

Form Not Submitting

If your form doesn't submit:

  • Check that the form action is defined in +page.server.ts
  • Verify the enhance directive is applied to the form
  • Look for JavaScript errors in the browser console
  • Ensure all required fields are filled

Next Steps

Now that you've mastered Svelte Form Builder, here are some ways to take your forms to the next level: