SamProf

BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser

BlazorFiddle is my online Blazor .NET developer playground at blazorfiddle.com — a place where you can edit code, run it, and share a link to a working example. https://blazorfiddle.com/ BlazorFiddle lets you work with more than a single snippet: you can run a project-like setup (multiple components), edit HTML (including your own CSS), and tweak program startup code for service registration—then share it as a runnable repro or demo link. Quick snapshot (as of Jan 3, 2026): Website: https://blazorfiddle.com/ It’s been publicly referenced 17 May 2019 in the Blazor community (e.g., early Reddit introduction; community tooling lists). Reddit It was upgraded over time (the app itself notes a migration “from Blazor 0.7 to .NET 6.0”). Visibility, reach, and ecosystem footprint BlazorFiddle became one of those tools people casually drop into conversations because it solves a simple pain: “show me the problem” (or “show me the idea”)—in a link. A few public, easy-to-verify places where BlazorFiddle shows up (just few examples): ASP.NET Core / Blazor issue tracker: people asked “is there an online live editor for Blazor?” and the answer was essentially “I’m only aware of blazorfiddle.com,” pointing directly to my site. GitHub Official .NET/Blazor bug repros: BlazorFiddle links were used to demonstrate issues in the ASP.NET Core repo. GitHub Stack Overflow answers: BlazorFiddle is frequently used as a live repro/demo in answers across years. Stack Overflow It was used hundreeds of times. Community tooling lists: it’s listed under “Tooling” in awesome-blazor . GitHub Community launch post: I introduced it publicly on Reddit as a Blazor playground and code editor. Reddit Broader dev chatter: it was even referenced in external tool discussions (e.g., StackBlitz issue thread). GitHub And for me personally: at its peak, BlazorFiddle reached thousands of users per day—people experimenting, creating fiddles, and sharing them in issues, chats, and Q&A threads. The story BlazorFiddle was born almost alongside MatBlazor . I was building a component library, constantly needing a way to prove a component works, share a runnable example, and give others a place to tweak parameters and immediately see results. That need shaped the whole product. The first version was intentionally minimal: essentially one component , no real app configuration, no CSS workflow—and the wild part was that it could compile and run the component directly in the browser . It felt unbelievably fast and “alive,” because the feedback loop was instant. Then Blazor changed dramatically as it evolved, and the original “compile in the browser” approach became harder to keep stable. I made the call to move compilation to the backend, even though it meant more complexity and (sometimes) a slower compile loop—because the payoff was huge: BlazorFiddle became more universal, able to handle richer scenarios. That’s when it turned into a real playground: edit multiple files/components (not just one), edit HTML and include custom CSS, edit Program.cs / startup to register services and write additional .NET code, and (crucially) compile in an isolated environment—in a dedicated Docker container—to keep the execution model safer. BlazorFiddle also became deeply connected to MatBlazor: MatBlazor’s own release notes mention the integration, and that integration is exactly what I originally wanted—click an example, open it in a runnable playground, tweak it, learn by doing. Today BlazorFiddle still works—and it still does the job it was built for: a simple, shareable, runnable Blazor sandbox. The app itself reflects the reality of its long lifespan (including the note that it was updated “from Blazor 0.7 to .NET 6.0,” and older saves may need upgrades). But like MatBlazor, it’s not a project I’m actively developing right now. Modern .NET + WASM has improved enough that “client-side compilation” could be revisited in a new way—and that idea is exciting—but I’m choosing not to restart that effort unless the right future context appears. What I do keep is the pride: BlazorFiddle became part of how the Blazor community shared knowledge—bugs, solutions, prototypes, and UI ideas—through a single link.

•
Projects

MatBlazor - Material Design components for Blazor and Razor Components (The End)

MatBlazor is my open-source UI component library that brings Material Design patterns to Blazor / Razor Components —a full component toolkit meant for real apps, not just demos. GitHub Quick snapshot (as of Jan 3, 2026): GitHub: ~2.9k stars , ~377 forks GitHub NuGet: ~2.6M total downloads nuget.org First public releases: Oct 25, 2018 nuget.org Latest package update: Apr 10, 2023 nuget.org GitHub “Used by”: ~2.1k repositories (dependency indicator) GitHub Visibility, reach, and real-world usage MatBlazor started early—when the Blazor ecosystem still lacked a “default” set of solid UI components—and it quickly became one of the most visible open-source component libraries in that space. Even I openly wrote at the time that it had grown into “one of the most popular libraries for Blazor,” while also being hard to carry alone. That visibility had a very real impact on me personally: I was mentioned in videos, invited into community conversations and conference contexts, approached by companies interested in adopting the library, and even contacted by a major publisher (won’t name them) with a proposal to write a Blazor book—because MatBlazor positioned me as someone who deeply understood the platform. Here are a few public examples of MatBlazor being used / referenced: BlazorBoilerplate — “real world starter app” built with MatBlazor (auth/authz, admin-style template). https://github.com/enkodellc/blazorboilerplate ABP Framework — community article showing how to integrate MatBlazor into ABP’s Blazor UI. abp.io MatBlazorTemplate — default Blazor template converted from Bootstrap to Material using MatBlazor. GitHub BlazorFiddle — shared publicly as being written with MatBlazor components. Reddit Awesome Blazor Browser — MatBlazor listed as a notable library in the ecosystem. And one more angle that I actually love: the MatBlazor site publicly listed sponsors/backers at one point—including individuals and also organizations—showing that it helped real teams enough that they supported it (e.g., Apply Solutions GmbH, SmartView Systems, Gate575 Kft, Beeman and Sons, Inc.). The story (2018 → peak years → burnout, the classic OSS curve) I started MatBlazor in October 2018 , long before Blazor felt mainstream. My goal wasn’t “a few controls”—it was coverage: a component set capable of supporting real business apps. For roughly the next year, I worked intensely and shipped fast. The library grew quickly, the community grew around it, and MatBlazor became a recognizable name in Blazor UI. It also became a serious responsibility. And the most important detail (that shaped everything): I was essentially the solo maintainer . The architecture, the components, the releases, the issue triage, the support, the docs—most of it ran through one person. I even wrote publicly that it was hard “to be alone” handling everything. Donations and sponsors did exist—and I’m genuinely thankful for everyone who supported the project—but the financial side never became a sustainable foundation compared to the amount of work and responsibility. And because Blazor wasn’t part of my day job, I couldn’t “reinvest” the effort into my work life in a way that kept the motivation steady. Eventually, I hit what many open-source maintainers hit: burnout. Later on, as MatBlazor slowed down, MudBlazor grew into the new default choice for many Blazor teams—largely because it had a strong, active contributor base and consistent momentum. I have a lot of respect for that team and what they’ve achieved, and it’s great for the ecosystem that the “Material for Blazor” space kept moving forward. And yes—when I looked through their codebase, I recognized several ideas and patterns that felt familiar from MatBlazor, which I take as a quiet compliment rather than a point of conflict. Where MatBlazor stands today (and my thank you) Since early 2021, MatBlazor hasn’t been actively developed, and I’m not planning to return to active maintenance in the near future—unless the right future context appears (work needs, a new motivation, or a strong practical reason to invest again). But I’m proud of what MatBlazor achieved: it’s a real, proven project with real adoption, and it remains one of the most important chapters in my engineering journey. And I want to end this the right way: with gratitude. Special thanks to the people who supported and contributed early and meaningfully, including enkodellc , CrystalAlison, Petajobby, CtrlAltD —and to every contributor, sponsor, donor, tester, and user who helped MatBlazor become what it became.

•
Projects

MatBlazor version 1.0.0

I introduce new version of MatBlazor - v1.0.0. Last time I have implemented ExpansionPanel, Tooltip, Floating Action Button, Themes, DatePicker and etc... For this moment I have implemented most of all components, that I have planed for version 1.0.0 . And we have done this! Support .NET Core 3.0 Preview 5 SDK. Now, we have a lot of components AppBar Autocomplete Button Card Checkbox Chip DatePicker Dialog Divider Drawer Elevation Expansion Panel (Accordion) FAB (floating action button) Icon IconButton LayoutGrid List Menu ProgressBar RadioButton Ripple Select Slider SlideToggle Snackbar Tab Table TextField Themes Tooltip Typography Of course we make a lot of new components and improvements. MatBlazor - Github repository MatBlazor - Demo and Documentation

•
Blog

Forwarding Refs in Blazor

ForwardRef is a technique for automatically passing a ElementRef through a component to one of its children or back from children to parent or among independent components. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. Capture references to elements From Blazor documentation we know that you can capture references to HTML elements in a component using the following approach: Add a ref attribute to the HTML element. Define a field of type ElementRef whose name matches the value of the ref attribute. The following example shows capturing a reference to the username <input> element: Problematics Problem in passing a ElementRef to its children or another component If you try to pass the ElementRef to another component (children or neighbor), it will not work. Because ref returns the value at the Render moment after the parameters have been applied. The value can be applied after the following StateHasChanged() . Problem in passing a child ElementRef to its parent in Blazor The same problem is reproduced when you need to get the ElementRef from the ChildContent, especially when ChildContent is not an HTML Element, but Blazor Component. Solution ForwardRef The solution is to create a store for the ElementRef and pass this as parameter to all components. Solution for passing a ElementRef to its children or another component When the current component wants to pass its ElementRef and pass it on to others, you should create ForwardRef instance and pass it to others components in parameters. Index.razor MyTooltipComponent.razor Solution in passing a child ElementRef to its parent in Blazor If you want to get a reference to a ElementRef of child, you should pass the ForwardRef to the child in which the child returns ElementRef to itself. MyTooltipComponent.razor To obtain a ElementRef to the Html Element. Index.razor To obtain a ElementRef to the Custom Blazor Component your component should get ForwardRef as a parameter. MyCustomComponent.razor Index.razor Summary In my opinion, this is one of the best ElementRef transfer techniques among the components. Of course, in the class, you can add events with subscription and unsubscribe, and much more, for example Observable. That I used in the development of the MatBlazor components for Tooltip and Menu .

•
Blog

MatBlazor 0.9.8 - Material Design components for Blazor and Razor Components

I introduce new version of MatBlazor v0.9.8. Support .NET Core 3.0 Preview 4 SDK! We make a lot of new components and in the near future many new components will be created. I want to say a big thank you to everyone who took part in the creation. SamProf enkodellc sandrohanea IvanJosipovic engineX MatBlazor - Github repository MatBlazor - Demo and Documentation

•
Blog

C# and Blazor Compilation inside Browser

If you are a web developer and are developing for a browser, then you are sure know JS, which can be executed inside a browser. There is an opinion that JS is not very suitable for complex calculations and algorithms. And although in recent years JS has made a big breakthrough in performance and wide of use, many developers continue to dream of launching a system language inside the browser. In the near future, the game may change thanks to WebAssembly. Microsoft is not standing on place and actively trying to port .NET to WebAssembly. As one of the results, we received a new framework for client-side development - Blazor. It is not quite clear yet whether Blazor can be faster than modern JS frameworks like React, Angular, Vue due to WebAssembly. But it definitely has a big advantage - development in C # as well as the whole .NET Core world can be used inside the application. Compiling and running C# in a browser The process of compiling and executing such a complex language as C # is a complex and time-consuming task. Is it possible to compile and execute C # inside the browser? However, Microsoft, as it turned out, had already prepared everything for us. After that, you need to install Nuget package for analyzing and compiling C #. Let's prepare the start page. First you need to parse the string into an abstract syntax tree. Since in the next step we will be compiling the Blazor components, we need the latest ( LanguageVersion.Latest ) version of the language. For this, Roslyn for C # has a method: Already at this stage, you can detect compilation errors by reading the parser diagnostics. Next, compile Assembly into a memory stream. Note that you need to get the references - list of the metadata of the connected Assemblies. But reading these files along the path Assembly.Location did not work, because there is no file system in the browser. Perhaps there is a more effective way to solve this problem, but the goal of this article is a conceptual possibility, so we download these libraries again via Http and do it only when we first start compiling. From EmitResult you can find out if the compilation was successful, as well as get diagnostic errors. Now we need to load Assembly into the current AppDomain and execute the compiled code. Unfortunately, there is no possibility to create several AppDomain inside the browser, so it is safe to load and unload Assembly . At this stage, we compiled and executed C # code directly in the browser. A program can consist of several files and use other .NET libraries. Is not that great? Now we need to fo deeper. Compiling and running Blazor Components in a browser Blazor components are modified Razor templates. To compile the Blazor component, you need to create a whole environment for compiling Razor templates and set up extensions for Blazor. You need to install the Microsoft.AspNetCore.Blazor.Build package from nuget. However, adding it to our Blazor project will not work, because then the linker will not can to compile the project. Therefore, you need to download it, and then manually add 3 libraries. Create engine to compile Razor and modify it for Blazor, since by default the engine will generate Razor code for the pages. Only the fileSystem is missing for execution - it is an abstraction over the file system. We have implemented an empty file system, however, if you want to compile complex projects with support for _ViewImports.cshtml , then you need to implement a more complex structure in memory. Now we will generate the code from the Blazor component, the C # code. From doc you can also get diagnostic messages about the results of generating C# code from the Blazor component. Now we got the code for the C# component. You need to parse SyntaxTree , then compile Assembly, load it into the current AppDomain and find the Type of the component. Same as in the previous example. It remains to load this component into the current application. There are several ways to do this, for example, by creating your RenderFragment . Conclusion We compiled and launched the Blazor component in the browser. Obviously, a full compilation of dynamic C# code right inside the browser can impress any developer. But here it is necessary to take into account such "pitfalls": To support two-way bindings, bind needs additional extensions and libraries. To support async, await , similarly connect extension libraries Compiling nested Blazor components will require a two-step compilation. All these problems have already been solved and this is a topic for a separate article. GIT: https://github.com/BlazorComponents/CompileBlazorInBlazor Demo: https://blazorcomponents.github.io/CompileBlazorInBlazor/

•
Blog

6 Best Blazor Components Libraries (November 2018)

Blazor is an experimental .NET web framework using C# and HTML that runs in the browser. Naturally, many components are at the beginning of their development. I tried to collect the 6 most interesting libraries with components for Blazor. Enjoy. 1) MatBlazor Blazor components that implement Google’s Material Design, it’s the one of the biggest component pack for Blazor now and it is growing fast. Demo . MatCheckbox MatTextField MatRadioButton MatSelect MatSlider MatSlideToggle MatAppBar (in progress) MatMenu (in progress) MatCard MatButton MatChip 2) BlazorStrap Bootstrap 4 Components for Blazor Framework. Really, I think, that they already implemented most of all components! 3) Blazor.FlexGrid GridView component for Blazor 4) ChartJs.Blazor This is a Blazor Component that wraps ChartJS. 5) BlazorSplit Resizeable split views for Blazor. 6) BlazorContextMenu A context menu component for Blazor !

•
Blog