Select theme:
When you open Radzen Blazor Studio for the first time, you’ll see a simple, organized workspace.
You can open or create an app, drag components onto a page, and switch between design and code views.
Most users start by opening a project, exploring the Toolbox and Explorer, then editing a .razor
file in the Design Canvas.
This page explains what each part of the interface does and how it fits together.
The navigation bar gives you quick access to key tools.
Icon | Section | Description |
---|---|---|
![]() | Toolbox | Lists all Blazor components available in your project. See Components for details. |
![]() | Explorer | Shows all files and folders in your current project, along with a component outline. |
![]() | Find and Replace | Quickly locate or replace text, markup, and code across your entire project. |
![]() | Appearance | Change how your app looks. See Styling, Themes & Branding. |
![]() | Debugger | Step through your code and inspect variables, fields, and properties. See Debugging. |
![]() | New Application | Create a new Blazor Server or WebAssembly app. See Applications. |
![]() | Open Application | Open an existing application. |
![]() | Radzen Settings | Adjust Radzen Blazor Studio preferences, such as theme (Dark or Light). |
The Toolbox lists all Blazor components available in your current app — both built-in and third-party.
Components are grouped by namespace. You’ll also find common HTML elements like div
, p
, and button
.
The toolbox appears after you open a
.razor
file.
The Explorer shows all files and folders in your current application.
If you open a solution (.sln
file), it displays all projects in that solution.
Click any file to open it for editing.
Allows you to search for text across your project and replace it in one or multiple files. Use it to quickly locate code, rename identifiers, or update values throughout your application.
The Outline view shows all components and HTML elements in the currently opened .razor
file.
Use it to quickly select nested components.
It’s available in both the Toolbox and Explorer views.
The Status Bar is at the bottom of the screen. It shows output messages, build results, and current status.
Displays the output from the dotnet
command that Radzen Blazor Studio uses to build and run your app.
Also shows build errors during loading.
Shows various messages about what Radzen Blazor Studio is doing.
Icon | Status | Description |
---|---|---|
![]() | Ready | The app is ready to open or run. |
![]() | Loading | A Blazor application is being opened. |
![]() | Building | The project is compiling. Please wait. |
Opened files appear as tabs at the top of the workspace.
Right-click a tab to open its context menu for more options.
The Toolbar lets you switch between design modes, preview mobile layouts, and undo or redo changes.
Switch between different design modes for the opened file:
.razor
files).Undo or redo recent changes in the current file.
Adjust the canvas width to preview how your page looks on different screen sizes.
You can also set a custom width in pixels.
Change how you edit the design canvas:
The Design Canvas shows the opened file in the current view mode.
You can select UI elements such as components, HTML tags, properties, and methods.
The Property Grid displays the properties of the selected element.
You can change settings, handle events, add attributes, or edit CSS styles.
Radzen is free to use. You can also test the premium features for 15 days.
Start FreeSelect theme: