Navigating the Radzen Blazor Studio Interfacelink

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.

Navigation Barlink

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).

Toolboxlink

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.

Explorerlink

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.

Find and Replacelink

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.

Outlinelink

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.

Status Barlink

The Status Bar is at the bottom of the screen. It shows output messages, build results, and current status.

Outputlink

Displays the output from the dotnet command that Radzen Blazor Studio uses to build and run your app.
Also shows build errors during loading.

Status Messageslink

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 Tabstriplink

Opened files appear as tabs at the top of the workspace.
Right-click a tab to open its context menu for more options.

Toolbarlink

The Toolbar lets you switch between design modes, preview mobile layouts, and undo or redo changes.

File Design Mode Switcherlink

Switch between different design modes for the opened file:

• UI – Design the page layout (available for .razor files).
• Data – Manage properties and fields.
• Methods – Edit page methods.

Undo / Redolink

Undo or redo recent changes in the current file.

Zoom and Canvas Widthlink

Adjust the canvas width to preview how your page looks on different screen sizes.
You can also set a custom width in pixels.

File Edit Mode Switcherlink

Change how you edit the design canvas:

• Design – Edit visually by adding, changing, or removing items.
• Split – View the visual designer and code editor side by side.
• Source – Edit the raw source code directly.

Design Canvaslink

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.

Property Gridlink

The Property Grid displays the properties of the selected element.
You can change settings, handle events, add attributes, or edit CSS styles.