📝 Blazor Drag & Drop Form Builder

🚀 Overview

A powerful drag-and-drop form builder built with Blazor WASM and ASP.NET Core. This application allows users to create, customize, and preview forms effortlessly.

✨ Features

• Drag & Drop Interface – Easily add and arrange form elements.
• Custom Form Fields – Textboxes, dropdowns, switches, buttons, and more.
• Persistence – All changes, new forms, edits are persisted to an SQLite database using EFCore.
• Real-time Preview – Instantly see how your form will look.
• Data Persistence – Save and load forms dynamically.
• Dark mode – A sleek, modern design that's easy on the eyes.
• Blazing Fast Performance – Leveraging Blazor WebAssembly for a seamless experience.

📸 Preview

🛠️ Getting Started

🔧 Prerequisites

Ensure you have the following installed:

• .NET 9 SDK
• Node.js
• Make
• Tailwindcss CLI v3.4

Caution

Make sure the TailwindCSS CLI version is less than 4!!!

📦 Clone the repo

git clone https://github.com/ddjerqq/BlazorFormBuilder.git
cd BlazorFormBuilder

🔓 Configure the .env

echo "/path/to/solution/app.db" > .env

Warning

Replace /path/to/solution/app.db with the path to your solution.

▶️ Run the app

cd src/Client
npm i
cd ..
cd ..
dotnet run --project src/WebApi/WebApi.csproj

Note

Building tailwind classes, seeding the database will all get taken care of automatically, you don't have to worry about configurations, as long as you have all the required dependencies

🌐 Head over to the website

Open https://localhost in your browser to accesst he website

📜 License

This project is licensed under the GNU General purpose license – see the LICENSE file for details.

📸 More screenshots