DevExtreme in 2026: Components, Pricing and Setup

DevExtreme is DevExpress's commercial JavaScript UI component suite: 80+ components for Angular, React, Vue and jQuery, best known for its DataGrid, Pivot Grid, Scheduler, Gantt and charts. As of October 2026 the current major version is 26.1, a DevExtreme Complete license costs $899.99 per developer for the first year ($449.99 to renew), and every developer who writes code against it needs a license. It is a strong pick for data-heavy business apps and overkill for a marketing site.

This guide covers what you get, what it costs, a working React setup (DataGrid, chart, Excel export, theming), the Angular equivalent, and how it compares with free alternatives.

What DevExtreme is (and isn't)

DevExtreme is a set of web UI components. "Cross-platform" means your app runs in any modern browser on desktop, tablet and phone, and the components adapt to screen size and touch. It is not a native mobile toolkit: there is no iOS or Android widget layer. Older articles described it as a way to build "mobile apps"; today you get responsive web apps and PWAs, and for an app-store binary you wrap the web app yourself (Capacitor, Electron, Tauri). DevExpress sells separate products for .NET desktop and mobile.

The same components ship for four frameworks, per the DevExtreme site:

Framework	npm packages	Notes
React	devextreme, devextreme-react	Peer dependency allows React 16.2 through 19 (v26.1.5)
Angular	devextreme, devextreme-angular	NgModules and standalone components
Vue	devextreme, devextreme-vue	Vue 3
jQuery / plain JS	devextreme (or CDN scripts)	$("#grid").dxDataGrid({...})

ASP.NET Core developers can also drive the components from Razor through DevExpress's server-side wrappers.

The source is public on GitHub, but it is not open source in the OSI sense: use is governed by the DevExpress EULA and needs a paid license.

Key features

DataGrid, TreeList, Pivot Grid and Card View

The DataGrid is the main reason most teams buy DevExtreme. According to the DataGrid docs, it covers:

• Sorting, filtering, searching and grouping, with a filter row, header filters, a filter builder and a search panel.
• Editing: row, batch, cell, form and popup modes, with per-column validation.
• Large data sets: virtual and infinite scrolling, and remote operations, where sorting, filtering, paging and grouping run on your server.
• Summaries (total and group), master-detail rows, fixed columns, a column chooser, and state storing (the user's layout saved to localStorage or your API).
• Excel and PDF export, using ExcelJS and jsPDF, which you install yourself.

TreeList handles hierarchical rows, Pivot Grid does OLAP-style cross-tab analysis with drill-down, and Card View shows the same data as cards. In v26.1 DataGrid and TreeList also got an AI Assistant (roadmap post): with aiAssistant.enabled and an aiIntegration pointed at your own LLM provider, users type requests like "group by country and sort by revenue" and the grid changes its layout. It does not query or edit your data, and you pay your model provider for the tokens.

Charts, gauges and maps

Chart (line, bar, area, range, financial, scatter, bubble), Pie, Polar, Range Selector, Sparkline, Bullet, linear and circular gauges, Bar Gauge, Tree Map, Vector Map and Diagram. Charts support zoom and pan, tooltips, crosshair, annotations, and PNG/SVG/PDF export. They use the same declarative options as the grid, so a dashboard reads like one codebase instead of three libraries glued together.

Scheduler and Gantt

The Scheduler has day, week, work week, month, timeline and agenda views, recurring appointments, resources, drag-and-drop and time zones. Gantt shows tasks, dependencies and resources, with PDF export.

Forms, editors and layout

A Form layout engine with validation, and editors such as TextBox, NumberBox, DateBox, DateRangeBox, SelectBox, TagBox, Lookup, HtmlEditor (with Markdown) and FileUploader. Plus Toolbar, Menu, TreeView, Tabs, Drawer, Splitter, Popup, FileManager and a Chat component that can stream AI responses.

One data layer

Every data component accepts a DataSource or Store: ArrayStore for local arrays, ODataStore for OData, and CustomStore for any REST API. For ASP.NET backends, the open source DevExtreme.AspNet.Data library turns the grid's load options into LINQ queries.

Themes and tooling

Fluent, Material and Generic themes, each light or dark and normal or compact, imported as one CSS file. The ThemeBuilder creates brand variants. The MIT-licensed DevExtreme CLI scaffolds apps and builds themes. Localization and keyboard/screen reader support are documented per component.

DevExtreme pricing and licensing (October 2026)

From the official Buy page:

Subscription	First year	Renewal	Includes
DevExtreme Complete	$899.99	$449.99	Angular, React, Vue and jQuery components, ThemeBuilder, CLI, templates
ASP.NET and Blazor	$1,099.99	$549.99	DevExtreme plus ASP.NET Core, MVC and Blazor controls
DXperience	$1,699.99	$849.99	Adds reporting, dashboards and more .NET controls
Universal	$2,299.99	$1,149.99	Adds WinForms, WPF and other desktop tools

Every first-year purchase includes 12 months of updates, support and source code. Licensing rules from the DevExtreme licensing guide:

• Per developer, not per app. End users and deployed apps are royalty-free; a build server that only produces builds needs no seat.
• Renewal is optional. You keep using versions released during your subscription.
• 30-day evaluation. Unlicensed use shows an on-screen message and console warnings.
• License key at build time. Since v26.1 you register your DevExpress key on your machine (or as a CI environment variable), and the devextreme-license CLI writes a runtime key that you pass to DevExtreme's global config. Validation is client-side and makes no network requests.
• No free tier, including for open source or non-commercial projects.

Tutorial: a React orders screen with DevExtreme

You need a current Node.js LTS, npm, and a license or the trial.

Step 1: create or extend the app

The DevExtreme CLI generates a React app with a side-navigation layout and a theme already wired:

npx devextreme-cli new react-app orders-app --app-type vite --template typescript
cd orders-app
npm run dev

--app-type is vite or nextjs; --empty skips the sample views. For an existing app, run npx -p devextreme-cli devextreme add devextreme-react, or install by hand. DevExtreme does not follow semantic versioning, so DevExpress recommends pinning exact versions:

npm install devextreme@26.1 devextreme-react@26.1 --save --save-exact

Then import one theme in your entry file:

import 'devextreme/dist/css/dx.fluent.blue.light.css';

Step 2: add the license key

Add a prebuild script that generates the runtime key file, and register it before any component renders:

{
  "scripts": {
    "prebuild": "devextreme-license --out src/devextreme-license.ts --force"
  }
}

import config from 'devextreme/core/config';
import { licenseKey } from './devextreme-license';

config({ licenseKey });

Add src/devextreme-license.ts to .gitignore; each developer has their own key.

Step 3: build the grid

import DataGrid, {
  Column, Editing, FilterRow, GroupPanel, Pager, Paging, SearchPanel, Summary, TotalItem,
} from 'devextreme-react/data-grid';

export const orders = [
  { id: 1, customer: 'Acme', country: 'USA', date: '2026-09-02', amount: 1200 },
  { id: 2, customer: 'Globex', country: 'Germany', date: '2026-09-05', amount: 860 },
  { id: 3, customer: 'Umbrella', country: 'UK', date: '2026-09-19', amount: 2150 },
];

export default function OrdersGrid() {
  return (
    <DataGrid dataSource={orders} keyExpr="id" showBorders columnAutoWidth>
      <FilterRow visible />
      <SearchPanel visible width={240} />
      <GroupPanel visible />
      <Editing mode="popup" allowAdding allowUpdating allowDeleting />
      <Paging defaultPageSize={10} />
      <Pager showPageSizeSelector allowedPageSizes={[10, 25, 50]} />
      <Column dataField="customer" />
      <Column dataField="country" />
      <Column dataField="date" dataType="date" />
      <Column dataField="amount" dataType="number" format="currency" />
      <Summary>
        <TotalItem column="amount" summaryType="sum" valueFormat="currency" />
      </Summary>
    </DataGrid>
  );
}

Each feature is a child component, so you switch features on and off declaratively. Drag a column header into the group panel and the grid groups by it.

Step 4: load data from your API

For real data, swap the array for a CustomStore and let the server page and sort:

import CustomStore from 'devextreme/data/custom_store';

export const ordersStore = new CustomStore({
  key: 'id',
  async load(loadOptions) {
    const params = new URLSearchParams();
    if (loadOptions.skip != null) params.set('skip', String(loadOptions.skip));
    if (loadOptions.take != null) params.set('take', String(loadOptions.take));
    if (loadOptions.sort) params.set('sort', JSON.stringify(loadOptions.sort));
    const res = await fetch('/api/orders?' + params.toString());
    if (!res.ok) throw new Error('Failed to load orders');
    return res.json(); // { data: Order[], totalCount: number }
  },
});

// <DataGrid dataSource={ordersStore} remoteOperations={true} ... />

Need a backend to test against? DevHunt keeps a list of free APIs.

Step 5: add a chart and Excel export

import Chart, { Series, Tooltip, Legend } from 'devextreme-react/chart';
import { orders } from './OrdersGrid';

export function RevenueChart() {
  return (
    <Chart dataSource={orders} title="Revenue by customer">
      <Series argumentField="customer" valueField="amount" type="bar" />
      <Legend visible={false} />
      <Tooltip enabled />
    </Chart>
  );
}

For export, npm install exceljs file-saver, then:

import { Workbook } from 'exceljs';
import { saveAs } from 'file-saver';
import { exportDataGrid } from 'devextreme/excel_exporter';
import type { ExportingEvent } from 'devextreme/ui/data_grid';

function onExporting(e: ExportingEvent) {
  const workbook = new Workbook();
  const worksheet = workbook.addWorksheet('Orders');
  exportDataGrid({ component: e.component, worksheet }).then(() =>
    workbook.xlsx.writeBuffer().then((buffer) =>
      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'orders.xlsx'),
    ),
  );
}
// <DataGrid onExporting={onExporting}><Export enabled /></DataGrid>

Step 6: theme it

Switching base themes is one CSS import (dx.material.blue.dark.css, dx.fluent.blue.light.compact.css). For brand colors, export variables from the ThemeBuilder as JSON and build the CSS:

npx devextreme-cli build-theme --base-theme=fluent.blue.light --input-file=my-theme.json --output-color-scheme=brand

Add --make-swatch to scope the theme under a .dx-swatch-brand class, for example a dark sidebar next to a light content area.

Install DevExtreme in Angular

From the Angular guide:

1. npm install devextreme@26.1 devextreme-angular@26.1 --save --save-exact
2. Add node_modules/devextreme/dist/css/dx.fluent.blue.light.css to angular.json under architect > build > options > styles, before your own stylesheet.
3. Import the standalone components:

import { Component } from '@angular/core';
import { DxDataGridComponent, DxiDataGridColumnComponent } from 'devextreme-angular/ui/data-grid';

@Component({
  selector: 'app-orders',
  standalone: true,
  imports: [DxDataGridComponent, DxiDataGridColumnComponent],
  template: `
    <dx-data-grid [dataSource]="orders" keyExpr="id" [showBorders]="true">
      <dxi-data-grid-column dataField="customer"></dxi-data-grid-column>
      <dxi-data-grid-column dataField="total" dataType="number"></dxi-data-grid-column>
    </dx-data-grid>
  `,
})
export class OrdersComponent {
  orders = [{ id: 1, customer: 'Acme', total: 1200 }];
}

NgModule apps import DxDataGridModule instead. The license key step is the same as in React.

Common problems and fixes

Problem	Cause	Fix
Unstyled components	No theme CSS imported	Import one dx.*.css file once
"License key" console warning	Key missing or not regenerated	Run the prebuild script; call config({ licenseKey }) before rendering
Next.js error about window	Component rendered on the server	Add 'use client' to files that use DevExtreme
Big bundle	Importing from the package root	Import per component, e.g. devextreme-react/data-grid
Grid slow with 100k rows	All data loaded in the browser	CustomStore with remoteOperations and virtual scrolling

Honest trade-offs

Worth the money for: enterprise CRUD and reporting screens where a grid must group, summarize, edit, export and push work to the server; teams that want one vendor for grid, scheduler, charts and forms with paid support; long-lived apps (DevExpress ships two majors a year, x.1 and x.2).

Where it hurts:

• Cost scales with headcount. Ten developers on DevExtreme Complete is about $8,100 in year one after the automatic 10% multi-license discount.
• Styling. The themes are polished but recognizable; matching a custom (say, Tailwind-based) design system takes theme work.
• Upgrades. No semver, so read the breaking-changes list for every major.
• Lock-in. Grid configuration, stores and templates are DevExtreme-specific; switching later means rewriting those screens.

DevExtreme vs alternatives

Library	License	Best for
DevExtreme	Commercial, per developer	One vendor for grid, charts, scheduler, Gantt and forms
AG Grid	Community MIT; Enterprise paid	When the grid is the only heavy component
MUI X	Core MIT; Pro and Premium paid	React apps already on Material UI
Kendo UI (Progress)	Commercial	A similar all-in-one suite
Syncfusion Essential JS 2	Commercial; free community license for eligible small companies	Very wide catalog
PrimeReact / PrimeNG / PrimeVue	MIT	Free, broad component sets
TanStack Table	MIT	Headless grid you style yourself

The free options cover most needs; the gap shows in pivot tables, Gantt and polished scheduling, which are usually paid elsewhere too. Browse more in DevHunt's UI library, charts and framework categories.

FAQ

Is DevExtreme free?

No. There is a 30-day trial; after that each developer needs a paid license, starting at $899.99 for DevExtreme Complete (as of October 2026). The npm packages and GitHub source are public, but the license is commercial.

What is the difference between DevExtreme and DevExpress?

DevExpress is the company. DevExtreme is its JavaScript component suite for Angular, React, Vue and jQuery. DevExpress also sells .NET controls (WinForms, WPF, Blazor, ASP.NET) and reporting; some bundles include DevExtreme.

What is the latest DevExtreme version?

26.1, the first major release of 2026 (26.1.5 on npm in September 2026). DevExpress ships two majors a year, so 26.2 is next.

How do I install DevExtreme in React?

Run npm install devextreme devextreme-react, import a theme such as devextreme/dist/css/dx.fluent.blue.light.css once, and import components per path (devextreme-react/data-grid). Or scaffold an app with npx devextreme-cli new react-app my-app.

Is the DevExtreme DataGrid good for large data sets?

Yes, with remote operations. A CustomStore (or DevExtreme.AspNet.Data on the server) plus remoteOperations makes the grid request only the visible page, already sorted and filtered, and virtual scrolling keeps the DOM small. DevExpress publishes interactive DataGrid demos with source on js.devexpress.com.