JavaScript Layout Library

Name: JavaScript Layout for Easy Arrangement of UI Elements - dhtmlxLayout
Rating: 4.8 (34 reviews)

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

Download

View more demos

Compatible with:

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

To learn more check documentation

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: