Documentation

Usage

Create validated forms quickly using Svelte Form Builder's intuitive interface.

Quick Start

Follow these steps to create your first form:

1

Add Fields

Click any field type from the left panel to add it to your form—text, email, select, checkbox, date, and more.

2

Customize

Expand any field in the editor to customize labels, placeholders, validation rules, and arrange fields side-by-side.

3

Preview

Watch your form update instantly in the preview panel with accurate styling and validation.

4

Generate Code

Click the code button to generate client, server, and schema files. Copy to your SvelteKit project.

Interface Panels

Fields Panel (Left)

Browse and add field types. Search for specific fields or use templates for quick setup.

Editor Panel (Center)

Customize fields with accordion controls. Drag to reorder and create side-by-side layouts.

Preview Panel (Right)

Live preview with accurate styling and validation feedback.

Best Practices

  • • Use templates to start quickly with common form patterns
  • • Test validation in the preview panel before generating code
  • • Group related fields side-by-side for better UX
  • • Save complex forms to local storage for later editing
  • • Add clear labels and helpful placeholder text