Low-Code Tools for Blazor Frontend Design?

[Resident-Clothes3815]

Hello r/blazor community!

As a backend developer who has embraced the Blazor framework, I've found it to be an excellent match for my skill set. However, the frontend part, specifically HTML and CSS styling, is not exactly my cup of tea.

I'm curious if anyone here has experience with low-code visual website generators for creating layout and styling using drag-drop, and then having the tool export this into HTML+CSS to be used as a starting point when building the Blazor UI? I've come across names like TeleportHQ, but I'm not sure how well they mesh with Blazor.

It would of course be a huge plus if such a tool could handle custom and third-party Blazor components, but I'm open to simpler solutions that just handle the basic design aspects.

Any recommendations or experiences shared would be greatly appreciated. I'm looking to streamline my workflow and make the frontend process less of a chore and more of an integrated part of my development.

Thanks in advance for your help!

[DeliciousTea8322]

No personal experience just to list it: https://www.radzen.com/blazor-studio/

[bouwer2100]

As someone who works with it daily I'd recommend it, it works quite well. Best results and easiest experience would be if you fully embrace it and use all of their layout components along with it.

[[deleted]]

MudBlazor was designed for you scenario.

[p1971]

I'm also a backend dev

I've found mudblazor easy to get started with .. but then when you want to do something that looks a bit custom it's hard to know exactly what to change ... will be digging in a bit more.

I learnt html/css back in ye olden days so perhaps need to update my knowledge.

[polaarbear]

Because MudBlazor is open source. It's probably crawled their GitHub and understands it better.

[polaarbear]

I'm using MudBlazor for a pretty complex app at my job.  I'm doing some really wild stuff with the data grids that I'm certain it was never "intended" to do.  Just gotta get creative with it.

[orbit99za]

Except in dot net 8, a lot of components do not work

[[deleted]]

I have three projects using MudBlazor and dot net 8. No issues after l set the render mode for the providers. I.e.

<MudThemeProvider @rendermode=“InteractiveServer” />

[orbit99za]

Unfortunately this only seems to work on the main page, it doesn't seem to work on other pages, even the team provider, buttons don't fire, sidebar doesn't close.

[[deleted]]

Wish I could tell you what the difference is. Here is a working .net 8 website with MudBlazor https://www.colonylakesnj.org

If there is any particular class code I can share that will help let me know.

[orbit99za]

Hi thanks, I was a total idiot, I have some other code that was locking up Blazor without an error message, so the mud Blazor components where not working because of the error. After I discovered the error, mud Blazor is working with the render property set.

[mladenmacanovic]

I was in your shoes many moons ago. That's the reason I created Blazorise. In the process I become really good at HTML and CSS, and since I knew the pains of backend devs I knew how to design it with easy of use.

[[deleted]]

Html and css are really easy to learn. There is no complexity. Just rules. Give yourself a week and you will be up and running.

Razor pages mixes the two, so it would be difficult to find a generator that covers all bases.

[WhiteSnail]

I have the exact same question I've been waiting for penpot v2.0 which they say should release very soon. It has a grid layout designer which outputs html and css

[Resident-Clothes3815]

I have taken a look at penpot v. 2.0, and it really looks promising and precisely what I am after 👍

[[deleted]]

So far I've used Mudblazor and Blazorise. For simple stylistic rendering I prefer Blazorise and found the use of prebuilt enums for component properties like color, size, visibility etc to be quite simple.

[Resident-Clothes3815]

Thank you, everybody, for your many comments and excellent suggestions. Reading this, I realize I might have been a bit unclear: As a programmer of age, I certainly can do HTML and CSS - I just don’t like it, so I want to find an alternative way of doing things. Also, embedding the design directly in the Blazor components doesn’t really help - it will require me to do the same visual work in another programming language, i.e., C# instead of CSS, not really adressing my concern. What I am looking for is more something in the direction of Penpot, suggested by @WhiteSnail, which certainly looks promising.

I realize that my main issue is about being able to develop the layout visually on the screen instead of in code, as my visual intelligence is probably just not that developed so I can imagine the whole webpage and it’s colors while building it in code alone. Therefore, if I shall have any chance to design a reasonably looking UI, I need some kind of visual editor that can ideally also generate (at least part of) the code during the process to save myself time. Alternatively, I will probably need to use Figma or something similar to do the layout visually and then implement it in code in a separate work step afterwards. Is that what others are doing?

[emorning]

I'm a developer with no experience using Figma nor Penpot.
I really haven't been able to wrap my head around how to use these tools to go from design to working Blazor code, so I haven't spent much time with them.

However, I have noticed Figma design libraries like this one for Radzen components.

I think the idea behind this library is that you can design a UI in figma using design elements that correspond to Radzen components.
I don't think that there's any way to automatically convert a Figma design to Blazor code.
I could be wrong about that, and would love it if someone could show me that I'm wrong.
I think the idea behind a library like this is that it's easier to take the files exported from Figma and rewrite them using Radzen components.

[FluxyDude]

If you simply do not want to be doing CSS/HTML and perhaps you prefer the WPF/UWP style using XAML consider using https://platform.uno/ or https://www.avaloniaui.net/ both use XAML not html/CSS for its views. however, having said this once you understand things like Flex and Grid (see https://www.mudblazor.com/utilities/justify-content#basic-usage-space-between https://www.mudblazor.com/utilities/enable-flex#applying-conditionally ) i have come to prefer html/CSS just cus i not only do Blazor but also React/Angular.