Open existing Blazor application or create a new one
After you start Radzen Blazor Studio you will see the following screen.
To open an existing Blazor application click the “Open Application” button and browse to the
.csproj of your app.
To create a new Blazor application click the “+” button in the bottom left corner.
The Radzen Blazor Studio UI
The Radzen Blazor Studio UI is divided in a few sections.
Contains the following items:
|Toolbox||The component toolbox list all Blazor components available in the opened application.|
|Explorer||A tree with all files and directories of the current application and component outline.|
|Appearance||Change the look and feel of your app.|
|New Application||Create a new Blazor Server or WebAssembly application.|
|Open Application||Open an application.|
|Radzen Settings||Shows the Radzen Blazor Studio settings which allow various customizations such as changing the Radzen Blazor Studio theme (Dark and Light).|
The component toolbox list all Blazor components available in the opened application - both third party and built-in ones.
The components are grouped by namespace.
The toolbox also includes commonly used HTML elements such as
button et. al.
The toolbox populates once you open a
A tree with all files and directories of the current application. If you have opened a solution (
.sln file) Radzen
Blazor Studio will show all projects.
Click a file to open it for editing.
The outline UI inspector shows all components (Blazor components and HTML elements) in the currently opened
Use it to quickly select a nested component. It is available in both Toolbox and Explorer views.
Output and status messages are positioned at the bottom of the screen.
Shows the output of the
dotnet command which Radzen Blazor Studio uses to build and run your application.
Also shows build errors during application loading.
Various status messages.
|Ready to Open or Run a Blazor application.|
|Loading a newly opened Blazor application.|
|Building the project. Please wait.|
Opened Files Tabstrip
Radzen Blazor Studio opens files in tabs. Be sure to check the tab context menu.
The toolbar allows you to change between design and view modes, check how a page would look like on a mobile device and perform undo / redo.
File Design Mode switcher
Allows you to change the design mode of the opened file.
- UI - design the UI of your Blazor page. Available only for
- Data - manage the properties and fields of your Blazor page.
- Methods - edit the methods of your Blazor page.
Undo / Redo
Undo or redo the latest change to the opened file.
Zoom and Canvas width
Change the canvas width to see how the page will look on a different screen size. Also allows you to specify a custom device width in pixels.
File Edit Mode switcher
Allows you to change the edit mode of the design canvas.
- Design - visually edit the opened file by setting properties and adding new items or deleting existing ones.
- Split - combines the visual designer with a source code editor.
- Source - allows you to edit the source of the opened file.
Shows the opened file in one of the available view modes. Allows you to select UI elements ( Blazor components, HTML elements, properties and fields or methods and statements).
Displays the properties of the selected UI element. Allows you to change the component behavior, handle its events, add or remove custom attributes or edit its CSS style.