Add DevExtreme Components to a Blazor Application

• Sep 26, 2023
• 2 minutes to read

This article shows how to embed DevExtreme widgets into your Blazor application. You can use the same methods to integrate any JavaScript-based library.

Note that DevExtreme widgets ship with the same DevExpress subscription as our Blazor UI Controls.

View Example: Use Gauges, HTML Editor, and Map in a Blazor Application

You need to implement Blazor components - wrappers for JavaScript widgets. Each wrapper consists of two files:

• A *.razor file that renders a DevExtreme component and processes input parameters. This file implements JavaScript-based API on the Blazor side.
• A *.razor.js file that configures settings for a DevExtreme component.

Each component also renders another Blazor component that loads DevExtreme resources when you open a page with a DevExtreme component for the first time.

After you reference the project with wrappers, you can use them as regular Blazor components. The following code adds a DevExtremeMap wrapper component:

<DevExtremeMap />

Our GitHub example implements Gauge, HTML Editor, and Map wrappers. You can integrate other components in the same manner. Refer to the following repository for example code: Use Gauges, HTML Editor, and Map in a Blazor Application.

This integration method works best when you need to implement only a few members in your wrapper.

For more information on how to work with JavaScript in Blazor applications, refer to the following Microsoft article: ASP.NET Core Blazor JavaScript interoperability (JS interop).