PlayBlazor

A live playground for Blazor UI libraries.

Point PlayBlazor at any Blazor component library and every [Parameter] becomes a typed control, next to the live component, the matching Razor markup and an event log. No stories to write by hand.

Open the MudBlazor playground 6.1 MB first load View on GitHub

Runs .NET in your browser, so the first visit downloads the runtime; later visits load from cache. Also live for Fluent UI Blazor and DaisyBlazor: compare all three.

MudButton
One control per [Parameter]
Variant
A sketch of one playground. Flip the controls, then open the real MudButton playground.

Pick a library to explore

The same playground, pointed at three component libraries. PlayBlazor has no dependency on any of them: each showcase simply points it at a different one.

A showcase stuck on its loading screen? A privacy extension or strict security setting may be blocking WebAssembly: try another browser, or run it locally with dotnet run from the repository.

The real explorer: 65 components, every parameter a control

Screenshot of the PlayBlazor explorer on MudButton: the list of MudBlazor components on the left, a Click me button on the stage, its 24 parameters as controls on the right, and below the stage the generated Razor and two OnClick entries in the Events panel. Open this playground

MudButton after two clicks: its 24 parameters as controls, beside the live button, the Razor that produces it and both clicks in the Events panel.

Add it to your own Blazor app

Register the services, then drop one component into any page. Nothing to write per component.

dotnet add package PlayBlazor

One package. Its only dependency is Microsoft.AspNetCore.Components.Web. Read the setup guide.

// Program.cs
builder.Services.AddPlayBlazor();

@* One component, in any page *@
<PlaygroundView Component="typeof(MudButton)" />

@* Or everything a library exposes *@
<PlaygroundExplorer
    Assemblies="@(new[] { typeof(MudButton).Assembly })" />