Radzen Blazor Studio alpha is available! Get Now

Design time

Alpha Release

This article covers the alpha version of Radzen Blazor Studio. Please note that features can change during the alpha period. Bugs and performance issues are expected.

Open Application

After you start Radzen Blazor Studio you need to open an existing Blazor Server or Blazor WebAssembly application - a .csproj or .sln file.

To do so click the Open application button.

The Radzen Blazor Studio UI

The Radzen Blazor Studio UI is divided in a few sections.

Contains the following controls:

Sidebar Toggle Toggles the sidebar to leave more room for the design canvas.
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 sidebar has three sections:

  1. Toolbox
  2. Application Files
  3. Outline

Toolbox

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 div, p, button et. al.

The UI components section populates once you open a .razor file.

Application Files

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.

Outline

The outline UI inspector shows all components (Blazor components and HTML elements) in the currently opened .razor file. Use it to quickly select a nested component.

Status Bar

Output and status messages are positioned at the bottom of the screen.

Output

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.

Status Message

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.

Toolbar

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 .razor files.
  • 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.

Design Canvas

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

Property Grid

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.

We are here for you

Making our users happy is always a priority for us.