Select theme:
Radzen Blazor Studio makes it easy to add and manage Blazor components and HTML elements through its visual designer.
When you open a .razor
file, Radzen Blazor Studio displays a Toolbox that lists all components available in your project.
The Toolbox includes several categories:
InputText
, EditForm
, and NavLink
.@page
directive or shared components).div
, p
, and button
. To use other elements, you can edit the source code.To add a Blazor component or HTML element:
You can select components in a few different ways:
Click the component directly on the Design Canvas.
Click the component name in the Outline view in the sidebar.
Use the toolbar arrows to move the selection to a parent or child component.
You can also select multiple components by holding Ctrl (or Cmd on macOS) and clicking several elements.
To select a range, click one component, then Shift-click another — everything in between will be selected.
You can use keyboard shortcuts to cut, copy, or paste components:
You can also use the context menu or the “…” button in the toolbar.
To delete a component:
When you select a Blazor component, all of its parameters (the ones marked with [Parameter]
) appear in the Property Grid.
You can use the Property Grid to set or change values.
You don’t need to add quotation marks (" "
) around string values — Radzen Blazor Studio does that for you.
You can bind a component property to a field or property in your page’s data by typing @
. Radzen Blazor Studio shows an autocomplete dropdown with available members as you type.
You can also click the gear icon next to a property.
This opens the Expression Editor, where you can choose an existing property or field from your page.
For properties that support two-way binding (such as Value
and ValueChanged
), Radzen Blazor Studio uses the @bind-
syntax automatically.
You can toggle between one-way and two-way binding using the ↔ button.
For example:
@bind-Value="value"
can be switched to:
Value="value"
You can add custom attributes to HTML elements or Blazor components that support them.
Components that include a property decorated with [Parameter(CaptureUnmatchedValues = true)]
can receive additional custom attributes.
To add a custom attribute to a Blazor component, click the + next to Custom attributes, then enter the name and value.
To add an attribute to an HTML element, click Add Attribute.
Use the Styles tab in the Property Grid to change how a component or element looks.
When you edit a style property, Radzen Blazor Studio automatically generates a style
attribute.
You can handle component events from the Events tab in the Property Grid.
Handling events for HTML elements works the same way.
Click Add event and follow the same steps.
Some Blazor components have template properties (like RenderFragment
or RenderFragment<T>
).
To edit one, click the pencil icon next to the property.
Radzen Blazor Studio switches to template edit mode, allowing you to drag and drop components directly inside the template area.
If you open the Expression Editor, you can access template context properties using the context
parameter.
Click Done when you finish editing.
The Text item lets you insert plain text into your page — either inside or outside HTML elements.
To edit text, double-click it in the designer to enter inline edit mode and type your content.
Note:
Adding a Text item before or after another Text item merges them into one.
The Expression item allows you to display dynamic C# values (for example, @counter
) directly on the page.
Radzen is free to use. You can also test the premium features for 15 days.
Start FreeSelect theme: