https://github.com/ddjerqq/blazorformbuilder
Build forms by clicking and dragging fields (made using Blazor WASM)
https://github.com/ddjerqq/blazorformbuilder
asp-net-core blazor blazor-wasm forms
Last synced: 12 months ago
JSON representation
Build forms by clicking and dragging fields (made using Blazor WASM)
- Host: GitHub
- URL: https://github.com/ddjerqq/blazorformbuilder
- Owner: ddjerqq
- License: agpl-3.0
- Created: 2025-02-27T11:51:59.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-20T13:35:29.000Z (about 1 year ago)
- Last Synced: 2025-05-26T13:57:29.850Z (about 1 year ago)
- Topics: asp-net-core, blazor, blazor-wasm, forms
- Language: C#
- Homepage:
- Size: 904 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 📝 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](https://dotnet.microsoft.com/en-us/download/dotnet/9.0)
- [Node.js](https://nodejs.org/en/download)
- [Make](https://www.gnu.org/software/make/manual/make.html)
- [Tailwindcss CLI v3.4](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.17)
> [!CAUTION]
> Make sure the TailwindCSS CLI version is less than 4!!!
### 📦 Clone the repo
```sh
git clone https://github.com/ddjerqq/BlazorFormBuilder.git
cd BlazorFormBuilder
```
### 🔓 Configure the .env
```sh
echo "/path/to/solution/app.db" > .env
```
> [!WARNING]
> Replace `/path/to/solution/app.db` with the path to your solution.
### ▶️ Run the app
```sh
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](LICENSE) file for details.
## 📸 More screenshots
