DevExtreme JS & ASP.NET Core — Early Access Preview (v25.1)

Our next major release (v25.1) is just a couple of months away. Here's a look at new features/capabilities included in our Early Access Preview (EAP) build (the EAP is available to active DevExpress Universal or DXperience subscribers). As always, if you discover issues with our EAP build, please submit a support ticket at the DevExpress Support Center or use the embedded survey to submit direct feedback.

Installation

If you own an active Universal or DXperience subscription, you can download our EAP build via the DevExpress DownloadManager or appropriate NuGet packages.

To begin using the DevExtreme v25.1 EAP build, simply install target framework related NPM packages (marked with the 25.1-next tag). Use one of the following commands to proceed:

npm install devextreme@25.1-next --save-exact 

npm install devextreme-angular@25.1-next --save-exact // Angular installation

npm install devextreme-react@25.1-next --save-exact // React installation

npm install devextreme-vue@25.1-next --save-exact // Vue installation

New Stepper Component

All Frameworks

Our Early Access Preview includes a new Stepper UI component. DevExtreme Stepper displays progress as users move through a sequence. It's ideal for multi-step processes, such as populating forms, onboarding, or app wizards.

DevExtreme Stepper supports the following capabilities/options:

• DataSource integration
• Horizontal or vertical layout
• Navigation modes (step through sequentially or skip)
• Pre-selected steps
• Custom icons or text for step indicators
• Step titles
• Visual step validation
• Optional and disabled steps
• Keyboard navigation
• Internationalization (right-to-left)

You can specify whether Stepper is horizontal or vertical using the orientation property. Change navigation mode to linear or non-linear using the linear property. Preselect an item by index using the selectedIndex option. The selectOnFocus option determines if items are selected automatically when focused via the keyboard.

You can customize each step using the following settings:

• icon: sets an icon inside the step indicator.
• text: incorporates text within the step indicator.
• title: places a caption next to the step.
• isValid: visually indicates validation state.
• optional: visually marks as optional.
• disabled: disables the step.
• hint: adds an in-browser hint.

If using Angular to evaluate/test our EAP, we recommend the use of our new configuration components:

<dx-stepper> 
    <dxi-stepper-item text="1"></dxi-stepper-item> 
    <dxi-stepper-item text="2" [optional]="true" ></dxi-stepper-item> 
    <dxi-stepper-item icon="gift"></dxi-stepper-item> 
</dx-stepper> 

Scheduler – Toolbar Customization

Angular, React, jQuery, Vue

This EAP introduces a customizable toolbar to the DevExtreme Scheduler (available for Angular, React, jQuery, and Vue). This new capability can be used to add custom items like a Today button, a new appointment button, or a custom resource selector to our built-in toolbar.

Specify the toolbar property to include desired items. You can set the location for each item (much like our standalone Toolbar). For DevExtreme components, specify associatedoptions. To introduce unique elements, use a custom template.

$('#scheduler').dxScheduler({ 
    // ... 
    toolbar: { 
        items: [ 
            // DevExtreme components: dxButton 
            { 
                location: 'before', 
                locateInMenu: 'auto', 
                widget: 'dxButton', 
                options: { 
                    text: 'Today', 
                    stylingMode: 'outlined', 
                    type: 'normal', 
                    onClick() { 
                        scheduler.option('currentDate', new Date()); 
                    }, 
                }, 
            }, 
            // Predefined toolbar's elements 
            'dateNavigator', 
            // Custom element 
            { 
                template: '<div>Custom Item</div>', 
            }, 
        ] 
    } 
}); 

Predefined items include "dateNavigator" and "viewSwitcher". If you do not specify the toolbar explicitly, the default toolbar with these two items is displayed on-screen. 

You can also switch button order used in the “dateNavigator” and decide which buttons to display on-screen.

toolbar: { 
    items: [ 
        { 
           location: 'before', 
           name: 'dateNavigator',   
           options: { 
               items: ['dateInterval', 'prev', 'next'],   
           }, 
        }, 
    ] 
} 

The example below also demonstrates use of DevExtreme Button (switch to Today) and SelectBox (choose resources) in the toolbar.

If using Angular to test our EAP, you must use our new configuration components when working with toolbar items:

<dxo-scheduler-toolbar> 
    <dxi-scheduler-toolbar-item  
        name="dateNavigator"  
        location="before"  
        [options]="{items: ['dateInterval', 'prev', 'next']}"> 
    </dxi-scheduler-toolbar-item> 
</dxo-scheduler-toolbar> 

Map – Custom Route Modes

All Frameworks

With this EAP, DevExtreme Map allows you to set custom route options for various transportation types.

Azure map 'car' route mode:

Azure map 'truck' route mode:

Note that each Map provider (Azure, Google, Bing) has its own set of route modes. Pass a string with the desired route name to the routes[].mode property to test this feature. For instance, you can switch default 'car' route type in Azure maps to a custom route mode like 'bicycle' or 'truck'.

Create React Applications with Vite

React

Previously, DevExtreme CLI used create-react-app (CRA) as a build tool for React applications. In February 2025, CRA was deprecated. With this EAP, we switched from CRA to Vite when creating DevExtreme React applications.

When creating a new app, DevExtreme CLI now allows you to choose between JS transpilers: Babel (used previously as the default) and SWC. To test this capability, select transpiler type in a terminal:

Or you can add a --transpiler=swc or --transpiler=babel argument to the first command:

npx devextreme-cli@1.11.0-alpha.0 new react-app app-name --transpiler=swc 

or 

npx devextreme-cli@1.11.0-alpha.0 new react-app app-name --transpiler=babel 

After creating a project, run the following commands:

cd app-name  
npm run dev 

In addition to Vite, we plan to add an option for Next.js build in our official v25.1 release.