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. " } }, { "@type": "Question", "name": "How do I install and start using DHTMLX in my project?", "acceptedAnswer": { "@type": "Answer", "text": "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." } }, { "@type": "Question", "name": "Do you provide technical support?", "acceptedAnswer": { "@type": "Answer", "text": "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." } } ] }
  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

  Diagram

  Scheduler

  Booking Widget

  Kanban

  To Do List

  Event Calendar

  AI Chatbot

  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

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  Compatible with:

  Angular React Vue.js Svelte TypeScript

  Check Suite

  UI Widgets Included in DHTMLX Suite

  Calendar

  Chart

  ColorPicker

  ComboBox

  DataView

  DatePicker

  Form

  Grid

  Layout

  List

  Menu

  Message

  Pagination

  Popup

  Ribbon

  Sidebar

  Slider

  Tabbar

  TimePicker

  Toolbar

  Tree

  Window

  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

  

  

  Compatible with

  Angular React Vue.js Svelte Salesforce

  Check Gantt

  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

  

  Company Structure

  A widespread type of org chart used to depict an organization's hierarchy. Users can add any number of partners and assistants.

  

  Hospital Org Chart

  A custom hospital org chart illustrating the medical hierarchy, allowing users to reorganize departments via drag-and-drop.

  

  Gantt Chart with PERT Diagram

  A PERT chart integration with DHTMLX Gantt via a common dataset and synchronized task and link management.

  

  Family Tree Diagram

  A template of a family tree diagram with multiple parents at the top level and custom shapes for highlighting relations.

  

  Timeline Diagram

  A timeline diagram with a vertical line and shapes with events branching over it represent time progress from top to bottom.

  

  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.

  

  PERT Chart

  A PERT diagram that organizes tasks into logical stages, highlighting estimated durations and dependency flow.

  

  Wide Flowchart

  A horizontal flowchart you can create to provide a detailed look into how users interact with a website.

  

  Fishbone with Multiple Causes

  A fishbone diagram (Ishikawa) that maps out multiple contributing factors to a problem, organized by priority level.

  

  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.

  

  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.

  

  Block Diagram

  A block diagram example that describes a data planning model with rectangular blocks and connectors with notes.

  

  Network Diagram

  A server network system that shows connections between various network objects like remote computers, databases, etc.

  

  Emotions Mind Map

  Illustrates the emotion classification by EARL as a core topic surrounded by the branches of 48 emotions as subtopics.

  

  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.

  

  Swimlane with 5 Rows

  An example of using swimlanes to allocate game levels and locations. Each location is represented with a custom shape.

  

  Eisenhower Matrix

  An effective task management tool used for organizing and prioritizing tasks by their urgency and importance.

  

  Venn Diagram

  The template consists of several round, colored shapes that partially overlap, making it easy to define commonalities and differences.

  

  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 Auto Layout

  An orthogonal auto-layout algorithm enables users to arrange shapes along vertical and horizontal lines with just one click.

  

  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

  A model that looks like a spiral with many loops and is used for providing systematic and iterative approaches.

  

  Waterfall

  A waterfall diagram template allows breaking the process down into several steps and distributing them to get a broader perspective.

  

  Virtual Cloud Architecture

  Visualization of a virtual private cloud architecture. End-users can manipulate elements united in groups as a whole.

  

  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.

  

  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 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

  

  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

  

  

  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 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

  

  

  Compatible with

  OpenAI Claude 3 Gemini Lllama

  Check Chatbot

  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