DHTMLX Suite 7 UI Widgets Overview
Welcome to the documentation of DHTMLX Suite ‐ JavaScript UI widget library!
This documentation provides insight into how to create cross-browser responsive web applications using DHTMLX Suite. It contains API references, overviews, initialization, configuration, customization, and event handling guides for each Suite widget. There is also guidance on how to build various web systems following the example of DHTMLX live demos. Additionally, here you will find links to code examples of Suite widgets used with Angular, React, and Vue.js.
DHTMLX Suite Widgets#
The DHTMLX Suite UI library comprises 20+ versatile widgets for processing and visualizing large amounts of data, conveniently navigating the interface, and interacting with users in a friendly way.
Development Helpers#
There is a collection of helpers aimed to streamline web development by giving you all the necessary tools to work with data, content, and styles in the DHTMLX Suite library.
- AJAX
- AwaitRedraw
- CSS classes of base elements
- CssManager
- DataCollection API
- DataDrivers
- DataProxy
- Default Icons
- Dynamic Loading
- Resizer
- Selection Object API
- TreeCollection API
- Uploader API
How to Create DHTMLX-Based Web Applications#
Here you can find best practices in working with DHTMLX Suite widgets and explore live demo applications to kickstart your project.
Optimus Micro-Framework#
Optimus acts as a facilitator of web development based on DHTMLX Suite. It helps to assemble and reuse widgets within a web app and ensures communication between widgets and the environment.
Live Demo Apps#
A gallery of live demos provides real-life examples of using DHTMLX widgets in web apps. You can download any demo, view the source code, and try it out in your project. All demos are created with the help of Suite and Optimus.
- File manager demo
- UI dashboard demo
- Hotel management demo
- Geo tracking demo
- Sales KPI tracking demo
- Hospital management demo
- Online exam demo
CSS Widget Templates#
A set of CSS templates is specially designed for various use cases that can be implemented using DHTMLX widgets. You can borrow the CSS code and apply the styles you like in your web app.
Integration with Angular, React, and Vue.js#
DHTMLX Suite is compatible with any client-side framework. There are code examples of how to use DHTMLX widgets with Angular, React, and Vue.js available on our GitHub pages.
Integration with any backend technologies#
Being a fully client-side library, DHTMLX Suite can be used with any backend. There is an example of integrating DHTMLX Suite widgets with Node.js in our GitHub repository.
Touch support#
You can easily create responsive web applications using DHTMLX Suite due to built-in touch support. Check out how UI widgets work on touch devices in the Touch Support guide.
TypeScript support#
The Suite library is equipped with built-in type definitions allowing you to write clean code faster. Browse the TypeScript Support guide with code snippets to learn more.
Accessibility#
All DHTMLX widgets are created with accessible design in mind. DHTMLX sticks to WAI-ARIA principles. Widgets support keyboard navigation and can be easily adjusted to match high-contrast UI.
Release History#
The list of all DHTMLX Suite versions including maintenance, minor, and major releases is available in the “What’s new” section of the documentation. If you are using an older version of DHTMLX Suite than the current one, the migration guide will instruct you on the changes in the code.