Select theme:

Material 3

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.

image

Navigation Barlink

The navigation bar gives you quick access to key tools.

IconSectionDescription
ToolboxLists all Blazor components available in your project. See Components for details.
ExplorerShows all files and folders in your current project, along with a component outline.
Find and ReplaceQuickly locate or replace text, markup, and code across your entire project.
AppearanceChange how your app looks. See Styling, Themes & Branding.
DebuggerStep through your code and inspect variables, fields, and properties. See Debugging.
New ApplicationCreate a new Blazor Server or WebAssembly app. See Applications.
Open ApplicationOpen an existing application.
Radzen SettingsAdjust 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

image

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.

IconStatusDescription
ReadyThe app is ready to open or run.
LoadingA Blazor application is being opened.
BuildingThe project is compiling. Please wait.

Opened Files Tabstriplink

image

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

image

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

image

Undo or redo recent changes in the current file.

Zoom and Canvas Widthlink

image

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

image

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.

image

Property Gridlink

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

image

© 2016-2025 Radzen Ltd. All Rights Reserved.
Designed and developed with ❤️ in Radzen Blazor Studio.

Select theme:

Material 3