What’s New in Syncfusion Essential JS 2: 2023 Volume 2
Tags: development, ui, web, javascript
Published: 2023-07-11 14:34:06

---
title: What’s New in Syncfusion Essential JS 2: 2023 Volume 2
published: true
date: 2023-07-11 12:54:26 UTC
tags: development, ui, web, javascript
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-essential-js-2.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhskbmfnd86p4kjvxlly.png
---
Syncfusion [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls "Essential JS 2 UI components"), a comprehensive collection of UI controls for building modern web applications, has released its highly anticipated [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") update. This release brings exciting new features and enhancements for various components.

We’ll explore them in this blog post!

## Material 3 theme

To keep up with the latest design trends, Syncfusion Essential JS 2 now includes Material 3 theme support. This theme has both light and dark variants and has been applied to all UI controls. With the Material 3 theme, your web apps will look modern and visually appealing.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Material-3-theme-support-for-Essential-JS-2-components-1.png" alt="Material 3 theme support for Essential JS 2 components" style="width:100%">

  <figcaption>Material 3 theme support for Essential JS 2 components</figcaption>

</figure>

## Production-ready components

The following components have been developed to meet industry standards and are now production-ready:

- [Image Editor](https://www.syncfusion.com/javascript-ui-controls/js-image-editor "JavaScript Image Editor Control"): With this control, users can effortlessly edit and manipulate images, enjoying a seamless editing experience. For more details, refer to its [demos](https://ej2.syncfusion.com/demos/#/material3/image-editor/default.html "JavaScript Image Editor live demo").
- [Skeleton](https://www.syncfusion.com/javascript-ui-controls/js-skeleton "JavaScript Skeleton control"): Skeleton is designed to enhance the user experience by presenting placeholder content while the actual content is loaded. For more details, explore its [demos](https://ej2.syncfusion.com/demos/#/material3/skeleton/default.html "JavaScript Skeleton control live demo").

## Carousel component

The [Carousel component](https://www.syncfusion.com/javascript-ui-controls/js-carousel "JavaScript Carousel Component") has received significant enhancements in this release, making it more user-friendly. The new features include:

- **Swipe and drag slides** : Users can now change slides in the Carousel using swipe or drag gestures. This improvement enhances the usability of the component on mobile devices such as phones and tablets.
- **Indicator customization** : The Carousel now offers indicator customization options, such as dynamic, progressive, and fraction indicators. Users can choose the indicator style that best fits their app’s needs. For more details, try viewing our [demos](https://ej2.syncfusion.com/demos/#/material3/carousel/indicator-type.html "JavaScript Carousel live demo").

## Charts

The [Charts](https://www.syncfusion.com/javascript-ui-controls/js-charts "JavaScript Charts") component has also received several new features and improvements:

- **Title position** : Users can now position the chart title to the left, right, or bottom, providing more flexibility in chart customization.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-Charts-title-position-1.png" alt="Customizing the Charts title position" style="width:100%">

  <figcaption>Customizing the Charts title position</figcaption>

</figure>

- **Pareto line customization** : The Pareto chart axis and the line can now be customized with options like marker, width, dash array, and color. This allows users to create visually appealing and informative Pareto charts. For more details, check out the [demos](https://ej2.syncfusion.com/demos/#/material3/chart/pareto.html "JavaScript Pareto Chart live demo").  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Pareto-line-customization-in-Charts-component-1.png" alt="Pareto line customization in Charts component" style="width:100%">

  <figcaption>Pareto line customization in Charts component</figcaption>

</figure>

- **Cross marker** : The Charts component now supports a cross-shaped marker to highlight important data points. Thus, it’s easier for users to interpret the chart.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Cross-marker-in-Charts-component-1.png" alt="Cross marker in Charts component" style="width:100%">

  <figcaption>Cross marker in Charts component</figcaption>

</figure>

- **Scroll bar customization** : Users can customize the axis scroll bar by changing its color and height. Additionally, they can now disable zooming in the scrollbar, giving users more control over chart interactions.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Scrollbar-customization-in-Charts-component-1.png" alt="Scrollbar customization in Charts component" style="width:100%">

  <figcaption>Scrollbar customization in Charts component</figcaption>

</figure>

- **Zoom toolbar** : Now, you can see a zoom toolbar with zoom-in and zoom-out options on the initial loading of the Charts component.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Zoom-toolbar-in-Charts-component.png" alt="Zoom toolbar in Charts component" style="width:100%">

  <figcaption>Zoom toolbar in Charts component</figcaption>

</figure>

## Data manager persistence support

This feature improves the synchronization of the components bound through the data manager by persistently storing data processing within a single component. This helps maintain data consistency and integrity within the app.

## Full-screen view in date selection components

The [DatePicker](https://www.syncfusion.com/javascript-ui-controls/js-datepicker "JavaScript DatePicker"), [DateRangePicker](https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker "JavaScript DateRangePicker"), and [DateTime Picker](https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker "JavaScript DateTime Picker") components have received full-screen view support for mobile devices.

Users can now view and select dates from a full-screen calendar interface on mobile devices. This enhancement improves the usability of apps that heavily rely on date selection, providing a more intuitive and immersive experience.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Full-screen-view-support-for-date-selection-components.gif" alt="Full-screen view support for date selection components" style="width:100%">

  <figcaption>Full-screen view support for date selection components</figcaption>

</figure>

## Vertical layout in Diagram component

The [Diagram](https://www.syncfusion.com/javascript-ui-controls/js-diagram "JavaScript Diagram Library") component now supports vertical orientation for mind maps. Users can create mind maps vertically and arrange the tree branches from top to bottom. This feature offers a new perspective for visualizing hierarchical data and enhances the flexibility of the Diagram component.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Vertical-layout-support-for-mind-maps-in-Diagram-component-1.png" alt="Vertical layout support for mind maps in Diagram component" style="width:100%">

  <figcaption>Vertical layout support for mind maps in Diagram component</figcaption>

</figure>

## Word Processor

We have rolled out the following new features for the [Word Processor](https://www.syncfusion.com/javascript-ui-controls/js-word-processor "JavaScript Word Processor") component:

- **Character spacing and scaling** : Users can now customize the appearance of the text in a document by adjusting the character spacing and scaling. This feature allows users to increase or decrease the space between characters and scale the text size, making it easier to read and save space.
- **Link to previous header or footer** : Users can now link or unlink the header and footer of the previous section to the current section in a text document. This can be useful if you want to create a consistent look across your document or if you want to create different headers and footers for each section in the document.
- **Alternate text for images** : In text documents, users can now include alternative text (alt text) for images. Alt text is critical for ensuring accessibility, allowing visually impaired users to comprehend the document’s content.  
  By providing alt text, individuals utilizing screen readers or other assistive technologies can clearly understand the images within the document. For more details, explore the control’s [demos](https://ej2.syncfusion.com/demos/#/material3/document-editor/default.html "JavaScript DocumentEditor live demo").

## Improved taskbar editing in Gantt Chart

The [Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart "JavaScript Gantt Chart") component has received a significant user interface enhancement related to taskbar resizing and moving. When you resize or move a taskbar by dragging it, a virtual element will be displayed until the toolbar is dropped. This improvement gives users a visual representation of the changes they make to the toolbar, allowing for more precise editing and an enhanced overall user experience. For more details, refer to the control [demos](https://ej2.syncfusion.com/demos/#/material3/gantt/editing.html "JavaScript Gantt Chart live demo").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/UI-improvement-in-taskbar-editing-of-Gantt-Chart.gif" alt="UI improvement in taskbar editing of Gantt Chart" style="width:100%">

  <figcaption>UI improvement in taskbar editing of Gantt Chart</figcaption>

</figure>

## DataGrid

The new features added to the [DataGrid component](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript DataGrid") are as follows:

- **Preserve expand or collapse state** : This feature helps maintain the current expand or collapse state of the grouped rows even when manipulating the grid’s data. Only the affected rows are refreshed by implementing the partial row refresh, reducing unnecessary data processing and improving the overall grid performance.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Preserving-the-expand-or-collapse-state-of-grouped-rows-in-DataGrid-component.gif" alt="Preserving the expand or collapse state of grouped rows in DataGrid component" style="width:100%">

  <figcaption>Preserving the expand or collapse state of grouped rows in DataGrid component</figcaption>

</figure>

- **Row drag and drop with grouping** : Users can now rearrange rows organized into groups using the drag-and-drop functionality. This enhancement provides a seamless way to reorder rows within grouped sections of a grid.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Dragging-and-dropping-grouped-rows-in-DataGrid.gif" alt="Dragging and dropping grouped rows in DataGrid" style="width:100%">

  <figcaption>Dragging and dropping grouped rows in DataGrid</figcaption>

</figure>

- **Responsive pager** : The pager component in the DataGrid is now responsive. As the user adjusts the browser window size, the pager dynamically adjusts its display to ensure an optimal viewing experience. The page numbers may appear or disappear based on the available space, providing a responsive and user-friendly interface.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Responsive-pager-in-DataGrid-component.gif" alt="Responsive pager in DataGrid component" style="width:100%">

  <figcaption>Responsive pager in DataGrid component</figcaption>

</figure>

## Image Editor

The [Image Editor](https://www.syncfusion.com/javascript-ui-controls/js-image-editor "JavaScript Image Editor") component has received the following new exciting updates:

- **Quick access toolbar support** : While selecting annotations like rectangles, ellipses, lines, arrows, text, or freehand drawings, a toolbar with quick-access options will be displayed. Using it, you can easily clone, delete, or edit text annotations.
- **Path support** : You can create, modify, and manipulate custom shapes within an image using paths. Paths are editable curves with anchor points connected by control handles, providing precise control over object boundaries.
- **Arrow support** : Users can now draw and customize arrows with precision. Create, modify, and customize arrows according to user preferences. Arrows effectively highlight objects or draw attention to specific details, making the image more impactful and engaging.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Enhancements-in-Image-Editor-component.png" alt="Enhancements in Image Editor component" style="width:100%">

  <figcaption>Enhancements in Image Editor component</figcaption>

</figure>

## Virtual scrolling in Kanban

The virtual scrolling support in the [Kanban component](https://www.syncfusion.com/javascript-ui-controls/js-kanban-board "JavaScript Kanban Board") includes dynamic loading for on-demand data retrieval, smooth scrolling animations, adaptive rendering for different devices, customization options for scroll behavior and appearance, accessibility improvements for screen readers, and overall performance optimizations. These updates significantly enhance the usability, speed, and accessibility of the Kanban board, enabling users to navigate through large amounts of data effortlessly. For more details, refer to the component [demos](https://ej2.syncfusion.com/demos/#/material3/kanban/virtual-scrolling.html "JavaScript Kanban live demo").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Virtual-scrolling-support-in-the-Kanban-component.gif" alt="Virtual scrolling support in the Kanban component" style="width:100%">

  <figcaption>Virtual scrolling support in the Kanban component</figcaption>

</figure>

## Server-side Excel export in Pivot Table

In addition to the server-side engine support, the [Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table "JavaScript Pivot Table") now supports server-side export. This new feature allows users to export pivot table data to Excel or CSV files directly from the server. Thus, productivity is enhanced by eliminating the need for client-side data processing.

## Rich Text Editor

The [Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-wysiwyg-rich-text-editor "JavaScript Rich Text Editor") component now includes two handy features to enhance text formatting and content expression:

- **Format painter** : The format painter tool allows users to copy and apply formatting to different text sections quickly. Users can transfer font styles, colors, and other formatting attributes to other areas with a single click, saving valuable time and streamlining the workflow. For more details, refer to the control [demos](https://ej2.syncfusion.com/demos/#/material3/rich-text-editor/format-painter.html "JavaScript Rich Text Editor Format Painter live demo").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Format-painter-in-Rich-Text-Editor.gif" alt="Format painter in Rich Text Editor" style="width:100%">

  <figcaption>Format painter in Rich Text Editor</figcaption>

</figure>

- **Emoji picker** : Users can now easily insert emoji into their content using the emoji picker in the Rich Text Editor. With a wide range of emoji available, users can browse or search for the desired emoji and insert it into their text with a simple click. Additionally, users can instantly access the emoji picker by pressing the colon (:) key in the editor, making the process even more convenient. For more details, find the [demos here](https://ej2.syncfusion.com/demos/#/material3/rich-text-editor/insert-emoticons.html "JavaScript Rich Text Editor Insert Emoticons live demo").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Emoji-picker-in-Rich-Text-Editor.png" alt="Emoji picker in Rich Text Editor" style="width:100%">

  <figcaption>Emoji picker in Rich Text Editor</figcaption>

</figure>

## Recurrence editor customization in Scheduler

The [Scheduler](https://www.syncfusion.com/javascript-ui-controls/js-scheduler "JavaScript Scheduler") component now allows users to set end dates for recurring events. Users can choose **until** , **ends**  **on** , or **never** options for the end date for recurring events.

## Reversible Range Slider

The [Range Slider](https://www.syncfusion.com/javascript-ui-controls/js-range-slider "JavaScript Range Slider") now supports displaying the slide range in reverse order, e.g., from 100 to 1. This feature enables users to set a maximum value that is less than the minimum value, expanding the flexibility of the Range Slider. This feature is available for all range and numeric sliders.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Reversible-Range-Slider.png" alt="Reversible Range Slider" style="width:100%">

  <figcaption>Reversible Range Slider</figcaption>

</figure>

## Improved tooltip positioning in Stock Chart

The [Stock Chart](https://www.syncfusion.com/javascript-ui-controls/js-stock-chart "JavaScript Stock Chart") component now lets you enable tooltips to move along with the mouse as it is being moved. This enhancement improves the user experience by ensuring the tooltip stays close to the mouse pointer, making it easier to view and analyze data in a chart.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Improved-tooltip-positioning-in-Stock-Chart-1.gif" alt="Improved tooltip positioning in Stock Chart" style="width:100%">

  <figcaption>Improved tooltip positioning in Stock Chart</figcaption>

</figure>

## Conclusion

Thanks for reading! In this article, we’ve highlighted the latest enhancements and additions in the [Syncfusion Essential JS 2](https://www.syncfusion.com/javascript-ui-controls "Syncfusion Essential JS 2") platform for the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release. We encourage you to try these user-friendly updates and provide your valuable feedback in the comments below.

To discover more about the features available in this release, please visit our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v22.1.34 "Essential Studio Release Notes") and [What’s New pages](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New page").

You can access the new version of Essential Studio from the [License and Downloads page](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") if you are an existing customer. For those who are not yet customers, we offer a 30-day [free trial](https://www.syncfusion.com/downloads "Get the free evaluation of the Essential Studio products") so you can experience the full range of available features.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums/ "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Responsive Web Design Evolved: Introducing CSS Container Queries](https://www.syncfusion.com/blogs/post/css-container-queries.aspx "Blog: Responsive Web Design Evolved: Introducing CSS Container Queries")
- [5 Front-End Web Frameworks to Consider Other Than React](https://www.syncfusion.com/blogs/post/5-front-end-web-frameworks-other-than-react.aspx "Blog: 5 Front-End Web Frameworks to Consider Other Than React")
- [Create an Interactive BPMN Viewer and Editor Using the JavaScript Diagram Control](https://www.syncfusion.com/blogs/post/bpmn-viewer-and-editor-using-javascript-diagram-control.aspx "Blog: Create an Interactive BPMN Viewer and Editor Using the JavaScript Diagram Control")
- [Top 8 JavaScript Libraries for Data Visualization in 2023](https://www.syncfusion.com/blogs/post/top-8-javascript-data-visualization-libraries-in-2023.aspx "Blog: Top 8 JavaScript Libraries for Data Visualization in 2023")