Survey Designer for Blazor

A drag-and-drop visual form builder for the Survey runtime component. Design in the browser, save as JSON, render with <Survey Form="..." />. Produces the exact JSON shape the runtime consumes — round-trip is free.

Requires the runtime component (PSC.Blazor.Components.Survey) to render previews and for end users to consume the designed forms.

Features

Canvas

• Three-pane layout — palette on the left (15 element types), canvas in the middle, property inspector on the right
• HTML5 drag-and-drop — drag from the palette to add an element, drag an existing element to reorder or re-parent
• Editor chrome per element — type badge, title preview, required / visibility flags, delete button, drag handle

Nested containers

• Panel — any element, any nesting depth
• Repeater — leaf elements only (matches the runtime's template model)
• Cycle prevention — dragging a container into its own subtree is blocked with a red "blocked" drop indicator
• Nesting rules — enforced at drop time, visible feedback, no invalid forms produced

Property inspector (per element type)

• Common fields — Title, Description, Name, Required, Visible, VisibleIf, Question number
• Textbox — TextboxType (all 11 HTML input types), placeholder, min/max length
• Radiobutton / Checkbox / DropdownList — orientation, theme, multi-select, full Choices editor with Label + Value (Dropdown) + per-choice VisibleIf + reorder / add / delete
• Slider — min/max, tick visibility, centre thumb, tick-label editor
• Matrix — Rows and Columns List<string> editors
• LikertSkill / Rating / Comment / HTML / ImagePicker / Switch / NPS — each with their own fields (HTML body, image URL + label + value per image, Likert type picker, rating max, comment rows…)
• Panel — BackgroundColor with a native colour picker and free-text field
• Selection breadcrumb — Root › Panel › Textbox navigation at the top of the inspector; click any step to jump up the tree

Undo / redo

• Full history — structural edits (add / remove / move) and property edits snapshot the whole form
• Toolbar buttons and keyboard shortcuts (Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z)
• History caps at 100 snapshots; disabled states when nothing to undo/redo

Preview mode

• Tab toggle between Edit and Preview — Preview renders the actual runtime <Survey> against a clone of the current form, so you see exactly what users will see
• Error boundary — invalid VisibleIf expressions or missing choices show a friendly recoverable message, not a stack trace

Save / load / copy

• Download JSON — triggers a browser download of form.json
• Load JSON — file input; malformed JSON is ignored so current edits aren't lost
• Copy JSON — clipboard with feedback toast
• Keyboard shortcuts — Delete to remove selected, Escape to deselect

Integration

• Scoped CSS — no index.html changes, no global stylesheet conflicts
• JS module — loaded on demand via dynamic import(), no manual script tags
• Two-way binding — <SurveyBuilder @bind-Form="_form" /> keeps your model in sync with every edit

What's included

• Compiled NuGet package (PSC.Blazor.Components.Survey.Design) targeting .NET 10
• Full README with integration guide, keyboard shortcut reference, nesting rule tables, and known limitations
• Demo page inside the SurveyBlazorUI project — /builder route, drop a form, save, round-trip through <Survey>
• LICENCE.md (one developer, annual commercial licence, unlimited end users, no redistribution)

Add to your project

dotnet add package PSC.Blazor.Components.Survey.Design

@page "/builder"
@using PSC.Blazor.Components.Survey.Design
@using PSC.Survey.Shared
@using PSC.Survey.Shared.Interfaces

<SurveyBuilder @bind-Form="_form" />

@code {
    Form _form = new() { Elements = new List<IElement>() };
}

Design, save, load the same JSON into <Survey Form="@_form" /> in production.

Requirements

• .NET 10 SDK
• PSC.Blazor.Components.Survey (runtime) — included as a NuGet dependency
• Blazor Server or Blazor WebAssembly
• A modern browser (Chromium, Firefox, or Safari)

Pair with

• Survey runtime — required dependency, rendered in Preview tab and used by your consuming app
• Import packages — bulk-seed forms from CSV / Excel / JSON files, edit in the designer, ship