What’s New in Essential JS 2: 2024 Volume 3
Detailed Blog page Skeleton loader
What’s New in Essential JS 2: 2024 Volume 3

TL;DR: Syncfusion Essential JS 2 has ground-breaking AI-powered smart components and features! The release also brings exciting visual and functional improvements to Charts, DateTime Picker, and more. Plus, production-ready components like MultiColumn ComboBox and OTP Input are now at your fingertips!

We at Syncfusion are glad to introduce the new AI-powered components and advanced UI enhancement features in the 2024 Volume 3 release. These updates are designed to improve your development workflow, adding new layers of functionality, customization, and performance improvements.

Let’s explore them in brief!

New Smart AI components

In this 2024 volume 3 release, we’ve introduced the following new smart components in preview mode:

Smart Paste Button (Preview)

The Smart Paste Button is an AI-driven component that improves data entry, especially for forms, by seamlessly pulling data from the clipboard and populating fields.

Key features

  • Clipboard integration: Automatically fetches data from the clipboard.
  • Smart parsing: Interprets and formats the data to fit the form fields.
  • Autofill capability: Populates multiple fields simultaneously, saving time and reducing manual input errors.

Refer to the following image.

Smart Paste Button Control
Smart Paste Button component

Smart TextArea (Preview)

The Smart TextArea is an advanced input area that offers context-aware autocomplete suggestions using AI and is designed to enhance productivity.

Key features

  • Intelligent autocomplete for full sentence completions.
  • Customizable to adapt to specific needs.
  • Seamless integration with JavaScript apps.

Refer to the following image.

Smart TextArea component
Smart TextArea component

AI AssistView (Preview)

The AI AssistView is a user-friendly interface for incorporating AI services, with toolbars, prompt suggestions, and customizable views.

Key features

  • Built-in toolbar for interacting with prompts.
  • Customizable views and prompt suggestions.

Refer to the following image.

AI AssistView component
AI AssistView component

Production-ready components

The following components meet the industry standards and are now marked as production-ready.

  • MultiColumn ComboBox offers a multi-column dropdown with data binding, filtering, and virtualization for large datasets. It also supports customizable templates for headers, footers, and list items.
  • OTP Input is a component for entering one-time passwords. It supports single-character inputs per field and offers customization options like input length, styling, placeholders, and separators for a smooth user experience.

Theme and style enhancements

Fluent 2 high contrast theme

All Syncfusion JavaScript UI components now fully support Microsoft’s Fluent 2 high-contrast design, offering an accessible, sleek, modern look.

Refer to the following image.

Fluent 2 High Contrast Theme in Essential JS 2
Fluent 2 high contrast theme in Essential JS 2

Bootstrap 5.3 upgrade

The Bootstrap 5.3 theme upgrade enhances all Syncfusion JavaScript controls with better styling options and responsive behavior.

Refer to the following image.

Bootstrap 5.3 theme upgrade in Essential JS 2
Bootstrap 5.3 theme upgrade in Essential JS 2

What’s new in existing Essential JS 2 components?

Let’s explore the new user-friendly features added to the existing Essential JS 2 components:

Charts 

We’ve made several updates to improve the visual appeal and usability of our Charts components:

  • Smooth animations: Experience fluid transitions when zooming, panning, or sorting chart data.
    Smooth animations in Charts
     
  • Rounded corners: New styling options for rounded edges on pie, donut, pyramid, and funnel charts.
    Rounded corners in Donut Charts
     
  • Stepline without risers: You can now disable risers in stepline charts, offering more customization.
    Stepline without risers in Charts
     

DateTime Picker

The DateTime Picker component has been enhanced to support time range selection, which is ideal for use cases like appointment booking where only specific hours of the day are available for scheduling.

Refer to the following image.

Time range selection feature in DateTime Picker
Time range selection feature in DateTime Picker

Diagram 

The Diagram Library now supports:

  • Flowchart automatic layout: Automatically organize your diagram elements for a cleaner, more efficient presentation.
    Flowchart automatic layout in JavaScript Diagram
     
  • Mermaid syntax for import/export: Generate or import flowcharts and mind map diagrams using Mermaid syntax, making sharing and editing diagrams across platforms easier.

Barcode component

The QR Code Generator can embed logos or images in the center of QR codes, enhancing branding without compromising the QR code’s scannability. You can also customize logo size and placement for seamless integration.

Refer to the following image.

Logo support in QR Code Generator
Logo support in QR Code Generator

Rich Text Editor

The Rich Text Editor has gained the following powerful new features, making content creation smoother:

  • Slash menu: Easily apply formatting or execute commands by typing “/” within the editor.
    Slash menu feature in Rich Text Editor
     
  • Inline code: Highlight snippets, commands, or keywords for quick reference.
    Inline code feature in Rich Text Editor
     
  • Import/export: Effortlessly export content to PDF or Word or import Word documents for editing within the editor.
    Import/Export feature in Rich Text Editor
     

Image Editor

The new features in the Image Editor component are as follows:

  • Redact support: Blur or pixelate sensitive information in images to ensure privacy and data security.
    Redact support in Image Editor
     
  • Text annotation enhancements: Customize annotations with fill color, outline color, and outline width, enhancing the visual appeal of your edits.
    Text annotation enhancements in Image Editor
     
  • Rectangle annotation: Now supports customizable border radius for both rounded and sharp corner annotations.
    Rectangle annotation enhancements in Image Editor
     

File Manager

The File Manager now supports range selection, allowing users to select multiple files or folders by dragging over them. This mirrors the intuitive functionality of the Windows File Explorer.

Refer to the following image.

Range selection feature in File Manager
Range selection feature in File Manager

Gantt Chart

The Gantt Chart now supports touch interaction for zooming, enabling pinch-to-zoom gestures for easier navigation on touch devices.

DataGrid

To enhance mobile responsiveness, DataGrid now includes an adaptive layout option, ensuring optimal display on smaller screens while maintaining functionality on desktops.

Word Processor

The Word Processor delivers the following features:

  • XML mapped content controls: Automate document updates with XML data mapping.
  • Shape support: Preserve shapes in Word documents, like flowcharts, arrows, and stars.

PDF Viewer

We’ve made significant performance improvements in the PDF Viewer component:

  • Faster loading: Large PDFs now load faster thanks to the improved handling of Base64 strings.
  • Search enhancements: Search for multiple words with the Match Any Word feature and view search result counts alongside the current search index.

Refer to the following image.

Search enhancements in PDF Viewer
Search enhancements in PDF Viewer

Conclusion

Thanks for reading! This article highlights the exciting new features and components added to the Syncfusion Essential JS 2 platforms for the 2024 Volume 3 release. To discover more about the features available in this release, please visit our Release Notes and What’s New pages.

The latest version of Essential Studio is available for current customers from the License and Downloads page. If you are not a Syncfusion customer, you can start a 30-day free trial to try out all these components.

If you have any questions, contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Be the first to get updates

Sumankumar G

Meet the Author

Sumankumar G

SumanKumar is a Technical Product Manager at Syncfusion for Web products. He is passionate about Web technology and has been active in development since 2010.