<
Download

DHTMLX JavaScript Components

DHTMLX helps you develop enterprise web and mobile applications with fast performance
and rich UI using highly customizable JavaScript/HTML5 components.
Suite
Grid
Gantt
AI Chatbot
Scheduler
Booking Widget
Kanban
To Do List
Event Calendar
Diagram
Spreadsheet
Pivot
Vault
RichText
Suite UI library

JavaScript UI Components Library

DHTMLX Suite is a modular JavaScript UI toolkit designed to streamline the development of data-intensive web and mobile apps. It offers a comprehensive set of JavaScript/HTML5 components, including grids, charts, calendars, forms, windows, and more. These UI components are flexible building blocks you can use to build responsive, cross-browser interfaces with minimum coding effort.

The Suite UI library supports a clean drag-and-drop behavior, lazy loading, and data export to Excel, PDF, and PNG formats. Its material-based UI is highly configurable, enabling full control over widgets’ appearance. You are free to add custom CSS templates and themes without the need to rewrite components.

DHTMLX Suite is built with accessibility in mind, providing WAI-ARIA support and handy keyboard navigation, and ensures mobile compatibility through native touch support and responsive design principles. The UI library is supported by a well-documented API, multiple online samples, and demo templates to help developers implement complex user interfaces efficiently.

Show more
Check Suite
JS time picker with blue sliders for hours and minutes
JS calendar with a time picker and date selection
Dashboard sidebar with a list of menu items
JS colorpicker with HEX code and opacity
JS time picker with blue sliders for hours and minutes
JS calendar with a time picker and date selection
Dashboard sidebar with a list of menu items
JS colorpicker with HEX code and opacity
JS menu with a search field and avatar
JS ribbon with text edit controls and progress icon
Closable JS window with text and picture
JS tab widget with different tabs alignment
JS tree widget with a list of books and delete icons
JS form with a variety of input fields and controls
JS dataview with images and message icons
JS menu with a search field and avatar
JS ribbon with text edit controls and progress icon
Closable JS window with text and picture
JS tab widget with different tabs alignment
JS tree widget with a list of books and delete icons
JS form with a variety of input fields and controls
JS dataview with images and message icons
JS lists with books and people
JS dataview with animals
JS datatable with grouping by column header
Overlapping area chart in JavaScript
JS lists with books and people
JS dataview with animals
JS datatable with grouping by column header
Overlapping area chart in JavaScript
Compatible with:
Angular React Vue.js Svelte TypeScript
Check Suite

UI Widgets Included in DHTMLX Suite

Show other widgets
For Data Analysis

JavaScript Grid Widget

DHTMLX Grid is a high-performance datagrid widget for efficiently processing and managing large volumes of tabular data with ease.

Manage data with ease
Streamline data interaction with built-in features, including multi-column drag-and-drop, inline editing, sorting, filtering, and searching.
Handle big data effortlessly
Render 100,000+ rows in milliseconds in real time, thanks to dynamic data loading and virtual scrolling that ensure smooth, lag-free performance.
Export in one click
Export data to Excel, CSV, or PDF/PNG with built-in export modules.
Customize with simplicity
Take advantage of the Grid’s JavaScript API, comprehensive documentation, and a wide range of online samples to configure and integrate the component.
Show more
Check Grid
Compatible with
Angular React Vue.js Svelte TypeScript
Check Grid
For Project Management

JavaScript Gantt Chart

DHTMLX Gantt allows you to create and edit interactive project management diagrams, also known as Gantt charts. With DHTMLX Gantt, you can build a web-based replacement for project planning tools like MS Project.

Advanced resource management
Handle complex projects with 30,000+ tasks and planning scenarios with multiple resource allocation, critical path calculation, and auto-scheduling features.
Native React experience
Allows implementing a multi-featured Gantt chart in React projects. Comes with with Redux, TypeScript, and MUI support.
Developer-friendly integration
A feature-rich JavaScript API with step-by-step technical guides ensures quick integration and a fast learning process, speeding up development time.
Seamless data export
Export Gantt chart data to different formats, including Excel, PDF, PNG, MS Project, iCal, and Primavera P6.
Customize every detail
Apply built-in themes or add custom CSS variables to adapt the look and feel.
Show more
Check Gantt
Light Terrace Skin of DHTMLX Gantt
Dark Terrace Skin of DHTMLX Gantt
Compatible with
Angular React Vue.js Svelte Salesforce
Check Gantt
For Content Management

MIT-Licensed JavaScript
AI Chatbot Widget

Customizable JavaScript chatbot widget for crafting seamless user interfaces for AI support agents with any large language model (LLM).

Configurable UI
Easily configure the chatbot’s look by choosing from multiple chat patterns and setting the typewriter effect for more natural message rendering.
Works with any LLM system
DHTMLX Chatbot integrates smoothly with leading large language models, including ChatGPT, Claude 3, and Gemini.
Responsive and versatile
Designed for modern interfaces, the chatbot widget supports responsive layouts for all screen sizes and includes a read-only mode for static message viewing.
Check Chatbot
Dark Material Skin of DHTMLX Chatbot
Light Material Skin of DHTMLX Chatbot
Compatible with
OpenAI Claude 3 Gemini Lllama
Check Chatbot
For Project Management

Full-Featured JavaScript Scheduling Calendar

DHTMLX Scheduler offers web UI components for creating a rich and intuitive scheduling solution similar to Microsoft Outlook Calendar, Apple's iCal, or Google Calendar. There is also an ASP.NET version of the Scheduler.

Flexible calendar views
Supports widely-used event views, including Day, Week, and Month, as well as advanced options like Units and Timeline for resource-based scheduling.
Smart event handling
Allows managing recurring and multisection events. Built-in drag-and-drop functionality and keyboard navigation make interaction seamless and intuitive.
Fully customizable
A comprehensive JavaScript API gives you complete control over the Scheduler’s appearance. You can use predefined themes, style with custom CSS, and add HTML content in all Timeline modes.
Export and print support
Export Scheduler data to PDF, PNG, Excel, and iCal formats.
Show more
Check Scheduler
Compatible with
Angular React Vue.js Svelte Salesforce
Check Scheduler
Download a free 30-day trial version and build interactive web apps and interfaces
faster with ready-to-use JavaScript web components.
Get free trial
DHTMLX widgets: Gantt, Colorpicker, Grid, Timepicker DHTMLX widgets: Kanban, Diagram, Dashboard
For Project Management

JavaScript Availability
Booking Calendar

With DHTMLX Booking widget, you can build a user-friendly tool for booking appointments online with wide filtering options. It can be synchronized with DHTMLX Scheduler and Event Calendar components to create a custom booking system with minimum coding.

Intuitive UI for real-time bookings
The widget displays available time slots, supports a configurable reservation form, and allows end-users to select services with just a few clicks.
Rich filtering options
Create a user-friendly booking experience with filtering by date, time, and specific specialists. The widget comes with automatic filtering, which helps users find the right option quickly.
Customizable cards
Display relevant information in a fully flexible card layout, including an image preview, title, category, and price on the left side of the card.
Check Booking widget
Compatible with
Angular React Vue.js Svelte
Check Booking widget
For Project Management

JavaScript Kanban Board

DHTMLX Kanban is a feature-packed JavaScript components library for visually arranging workflows and handling tasks of your project in a clear way via fully customizable boards and cards.

Visualize and organize tasks
Display tasks across columns and swimlanes to represent stages. The component’s drag-and-drop UI allows end-users to assign teammates, set priorities, and manage deadlines.
Built to handle complex projects
DHTMLX Kanban delivers a smooth performance thanks to lazy rendering and column scrolling. It comes with an undo/redo feature, task duplicating, and thought-out keyboard navigation.
Rich feature set out-of-the-box
Set inline editing, multiselection, card grouping, commenting, and voting. The Kanban component is fully configurable via its JavaScript API, delivering total control over the layout and interactions.
Check Kanban
Light Skin of DHTMLX Kanban
Dark Skin of DHTMLX Kanban
Compatible with
Angular React Vue.js Svelte TypeScript
Check Kanban
For Project Management

JavaScript To Do List

DHTMLX To Do List complements our portfolio of HTML5 UI widgets with efficient task management functionality. It includes modifiable checklists, which can also be easily combined with DHTMLX Gantt to maximize the success of your project.

Create structured checklists
Easily organize tasks into projects and break them down into subtasks using a flexible parent-child hierarchy. Assign task owners, set priorities and due dates, and use tags for handy navigation.
Real-time collaboration made easy
With support for a multi-user backend, DHTMLX To Do List allows managing the same task list simultaneously and reflects any updates instantly in the UI without reloading the page.
Configurable look and feel
Use the To Do List API to set task behavior, select a desired format for the due date, configure the toolbar appearance, apply custom styling, and more.
Ready for modern web apps
The component is responsive, supports localization, and includes a read-only mode. Touch support ensures a smooth experience across all devices.
Show more
Check To Do List
Compatible with
Angular React Vue.js Svelte
Check To Do List
For Project Management

Lightweight JavaScript
Event Calendar

With DHTMLX Event Calendar, you can build an intuitive Google-like event calendar with a configurable timeline, editor, and sidebar.

Plan and organize events with ease
End-users can create overlay and multiday events, categorize them between calendars, and resize them via drag-n-drop.
Multiple calendar views
The component supports six default views - Day, Week, Month, Year, Agenda, and Timeline - as well as the ability to create custom views.
Easy to configure
DHTMLX Event Calendar includes configurable toolbar, timetable, editor, and sidebar with a compact datepicker and special controls for managing the predefined calendars.
Built-in styling
Apply built-in CSS themes or customize the appearance using CSS variables.
Show more
Check Event Calendar
Compatible with
Angular React Vue.js Svelte TypeScript
Check Event Calendar
For Data Analysis

JavaScript/HTML5 Diagram Library

DHTMLX Diagram comprises a set of customizable HTML5 UI components such as organization charts, flowcharts, decision trees, block diagrams, and mind maps, for building interactive diagramming solutions in web apps. Each diagram is built from configurable nodes and connectors, allowing users to clearly visualize corporate hierarchy structures, business processes, algorithms, family trees, and more.

Our JavaScript diagramming library comes with intuitive live editors that enable end-users to design and modify diagrams directly in the browser without writing any code, making it accessible for both developers and non-technical users.

Check Diagram
JS org chart with a company structure
Company Structure
A widespread type of org chart used to depict an organization's hierarchy. Users can add any number of partners and assistants.
JS hospital org chart with medical hierarchy
Hospital Org Chart
A custom hospital org chart illustrating the medical hierarchy, allowing users to reorganize departments via drag-and-drop.
JS family tree diagram with pictures
Family Tree Diagram
A template of a family tree diagram with multiple parents at the top level and custom shapes for highlighting relations.
JS network PERT chart for task visualization
Network PERT Chart
A PERT diagram is a visual project management tool that maps out and tracks tasks and timelines.
JS timeline diagram with events as branches
Timeline Diagram
A timeline diagram with a vertical line and shapes with events branching over it represent time progress from top to bottom.
JS task grid diagram with colorful cells
Task Grid Diagram
A grid-style diagram where tasks are sorted into cells within a grid. Each task shape is colored depending on task fulfillment.
JS wide flowchart for visualizing website user interactions
Wide Flowchart
A horizontal flowchart you can create to provide a detailed look into how users interact with a website.
JS activity diagram for a business plan
Activity Diagram
Useful for modeling any business process and outlining an action plan, thus serving as a handy tool to meet the organization's needs.
JS vertical decision tree for process visualization
Vertical Decision Tree
Apart from decision-making, a tree diagram can be used to show an application’s functionality or steps of any work process.
JS block diagram for data planning
Block Diagram
A block diagram example that describes a data planning model with rectangular blocks and connectors with notes.
JS network diagram with computers and databases
Network Diagram
A server network system that shows connections between various network objects like remote computers, databases, etc.
JS mind map with EARL emotion categories
Emotions Mind Map
Illustrates the emotion classification by EARL as a core topic surrounded by the branches of 48 emotions as subtopics.
JS PERT chart with a legend
PERT Chart with a Legend
A network PERT diagram example with a legend that includes task containers, dependency types, and colors of responsible teams.
JS PERT chart with swimlanes
PERT Chart with Swimlanes
An example of a PERT chart with swimlanes that are used to visually split the product development process.
JS swimlane diagram with nine sections
Swimlane with 9 Sections
A template you can use to represent any process, e.g. business and manufacturing, or its separate parts from start to finish.
JS swimlane diagram with five rows
Swimlane with 5 Rows
An example of using swimlanes to allocate game levels and locations. Each location is represented with a custom shape.
JS Eisenhower matrix for task management
Eisenhower Matrix
An effective task management tool used for organizing and prioritizing tasks by their urgency and importance.
JS Venn diagram with overlapping circles
Venn Diagram
The template consists of several round, colored shapes that partially overlap, making it easy to define commonalities and differences.
JS life cycle diagram with project stages
Life Cycle Diagram
A project's life period made with sticky notes for illustrating each project stage and arrows for determining the process flow.
Orthogonal arrangement with auto-layout in DHTMLX Diagram
Orthogonal Auto Layout
An orthogonal auto-layout algorithm enables users to arrange shapes along vertical and horizontal lines with just one click.
Radial arrangement with auto-layout in DHTMLX Diagram
Radial Auto Layout
A radial auto-layout algorithm that arranges shapes on imaginary circles around the central shape evenly separated from one another.
Spiral diagram with numerous loops
Spiral Diagram
A model that looks like a spiral with many loops and is used for providing systematic and iterative approaches.
Waterfall diagram with swimlanes
Waterfall
A waterfall diagram template allows breaking the process down into several steps and distributing them to get a broader perspective.
Grouped shapes showing virtual cloud architecture
Virtual Cloud Architecture
Visualization of a virtual private cloud architecture. End-users can manipulate elements united in groups as a whole.
JS UML class diagram for a development process
UML Class Diagram
Used widely by developers to build the model of a system together with all its classes and objects before the dev process starts.
DHTMLX Diagram of a site map with landing pages
Site Map
A user flow map with custom shapes visualizing a website with the main page as the root node and other pages as child nodes.
Compatible with:
Angular React Vue.js Svelte TypeScript
For Data Analysis

Web-Based Spreadsheet Solution

DHTMLX Spreadsheet is a framework-agnostic JavaScript solution that allows you to quickly add an editable Excel-like spreadsheet on a web page.

Work with data the smart way
Easily perform complex calculations using 170+ built-in math formulas and string, financial, and information functions compatible with Excel and Google Sheets.
Multi-sheet support and cross-referencing
Manage data across multiple sheets and use cross-referencing to link and analyze information efficiently within the workspace.
Excel data exporting
Add an option to export data from a spreadsheet into an Excel (.xlsx) file.
Customize every interaction
Enable sorting and cell validation, apply custom read-only mode, and add icons and toolbar buttons through a flexible JavaScript API.
Show more
Check Spreadsheet
Compatible with
Angular React Vue.js Svelte TypeScript
Check Spreadsheet
For Data Analysis

JavaScript Pivot Table

DHTMLX Pivot is a powerful addition to our HTML5 components library for working with big datasets and filtering and sorting data.

Analyze data effectively
Generate totals and display the results of various operations like counting, finding sums, minimum and maximum values, as well as any other custom operations automatically.
Choose the most convenient view
Display pivot data in a flat mode or tree structure for optimal readability and better data navigation.
Secure data export
Export pivot table results to Excel or CSV formats by using online export services or by purchasing a local export module.
Tailor the look to your needs
Configure column and row widths, enable auto-sizing to content, and apply read-only mode using the Pivot JavaScript API. Add custom cell markers and personalize the default theme with custom CSS.
Show more
Check Pivot
Compatible with
Angular React Vue.js Svelte Svelte
Check Pivot
For Content Management

JavaScript File Upload Component

DHTMLX Vault is a small HTML component library that helps you implement HTML5-based file uploading functionality for your web app or website.

Upload and manage files
Vault allows downloading and manipulating multiple files, canceling the upload, and implementing file validation. It supports drag-and-drop and both auto and manual upload modes.
Preview and organize files your way
Choose between grid and list views, enable file and image previews, and sort or filter uploaded files in the list.
Tailor the component to your project
Customize the layout, toolbar, and progress bar, add custom icons to files, and use built-in themes. The Vault’s API allows you to localize text labels and apply keyboard navigation to enhance usability.
Check Vault
Compatible with
Angular React Vue.js Svelte TypeScript
Check Vault
For Content Management

JavaScript Rich Text Editor

DHTMLX RichText is a rich text editor for working with formatted content in modern web apps. It can be easily integrated with our HTML5 component library.

Write and edit texts
Supports both HTML and Markdown formats for input and output, giving you full control over how content is created.
Provide all essential editing options
Perform a wide range of formatting operations, including basic text styling and structured content editing.
Display statistics
Built-in support for advanced and custom statistics allows end-users to track character counts and other custom metrics in real time.
Customizable UI
DHTMLX RichText uses the Material-based icons by default. You can easily configure the toolbar by adding pre-built controls and custom icons.
Show more
Check RichText
Compatible with
Angular React Vue.js
Check RichText

Frequently Asked Questions

What is DHTMLX, and how does it help developers?

DHTMLX is a collection of JavaScript web components for building powerful Gantt charts, schedulers and event calendars, Kanban boards, checklists, diagrams, data grids, and more. Thanks to their rich out-of-the-box functionality, flexible customization, high performance, and comprehensive documentation, DHTMLX components help developers create modern, data-intensive applications quickly and with minimal coding effort.

Which JavaScript frameworks does DHTMLX support?

DHTMLX supports integration with major JavaScript frameworks, including React, Angular, Svelte, and Vue.js. We provide technical guides, code examples, and demos on GitHub to help developers easily embed web components into these frameworks. This flexibility allows DHTMLX to be used in modern development stacks. Check out the list of available integrations.

Can I try DHTMLX web components before purchasing?

Yes, you can try DHTMLX web UI components before purchasing. We offer free trials for all our products, completed with online demos and code samples. This allows you to explore the features and test integration with your project before purchasing a license.

Is DHTMLX suitable for enterprises or startups?

DHTMLX is suitable for both enterprises and startups. We’ve developed enterprise-grade JavaScript UI components with high performance, scalability, cross-browser support, and advanced features, making them ideal for complex business apps. Besides, their modular structure and detailed documentation make them accessible for startups building MVPs. Our flexible licensing options also help accommodate different team sizes and budgets. We also provide a special Startup license for early-stage startups.

How does DHTMLX compare to other JavaScript UI libraries?

DHTMLX stands out from other JavaScript UI libraries due to the robust Gantt chart, Scheduler, Grid, Diagram, and other web components providing rich, enterprise-grade functionality out of the box. Unlike many component libraries focused mostly on general-purpose widgets, DHTMLX emphasizes project management and data-heavy interfaces, with highly customizable and performance-optimized tools. We also provide comprehensive documentation, long-term technical support, and flexible framework integration (React, Angular, Vue), making DHTMLX a strong choice for complex web apps.

Is DHTMLX free to use?

DHTMLX offers both free and paid licensing options:

  • Open-source (GPL v2.0) licenses: Certain DHTMLX components, including Gantt, Scheduler, and Suite Standard Editions, are available under the GPL v2.0 license. This license permits free use in open-source projects that are also GPL-compatible. However, these versions lack PRO features and official technical support, though community support is accessible via forums.
  • Commercial licenses: For proprietary or commercial applications, DHTMLX provides PRO editions of its web components with advanced features and professional technical assistance. These licenses are available for purchase and are suitable for businesses requiring extended functionality and support.
  • 30-day free trial: We offer a 30-day free trial of our PRO components, allowing developers to evaluate full-featured versions with access to official technical support.
How do I install and start using DHTMLX in my project?

To start using DHTMLX, first choose and download the desired web component from our official website or install it via NPM. Initialize the component in your HTML or JavaScript file using the documented API. Please, refer to the documentation to get a step-by-step installation guide. If you're using a framework like React, Angular, or Vue, we provide integration guides to help you get started smoothly.

Do you provide technical support?

Yes, we provide technical support for our users with a commercial license or a 30-day trial. Support includes help with integration, troubleshooting, and using PRO features. We also offer different support plans, such as Standard, Premium, and Ultimate, depending on your license. For GPL v2.0 license users, support is available through community forums and documentation.

Want to speed up your project development?
Download a free 30-day trial version and build interactive web apps and interfaces faster with ready-to-use JavaScript web components.
Get free trial
Download DHTMLX JS widgets trial version