Documentation

Installation

Get started with Svelte Form Builder in minutes. This guide walks you through installing dependencies for your SvelteKit project.

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js: Version 18.0 or higher
  • SvelteKit: Version 2.0 or higher
  • Package Manager: npm, pnpm, yarn, or bun

Note

Svelte Form Builder is a web-based tool. You don't need to install it in your project. Simply visit the builder, create your form, and copy the generated code.

Using the Form Builder

Svelte Form Builder is available online at svelte-form-builder.vercel.app. No installation required!

Quick Start

  1. Visit the V2 Builder
  2. Design your form using the visual interface
  3. Generate your code (client, server, and schema)
  4. Copy the generated code to your SvelteKit project

Installing Dependencies

After generating your form code, you'll need to install the required dependencies in your SvelteKit project.

Core Dependencies

Install SvelteKit Superforms and your chosen validation library:

Using Zod

npm i sveltekit-superforms zod

Using Valibot

npm i sveltekit-superforms valibot

Using ArkType

npm i sveltekit-superforms arktype

UI Components

The generated code uses shadcn-svelte components. Install base components:

npm run shadcn-svelte@next -- add button label input

Install additional components based on your form fields:

Select, Checkbox, Radio

npm run shadcn-svelte@next -- add select checkbox radio-group

Textarea

npm run shadcn-svelte@next -- add textarea

Date Picker

npm run shadcn-svelte@next -- add calendar popover

Switch

npm run shadcn-svelte@next -- add switch

Optional: Formsnap

For enhanced form handling with better TypeScript support:

npm i formsnap

Next Steps

After installing dependencies, visit the Form Builder to create your form and generate code.