Create a Blazor Web App in Rider

• Jan 14, 2026
• 3 minutes to read

This help topic contains step-by-step instructions on how to create and run a Blazor Server web application with DevExpress components in JetBrains Rider.

Create and Run a Project

Note

This help topic applies to JetBrains Rider 2025. Steps may vary slightly in other versions.

1. Open Rider and click New Solution.
2. Select DevExpress Template Kit from the Other section.

3. Specify the solution name, target directory, and click the Create button.

   

4. Click Blazor in the left pane of the Template Kit window.

   

5. Click the Create Project button.

6. Press F5 to run your new Blazor application.

Rider builds the project, and automatically opens the app’s home page in a web browser.

Add a DevExpress Blazor Component to the App

To get acquainted with the project structure, add a simple DevExpress Blazor component (Calendar) to the app and see it in action:

1. Add a new Blazor Component named Calendar under Components → Pages. in the Solution Explorer.
2. Open the Calendar.razor component and remove all autogenerated content to start from scratch.

3. Define a component as a routable page that can handle requests from http://localhost:####/calendar. Use the following directive:

   @page "/calendar"
   

4. The DevExpress Calendar for Blazor does not support static render mode. Enable interactivity to use a component in the application:

   @rendermode InteractiveServer
   

5. Add a page title and heading text:

   <PageTitle>Calendar</PageTitle>
   <h1>Calendar</h1>
   

6. Add the DxCalendar component to the page. Bind the component to the SelectedDate variable to test interactivity.

   <DxCalendar @bind-SelectedDate="@SelectedDate" />
   
   <p><b>Selected date:</b> @SelectedDate.ToLongDateString()</p>
   
   @code {
       DateTime SelectedDate { get; set; } = DateTime.Now;
   }
   

7. Add a link to the page in the application’s sidebar. Open the Components → Layout → NavMenu.razor file and add a new DxMenuItem:

   <DxMenuItem NavigateUrl="/calendar"
               Text="Calendar"
               CssClass="@MenuItemCssClass("/calendar")"
               IconCssClass="icon icon-demos" />
   

8. Press F5 to run your Blazor application and switch to Calendar.

   

Full code:

Calendar.razor

@page "/calendar"
@rendermode InteractiveServer

<PageTitle>Calendar</PageTitle>
<h1>Calendar</h1>

<DxCalendar @bind-SelectedDate="@SelectedDate" />

<p><b>Selected date:</b> @SelectedDate.ToLongDateString()</p>

@code {
    DateTime SelectedDate { get; set; } = DateTime.Now;
}

NavMenu.razor

@inject NavigationManager NavigationManager
@implements IDisposable

<div>
    <DxMenu Orientation="@Orientation.Vertical" CssClass="menu">
        <Items>
            <DxMenuItem NavigateUrl="/"
                        Text="Home"
                        CssClass="@MenuItemCssClass("/")"
                        IconCssClass="icon icon-home"></DxMenuItem>
            <DxMenuItem NavigateUrl="/counter"
                        Text="Counter"
                        CssClass="@MenuItemCssClass("/counter")"
                        IconCssClass="icon icon-counter"></DxMenuItem>
            <DxMenuItem NavigateUrl="/weather"
                        Text="Weather"
                        CssClass="@MenuItemCssClass("/weather")"
                        IconCssClass="icon icon-weather"></DxMenuItem>
            <DxMenuItem NavigateUrl="/calendar"
                        Text="Calendar"
                        CssClass="@MenuItemCssClass("/calendar")"
                        IconCssClass="icon icon-demos" />
        </Items>
    </DxMenu>
</div>

@code {
    private string? currentLocalPath;

    protected override void OnInitialized() {
        currentLocalPath = new Uri(NavigationManager.Uri).LocalPath;
        NavigationManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e) {
        currentLocalPath = new Uri(NavigationManager.Uri).LocalPath;
        InvokeAsync(StateHasChanged);
    }

    private string? MenuItemCssClass(string itemPath) {
        return string.Equals(currentLocalPath, itemPath,
            StringComparison.OrdinalIgnoreCase) ? "menu-item-active" : null;
    }

    public void Dispose() {
        NavigationManager.LocationChanged -= OnLocationChanged;
    }
}