Skip to content

Svelte Form Builder include various Input fields validated using ZOD + Superforms

License

Notifications You must be signed in to change notification settings

SikandarJODD/form-builder

Repository files navigation

Svelte Form Builder

A dynamic form-building tool that allows users to create, customize, and validate forms seamlessly within web applications. Built with Sveltekit, ZOD, Valibot Sveltekit-Superform, Form Builder provides an intuitive interface for developers and users alike.

Features

  • Dynamic Form Creation: Easily create forms with various input types including text, checkbox, radio buttons, and more.
  • Form validations using Sveltekit Superforms
  • Client & Server side validaitons.
  • Real-Time Validation: Validate user inputs using the Zod library, ensuring data integrity and user-friendly feedback.
  • Customizable Components: Leverage ShadCN-Svelte components for a consistent and modern UI experience.

Live Demo

Check out the live demo of the Form Builder here.

Usage

  1. Simply select inputs from the list, can reorder them by dragging.
  2. Copy Schema and paste it in your Sveltekit project.
  3. Copy Client and Server side Code and paste it in your Sveltekit project.

Components

  1. Password Input : Visit
  2. Location Input : Visit

Here are some of the features that are in the pipeline. you can also suggest features by creating an issue.

Support

For support, you can raise an issue or contact me at Twitter. You can sponsor me on Github

License

This project is licensed under the MIT License.

Acknowledgements

  • Sveltekit - web development for the rest of us.
  • Superforms - Superforms is a SvelteKit f.orm library that brings you a comprehensive solution for server and client form validation.
  • Zod - A TypeScript-first schema declaration and validation library.
  • Valibot - A simple and powerful form validation library.