< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

JavaScript Layout Library

An entirely customizable JavaScript Layout for creating user-friendly web interfaces on the fly. Part of the leading-edge Suite UI library.

Product Features

  • Cross-browser compatibility
  • Full control with JavaScript API
  • All-encompassing customization
  • Horizontal, vertical, and mixed layouts
  • Custom HTML content in cells
  • Ability to attach any DHTMLX components to cells
  • Cell headers with icons and images
  • Progress bar
  • Configurable size of cells
  • Collapsibility
  • Resizability
  • Ability to add and remove cells to/from a layout
  • Ability to hide and show cells
  • Ability to check the cell’s visibility
  • Accessibility support

How to Build a JavaScript Layout

Here are 5 quick steps to create a basic JavaScript layout with DHTMLX:
Create an HTML file
Include the layout js and css source files in the header
Add a container with an id - e.g. “layout_container”
Define the structure of a layout
Initialize the widget with the dhx.Layout object constructor

Why Choose DHTMLX Layout?

Easy arrangement of UI elements

dhtmlxLayout is a JavaScript component that provides a powerful and efficient way to build intuitive web interfaces with ease. This component allows you to programmatically define interface structure, including the layout of elements and their sizes. Thus, you can easily build horizontal, vertical, and mixed layouts.

Complete control with JavaScript API

Our JavaScript layout is highly configurable and adjustable to your requirements due to its rich API. You can add any HTML content to the cells of a layout as well as attach any DHTMLX components there. Besides, API methods enable you to add, remove, hide, and show cells and check their visibility on the fly. It’s also possible to make a layout collapsable and resizable.

Boundless customization opportunities

dhtmlxLayout allows you to build unique web interfaces and achieve the desired look and feel with ease. All layout cells can be customized via CSS. All you need to do is add new CSS classes with the appropriate settings and style the cells of your choice. Additionally, you can supply cells with headers together with custom icons and images.

Support for Angular, React, and Vue.js

Just like all DHTMLX components, our JavaScript layout can be smoothly integrated into web apps based on the three most preferred frameworks by developers: Angular, React, and Vue.js. You can evaluate the wrappers we’ve created for a straightforward integration during a free 30-day trial period.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components


File manager built with the help of Suite widgets: Layout, Grid, DataView, Toolbar, etc.

Try All UI Widgets for Free

All JavaScript UI widgets are part of the DHTMLX Suite library. You can download a free trial version and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 23 components

PRO features

Need help with dhtmlxLayout integration into your app? Contact us