What’s New in Syncfusion^® React UI Components

Common

New components

• The Inline AI Assist component has been added to React.
• The Sankey Diagram component has been added to React.

Production-ready component

The below component has been developed to meet industry standards and are now marked as production-ready for React:

• Block Editor: The Block Editor is a modern, block-based content editing solution for web applications. It provides an intuitive and flexible interface for creating rich, structured documents using interactive content blocks.

Inline AI Assist (preview)

The Inline AI Assist is a versatile, integrated AI-powered assistant component for modern web applications. It enables users to prompt AI services and receive intelligent responses directly within their interface, with flexible display modes and extensive customization options.

This component supports both inline and pop-up response modes, command-driven interactions, and streaming responses, providing a seamless experience for AI-assisted content generation and editing. Whether for code completion, content suggestions, or interactive assistance, it delivers powerful AI integration with minimal friction.

Key Features

• Dual response modes: Display AI responses inline at the cursor position or in a pop-up overlay for flexible UI integration.
• Command actions: Display predefined commands and quick-action suggestions via mention-style popups with customizable grouping and icons.
• Response actions: Configurable actions such as (accept, discard, custom items) for managing and acting on AI-generated content.
• Action toolbar: The toolbar in the prompt input area with the send button and other custom actions.
• Markdown: Automatic conversion of Markdown responses to HTML for rich content rendering.
• Streaming responses: Support for word-by-word or chunk-based streaming of AI responses with real-time visual feedback and stop controls.
• Indicators: Visual indicators showing thinking or editing states during AI processing in the inline mode and skeleton loading in the popup mode.
• Customization: Allows customizing the default appearance, including responses, to suit users’ needs.

Sankey Diagram (Preview)

Introducing the new Sankey Diagram component, a powerful flow‑visualization tool designed to represent the movement, distribution, and relationships between entities in a system. Ideal for illustrating energy transfers, material flows, cost breakdowns, user journeys, and process workflows, the Sankey Diagram uses nodes and weighted links to make complex systems visually intuitive and easy to analyze.

Key features

• Customizable nodes: Define the major stages or entities in your system with configurable node shapes, sizes, and styles, serving as the core anchors of your flow visualization.

• Weighted links: Visualize the magnitude of flow between nodes using proportional link widths. Larger flows appear prominently, helping users identify dominant pathways at a glance.

• Smart labels: Add clarity with contextual labels for nodes and links. Customizable label styling helps communicate information effectively without cluttering the visual.

• Descriptive titles: Enhance comprehension with chart titles and subtitles, allowing you to communicate the purpose or story behind the flow data.

• Interactive experience: Built‑in interaction features, including tooltips, hover effects, and legend highlighting, create a dynamic exploration environment for end users.

• Customizable legends: Use legends to display node categories, color mappings, or additional contextual information for more meaningful visual interpretation.

• Responsive and adaptive: The diagram adapts fluidly to various screen sizes and layouts, offering a consistent experience across desktops, tablets, and mobile devices.

• Flexible layouts: Choose between horizontal and vertical flow orientations to best match your data presentation needs and storytelling style.

• Export and print: Export visualizations to PNG, JPEG, SVG, or PDF, or print directly for reports, dashboards, or presentations.

Explore the demo: Sankey Diagram

Pure React

Common

New components

The DateTimePicker, DateRangePicker, Autocomplete, ComboBox, MultiSelect, ListView, Animation and Drag & Drop components have been added to the Pure React component suite. These components are implemented entirely using React functional components and hooks, ensuring smooth integration within the React ecosystem.

React Data Grid

Virtualization

The Data Grid introduces powerful enhancements, including virtualization to efficiently render large datasets with smooth scrolling and reduced memory usage. Try the demo.

DOM virtualization

Improves performance with large datasets by rendering only the visible DOM elements and recycling them during scrolling. This approach minimizes memory usage and layout overhead, ensuring smooth interaction even with millions of rows. Try the demo.

Excel mode filter

Provides a familiar spreadsheet-style filtering experience with quick search, sort, and advanced filter capabilities. Try the demo.

Checkbox mode filter

Provides intuitive multiselect filtering for categorical values by checking or unchecking items from a predefined list. Try the demo.

React Scheduler

Recurring events

Easily schedule events that repeat on a daily, weekly, monthly, or yearly basis. Whether it’s a daily stand-up, a weekly team sync, or an annual review, the Scheduler handles it all out-of-the-box.

Try the demo.

Recurrence editor UI

An interactive recurrence editor lets users build and preview complex patterns (nth weekday, multi-day spans) that map directly to the Scheduler’s recurrence model for advanced repeating-event configuration.

Try the demo.

Editor and quick pop-up customization

Custom editor and quick pop-up templates accept React components or JSX so apps can add fields, richer layouts, or embedded controls while the Scheduler continues to manage CRUD and life-cycle events.

Try the demo.

Editor field validation

Editor field validation supports required fields, complex cross-field checks, and server-side validation hooks. Validation logic can live inside template components and be enforced via Scheduler save callbacks.

Try the demo.

Header bar customization

Header customization exposes template hooks to replace or enhance the title, date navigator, view selector, and toolbar, allowing injection of navigation controls, filters, or custom UI while preserving accessibility and keyboard navigation.

Try the demo.

Event tooltip integration

Tooltip templates allow lightweight rich content (HTML or React) such as summaries, avatars, or progress indicators to be displayed. For heavier content, use lazy loading to maintain tooltip performance.

Try the demo.

Context menu integration

Context menus (right-click or tap-and-hold) provide contextual actions on cells and appointments—create, edit, delete—and integrate with the Syncfusion Context Menu component for desktop and mobile.

Try the demo.

AI AssistView

Speech to text conversion in the input text area

The React AI AssistView component integrates speech-to-text conversion, allowing users to compose messages using voice input. This accessibility feature expands input options and streamlines workflows for users who prefer voice-based interaction or require hands-free input capabilities.

Markdown and streaming

The React AI AssistView component now supports real-time markdown-to-HTML conversion with configurable streaming properties. This feature enables developers to render rich-formatted content (including code blocks, tables, and styled text) as responses are generated, providing a more responsive and polished chat experience for end users.

Scroll to the bottom

The React AI AssistView component includes a built-in scroll button that automatically appears when large message content requires vertical scrolling. The button enables users to quickly navigate to the latest response without manual scrolling, improving the user experience in chat-based interfaces with extensive conversation history.

Block Editor

Table column resizing

Users can adjust column widths of a table directly within the React Block Editor. This enhancement improves table usability and enables users to create flexible content layouts with better control over the structure and presentation.

Server image upload with enhanced UI

The image block has been enhanced with server-side image upload capabilities and an improved user interface. The updates include options for embedding external image URLs, a progress bar to display upload status, and streamlined file handling, providing users with image insertion and clear feedback during the upload process.

Inline formatting and block transformation

The React Block Editor component includes an inline toolbar that provides quick access to formatting options including code styling, hyperlinks, and block type transformation. This toolbar enables developers to create rich editing experiences that let users seamlessly convert block types, add inline links, and apply code formatting without disrupting the editing flow.

Charts

Series label support

Series-level labels can now be displayed directly on charts with configurable position and appearance options. This feature enhances chart readability and data clarity by enabling developers to annotate series without relying on separate legend elements. Labels support customization for alignment, formatting, and visibility control per series.

Demo: Line series

Legend templates

The Charts component supports custom legend item templates, enabling developers to render custom HTML content for each legend entry. Custom templates are configured through the template property in legendSettings, allowing icons, formatted text, styled indicators, and other HTML elements to be displayed in place of default legend items.

The template customization is applied per series, enabling consistent visual treatment across multiple series. This feature is fully backward compatible and does not introduce breaking changes to existing legend rendering behavior.

Demo: Chart legend templates

Linear and radial gradients

Linear and radial gradient rendering is now supported across chart elements, including series, legend items, markers, tooltip markers, trend lines, and indicators. Gradients can be configured per series or element for fine-grained visual styling without requiring custom drawing code. This feature enhances visual hierarchy and data distinction in complex charts through built-in gradient definitions.

Demo: Linear and radial gradients

Accumulation charts

Legend templates

The accumulation charts support custom legend item templates, enabling developers to render custom content for each legend entry. Template customization is configured through the template property in legendSettings, providing pie, doughnut, pyramid, and other accumulation chart types with improved readability and branding control.

Demo: Accumulation chart with legend templates

Linear and radial gradients

Linear and radial gradient rendering is now supported in accumulation charts, applicable to series, legend items, markers, tooltip markers, and individual data points. Gradient styling can be configured per element to create visually distinct presentations without requiring custom rendering or external styling frameworks.

Demo: Accumulation chart with linear and radial gradients

Stock Chart

Legend templates

The Stock Chart component supports custom legend item templates, enabling developers to render custom content for legend entries. Template customization is configured through the template property in legendSettings, supporting icon-based legends, descriptive labels for indicators, series annotations, and other custom content within the legend area.

Linear and radial gradients

Linear and radial gradient rendering is supported in the Stock Chart component, applicable to series, legend items, range navigator elements, trend lines, and indicators. Gradient definitions enhance visual contrast and range highlighting without custom rendering logic, enabling developers to create visually distinct financial chart presentations.

Diagram

Collaborative editing

This feature enables multiple users to edit the same diagram in real time while keeping all views synchronized. Each change is instantly reflected in all users’ views, ensuring a consistent state without requiring page refreshes.

Visio file format (.vsdx)

This feature enables the parsing and rendering of a Visio diagram (.vsdx) within the Syncfusion^® diagram canvas, as well as the modification and subsequent serialization of diagram content back into the Visio format (.vsdx). The implementation provides limited Visio compatibility, focusing on core elements such as nodes (basic shapes, flow shapes and group), connectors, ports, and annotations. Try the demo.

Gantt Chart

Predecessor offset validation

Predecessor offsets are now validated during load time in addition to CRUD operations. This enhancement ensures dependency chains reflect the correct offset values from the initial load, providing more accurate scheduling without manual recalculation.

Timeline view range

The visible timeline range can now be set independently of project scheduling dates, allowing the view to be expanded or restricted for focused planning and tracking. Try the demo.

Data Grid

Seamless virtual scrolling

The Data Grid’s virtual scrolling has been upgraded to deliver a smooth, lag-free experience. Rows and columns continue to render only when visible in the viewport, but transitions remain fluid even during rapid navigation. Try the demo.

Pivot Table

Enhanced engine‑based PDF export

The Pivot Table has major improvements to the engine‑based PDF export feature, offering better customization, more accurate layouts, and a more consistent exporting experience. The key features are:

Multiple Pivot Table exporting

Multiple Pivot Tables can be exported into a single PDF file by listing their IDs in the export settings. The two layout options are:

• Same page: All Pivot Tables are placed on a single PDF page, with an option to add blank space between them.
• New page: Each Pivot Table is placed on its own PDF page.

This feature helps create combined or comparative reports within a single document.

Template‑based exporting

Pivot Tables can be exported with additional elements, such as hyperlinks and images, enabling richer, template‑driven PDF layouts.

UI‑replicated exporting

A Pivot Table exported to PDF now closely matches the on‑screen version, including its:

• Cell background colors
• Font styles and colors
• Row heights
• Visual appearance

Advanced styling options

PDF cell styles can be customized using theming, conditional formatting, and export events such as pdfQueryCellInfo and pdfHeaderQueryCellInfo.

Headers and footers

Headers and footers can include branding details, metadata, time stamps, or report titles. These additions help present important information clearly in the exported PDF.

Custom aggregates and date formats

Custom formulas and localized date formats ensure accurate data representation in exported documents.

Cell and row spanning

Merged cells are preserved during PDF export, improving layout accuracy in complex Pivot Table structures.

Custom data source binding

Pivot values can be modified programmatically before exporting, enabling dynamic or scenario‑based report generation.

Rich Text Editor

Table cell properties

The Rich Text Editor supports table cell properties including width, height, cell padding, background color, vertical and horizontal alignment, border width, style, and color. These properties can be applied through the quick toolbar.

View the Table cell properties demo

Table, row, and column selection

Table, row, and column selection can be performed by clicking selection icons that appear on hover. This improves table editing operations in larger documents.

View the Table row column selection demo

Image wrap

Images inserted into editor content support text wrapping modes (left wrap, right wrap). These image wrap options can be applied using the quick toolbar.

View the Image wrap demo

Multiple image paste

Multiple images can be pasted or dropped simultaneously from the local file browser, accelerating content creation by inserting many images at once.

View the Multiple image paste demo

Tree Grid

Seamless virtual scrolling

The Tree Grid’s virtual scrolling has been upgraded to deliver a smooth, lag-free experience. Rows and columns continue to render only when visible in the viewport, but transitions remain fluid even during rapid navigation. Try the demo.