Design time

This article shows how to use the Radzen Blazor for Visual Studio design time features.

WYSIWYG Editor

The WYSIWYG (What You See Is What You Get) editor is one of the commonly used features of Radzen Blazor for Visual Studio. It activates as soon as you open a .razor file.

TIP: You can chang the default edit mode (design, split or source) from the Radzen Blazor for Visual Studio settings available in Tools → Options → Radzen Blazor for Visual Studio.

You get instant feedback while coding. There is no need to run your application after every change.

Property Grid

The Radzen Blazor Property Grid allows you to visually configure Blazor components. Experiment with different settings to complete your task quickly.

To activate the property grid:

1. Open a .razor file by double clicking it in Solution Explorer.
2. Go to View → Radzen Blazor for Visual Studio → Properties in the Visual Studio top menu.
3. Select a component from the WYSIWYG editor by clicking it.
4. Change the value of any property.

TIP: When typing in a textbox of the property grid press ENTER to apply your changes and get a preview.

Toolbox

The Radzen Blazor Toolbox allows you to drag and drop Blazor components in a .razor file.

To use the toolbox:

1. Open a .razor file by double clicking it in Solution Explorer.
2. Go to View → Radzen Blazor for Visual Studio → Toolbox in the Visual Studio top menu.
3. Find the desired component. You can switch between Advanced mode (listing all components available for the current application) and Simple mode (showing only the Radzen.Blazor components grouped by category).
4. Drag and drop the component in the opened .razor file.

Theme

If your application uses the Radzen.Blazor component library you can use the theme tool to change the current theme or customize it to your needs.

Note: The premium themes and theme customization are not available during trial.

To activate the Radzen Blazor Theme:

1. Open a .razor file by double clicking it in Solution Explorer.
2. Go to View → Radzen Blazor for Visual Studio → Theme in the Visual Studio top menu.
3. Pick a different theme or customize the current one.

Outline

The Radzen Blazor Outline shows all Blazor components in the currently opened .razor file and allows you to quickly find the one you need to customize.

To activate the outline:

1. Open a .razor file by double clicking it in Solution Explorer.
2. Go to View → Radzen Blazor for Visual Studio → Outline in the Visual Studio top menu.
3. Select a component from the tree. You can use the context menu to perform various operation over the selection.