●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Toolbox with buttons to add field types (Text, Number, Date, Select, Checkbox, Radio).
- Drag-and-drop canvas using MudDropContainer to reorder fields.
- Live preview rendered inside an EditForm with per-field inputs.
- Properties panel to edit label, placeholder, type, options, required flag, plus duplicate and remove actions.
- Export JSON and copy-to-clipboard using IJSRuntime.
## Key components
- MudPaper, MudButton, MudTextField, MudSelect, MudSelectItem
- MudDatePicker, MudNumericField, MudCheckBox, MudRadioGroup, MudRadio
- MudDropContainer / MudItemDropInfo for drag-and-drop
- EditForm (preview uses a dummy object) and @bind-Value / @bind-Date bindings
- MudIcon for draggable handle and IJSRuntime for JSON export/copy
## How it works
- Fields are stored in a List<FormFieldModel> and rendered from Fields.
- Selection is tracked with selectedField and edited via two-way binding (e.g., @bind-Value on MudTextField).
- Preview state uses multiple dictionaries keyed by Guid (previewStringValues, previewNumberValues, etc.) and a dummy PreviewValues model passed to EditForm.
- Reordering calls OnItemDropped which removes and inserts the item into Fields based on MudItemDropInfo.IndexInZone.
- ExportJson serializes CurrentForm with System.Text.Json and opens a new window via JSInterop; CopyJson writes the lastExportJson to the clipboard.
## Styling
- Layout uses Bootstrap grid classes (container-fluid, row, col-*, d-flex, gap-*) for a three-column responsive layout.
- Visual controls and surface styling use MudBlazor components (MudPaper, MudButton) and the Mud theme if registered in the host app.
- Responsiveness is handled by Bootstrap column breakpoints (col-md-*). No Tailwind utilities detected.
## Reuse steps
1. Install MudBlazor NuGet and register its services in Program.cs (builder.Services.AddMudServices()).
2. Import MudBlazor namespace in the component and add MudBlazor CSS/JS to host _Layout or index.html.
3. Copy FormModel and FormFieldModel (DataModel.cs). Adapt model fields to backend DTOs if needed.
4. Add the FormBuilder.razor component and ensure IJSRuntime is available (inject IJSRuntime JS).
5. Wire persistence: replace ExportJson/CopyJson with backend save/load endpoints and add auth as required.
## Limitations & next steps
- Validation is not enforced: the Required flag is stored but no DataAnnotationsValidator or validation messages are present in the preview EditForm.
- The preview uses a dummy object (PreviewValues) and multiple dictionaries; consider consolidating preview state into a single view model per field for cleaner binding and validation.
- Radio rendering currently creates a MudRadioGroup per option in the loop; replace with a single MudRadioGroup containing multiple MudRadio items to ensure grouped selection.
- No persistence, server API, or user authentication is implemented; add backend endpoints to save/load form definitions and user context.
- UX improvements: provide feedback for CopyJson (snackbar), confirm delete, and add undo/redo for reorder operations.
This single-page component is generated by Instruct UI and is intended as an editable starting point; integrate services, validation, and persistence to complete production use.