DHTMLX Suite — JavaScript UI Widget Library (GPL Edition)

npm · License: GPL v2 · made by DHTMLX

@dhtmlx/suite is a JavaScript UI widget library with 20+ components for building data-intensive web applications – including a high-performance data grid, charts, forms, navigation controls, layout management, and data display widgets – all sharing a common API, theming system, and data layer.

It is a framework-agnostic library that works with plain JavaScript and integrates with React, Angular, Vue, and Svelte.

It is ideal for prototyping complex data-driven interfaces, building enterprise dashboards and admin panels in open-source projects, and evaluating DHTMLX Suite's core widgets under the GPL v2 license.

License

This edition of DHTMLX Suite is licensed under the GNU General Public License v2.0 (GPL v2).

You can redistribute this package and/or modify it under the terms of the GPL v2.

GPL v2 requires that any project using this package also be open source under a GPL-compatible license.

You may NOT use this package in closed-source, proprietary, or commercial applications without a separate commercial license. For commercial use, please obtain a commercial license of DHTMLX Suite (PRO edition).

This package is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GPL v2 for more details.

Using DHTMLX Suite in a commercial or closed-source project?

You need a commercial license. DHTMLX offers Individual, Commercial, Enterprise, and Ultimate license tiers.

• Compare licenses and pricing
• Download a free 30-day trial of DHTMLX Suite
• Download 30-day trial versions of all DHTMLX components
• Contact us regarding licensing: info@dhtmlx.com

The commercial PRO edition includes additional features per widget – such as TreeGrid mode in Grid, column drag-and-drop, and autoHeight for Grid headers/footers.

Copyright © 2026 XB Software Ltd.

What is DHTMLX Suite

DHTMLX Suite is a JavaScript UI widget library of 20+ components for building data-intensive web and mobile applications. Its widgets cover data display (Grid with TreeGrid mode, Chart, DataView, List, Tree, Pagination), user input (Form with 15+ controls, ComboBox, ColorPicker, Slider, TimePicker, Calendar), layout and navigation (Layout, Tabbar, Toolbar, Ribbon, Menu, Sidebar, Popup, Window), and utility components (Message). All widgets share a unified DataCollection and TreeCollection API for loading, filtering, sorting, and manipulating data, four built-in themes (Light, Light Contrast, Dark, Dark Contrast), and a consistent event system and configuration pattern across the library.

This is the GPL (open source) edition of DHTMLX Suite, distributed as the @dhtmlx/suite npm package. Some widgets – Calendar, Chart, Grid, and Tree – can be used as standalone components. All other widgets are tightly integrated with the Suite library and cannot be used outside of it.

Use this GPL edition when you want to prototype a data-intensive dashboard or admin panel, build a multi-widget application in an open-source project, or evaluate DHTMLX Suite's core components before obtaining a commercial license.

Quick Start

Install the package, import the styles, and initialize any Suite widget in a container element.

Install

npm install @dhtmlx/suite

Include in your project

import { Grid, Chart, Layout, Toolbar } from "@dhtmlx/suite";
import "@dhtmlx/suite/suite.css";

Or via CDN:

<link rel="stylesheet" href="https://cdn.dhtmlx.com/suite/edge/suite.css" />
<script type="text/javascript" src="https://cdn.dhtmlx.com/suite/edge/suite.js"></script>

Or with script tags pointing to local codebase files:

<script type="text/javascript" src="./codebase/suite.js"></script>
<link rel="stylesheet" href="./codebase/suite.css">

The CSS import is required for default Suite widget styling and layout.

Initialize a widget

All Suite widgets follow the same constructor pattern:

import { Grid } from "@dhtmlx/suite";
import "@dhtmlx/suite/suite.css";

const grid = new Grid("grid_container", {
    columns: [
        { id: "name",  header: [{ text: "Name" }],  width: 200 },
        { id: "role",  header: [{ text: "Role" }],  width: 150 },
        { id: "score", header: [{ text: "Score" }], width: 100 }
    ],
    data: [
        { id: "1", name: "Alice Johnson", role: "Engineer", score: 92 },
        { id: "2", name: "Bob Smith",     role: "Designer", score: 87 }
    ]
});

<div id="grid_container" style="width: 100%; height: 400px;"></div>

See live demos

Basic Usage — DHTMLX Suite

Building a layout with multiple widgets

Use Layout to arrange widgets in rows and columns, then attach Suite components to each cell:

import { Grid, Layout, Toolbar, Tree } from "@dhtmlx/suite";
import "@dhtmlx/suite/suite.css";

const layout = new Layout("layout_container", {
    rows: [
        { id: "toolbar", height: "content" },
        { id: "main",    cols: [
            { id: "sidebar", width: 220 },
            { id: "grid" }
        ]}
    ]
});

// Attach a Toolbar to the top row
const toolbar = new Toolbar(null, {
    data: [
        { type: "button", id: "add",    value: "Add",    icon: "dxi dxi-plus" },
        { type: "button", id: "export", value: "Export", icon: "dxi dxi-download" }
    ]
});
layout.getCell("toolbar").attach(toolbar);

// Attach a Tree to the sidebar
const tree = new Tree(null, {});
tree.data.parse([
    { id: "1", value: "Reports",   items: [
        { id: "1.1", value: "Q1" },
        { id: "1.2", value: "Q2" }
    ]},
    { id: "2", value: "Settings" }
]);
layout.getCell("sidebar").attach(tree);

// Attach a Grid to the main area
const grid = new Grid(null, {
    columns: [
        { id: "name",   header: [{ text: "Name" }] },
        { id: "status", header: [{ text: "Status" }] }
    ],
    data: []
});
layout.getCell("grid").attach(grid);

Sharing data between widgets

Suite widgets share the DataCollection API. Load data once and bind it to multiple widgets:

import { Grid, Chart, DataCollection } from "@dhtmlx/suite";
import "@dhtmlx/suite/suite.css";

// other configuration (columns, series, etc.)
const data = new DataCollection();
data.load("/api/sales");

const grid = new Grid("grid_container", { columns, data });
const chart = new Chart("chart_container", {
    type: "bar",
    series,
    data
});

Form with validation

Initialize a Form with multiple control types and validate before submit:

import { Form } from "@dhtmlx/suite";
import "@dhtmlx/suite/suite.css";

const form = new dhx.Form("form_container", {
    rows: [
        { type: "input",    name: "name",  label: "Full name", required: true },
        { type: "input",    name: "email", label: "Email",     inputType: "email", required: true },
        { type: "select",   name: "role",  label: "Role",
          options: [
              { value: "admin",  content: "Admin" },
              { value: "editor", content: "Editor" }
          ]
        },
        { type: "checkbox", name: "agree", label: "I agree to terms", required: true },
        { type: "button",   text: "Submit", view: "flat", color: "primary" }
        }
    ]
});

DHTMLX Suite Widgets

Data display

User input

Layout and navigation

Utility

DHTMLX Suite Library Features

Framework Integration

DHTMLX Suite works with popular front-end frameworks including React, Angular, Vue, and Svelte. These integration guides apply to both the GPL edition and the commercial editions of DHTMLX Suite.

• React integration guide
• Angular integration guide
• Vue.js integration guide
• Svelte integration guide

Documentation and Resources

• Product page – overview, live demos, and key features.
• Documentation – getting started guides and API references for all 20+ widgets.
• Live demos and samples – interactive code examples for every Suite widget.
• Demo applications – real-world app templates built with Suite widgets.
• Support forum – community Q&A and discussions for DHTMLX Suite.

npm short description: DHTMLX Suite – JavaScript UI widget library with 20+ components: data grid, charts, forms, layout, navigation, and more – GPL v2 open source edition.