Componentslink

Radzen Blazor Studio makes it easy to add and manage Blazor components and HTML elements through its visual designer.

Toolboxlink

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:

• Built-in – Standard Blazor components such as InputText, EditForm, and NavLink.
• Third-party – Components from external libraries used in your project.
• Application – Components defined within your own app (like pages with the @page directive or shared components).
• HTML – Common HTML elements such as div, p, and button. To use other elements, you can edit the source code.

Add a Componentlink

To add a Blazor component or HTML element:

1. Find it in the Toolbox. You can type part of its name to locate it quickly.
2. Drag it from the Toolbox onto the Design Canvas.
3. Drop it where you want it — before, after, or inside another element.

Select a Componentlink

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.

Move Componentslink

1. Select one or more components.
2. Drag the move handle to a new position.
3. Release the mouse button to place them.

Cut, Copy, and Pastelink

You can use keyboard shortcuts to cut, copy, or paste components:

• Ctrl + X (Cmd + X on macOS) — Cut
• Ctrl + C (Cmd + C) — Copy
• Ctrl + V (Cmd + V) — Paste

You can also use the context menu or the “…” button in the toolbar.

Delete Componentslink

To delete a component:

• Select it, then click Delete from the toolbar or context menu.
• You can also press Backspace.

Set Propertieslink

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.

Bind a Property to Datalink

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.

Two-Way Data Bindinglink

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"

Attributeslink

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.
  

CSS Stylelink

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.

Eventslink

You can handle component events from the Events tab in the Property Grid.

1. Click the + next to an event name.
2. Enter a method name — a default name is suggested automatically.
3. Radzen Blazor Studio creates the event handler and opens it in Methods mode, where you can add your logic.

Handling events for HTML elements works the same way.

Click Add event and follow the same steps.

Templateslink

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.

Textlink

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.

Expressionlink

The Expression item allows you to display dynamic C# values (for example, @counter) directly on the page.