Metadata-driven live editors for Blazor components.

The Configurator is a metadata-driven system that auto-generates interactive live editors for Blazor components. By annotating component [Parameter] properties with the [Configurable] attribute, the system uses reflection to discover editable properties, generates appropriate editor controls, and renders a live preview alongside a code snippet that updates in real time. No manual wiring of editors or code generation is required.

Mark any [Parameter] property with [Configurable] to include it in the auto-generated editor. The attribute accepts three optional properties that control how the editor is rendered.

[Parameter]
[Configurable(Group = "Appearance", Order = 1)]
public Color Color { get; set; } = Color.Primary;

[Parameter]
[Configurable(Group = "Appearance", Order = 2)]
public Variant Variant { get; set; } = Variant.Filled;

[Parameter]
[Configurable(Group = "Content", Order = 0, SampleKey = "Sample_Title")]
public string Title { get; set; } = string.Empty;

[Parameter]
[Configurable(Group = "Content", Editor = EditorKind.IconPicker)]
public string? StartIcon { get; set; }

[Parameter]
[Configurable(Group = "State")]
public bool Disabled { get; set; }

EditorKind determines which editor control is rendered for a property. When set to Auto (the default), the system detects the appropriate editor from the property type.

The Configurator follows a four-step pipeline from attribute annotation to rendered output.

The reflection engine that powers the Configurator. It extracts all configurable information from a component type and caches it for reuse.

To add an interactive configurator to a demo page, use the AutoConfigurator component. Specify the component type via TComponent, provide any fixed parameters, and supply a PreviewTemplate that renders the component with the current parameter values.

<AutoConfigurator TComponent="Button"
    FixedParameters="@(new() { ["Text"] = "Button" })"
    Context="cfg">
    <PreviewTemplate>
        <Button Text="Button" @attributes="cfg.Parameters" />
    </PreviewTemplate>
</AutoConfigurator>

The Configurator automatically discovers all EventCallback and EventCallback<T> properties on a component and renders them as Chip elements below the controls. When an event fires, the chip plays a 600ms pulse animation to provide visual feedback.

Each EventCallback is wrapped in a proxy delegate that triggers the pulse. The chip transitions from Neutral/Outlined to Primary/Filled and back, using Blazor's CSS transition support. Typed EventCallback<T> wrappers are created via reflection to match the generic parameter.

The code snippet updates live as you interact with the controls. It follows clean formatting rules to produce copy-ready markup.

String properties like Title, Description, or Label often default to empty strings. Without sample content, the AutoConfigurator preview renders an empty component. The SampleKey property solves this by referencing a localized resource entry that provides meaningful preview text.

// Component .razor file
[Parameter]
[Configurable(Group = "Content", Order = 0, SampleKey = "Sample_Title")]
public string Title { get; set; } = string.Empty;

[Parameter]
[Configurable(Group = "Content", Order = 1, SampleKey = "Sample_Description")]
public string Description { get; set; } = string.Empty;

// Resources/Components/PageHero.resx (English)
// Sample_Title = "Dashboard Overview"
// Sample_Description = "Your central workspace."

// Resources/Components/PageHero.de.resx (German)
// Sample_Title = "Dashboard-Ubersicht"
// Sample_Description = "Ihre zentrale Arbeitsflache."