What’s New in Syncfusion^® Vue UI Components

Common

New components

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

Production-ready component

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

• 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

AI AssistView

Speech to text conversion in the input text area

The Vue 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 Vue 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 Vue 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 Vue 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 Vue 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.

Chat UI

File attachments in conversations

The Chat UI component now supports sending, receiving, previewing, and downloading file attachments within chat conversations. Common file types for images, documents, PDFs, and videos are displayed as message bubbles with thumbnails for quick identification. This feature improves real-time collaboration, enables faster knowledge sharing, and streamlines workflows for scenarios like customer support, team communication, and field reporting.

Highlights:

• Compatible with major file formats including JPG, PNG, PDF, DOCX, and MP4.
• Inline previews for images.
• Secure download options for all attachments.

Find the demo link here.

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.

File Manager

Template for large icons view

The template enables customization of how files and folders render in the large icons view. It receives the item context (such as name, type, size, and modified date) so users can display thumbnails, badges, or additional metadata, and wire actions like quick menus or previews. This is useful for media libraries, document portals, and scenarios that benefit from rich visual presentation of items.

Find the demo link here.

Sequential upload

This feature ensures that files and folders are uploaded one at a time, rather than simultaneously. Sequential upload helps manage bandwidth efficiently and provides a predictable upload order, which is essential for workflows that require controlled file processing or server-side validation.

Find the demo link here.

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.

Inputs

### Add adornments to input fields

The Vue Input components—TextBox, Numeric TextBox, Input Mask, and TextArea—support prefix and suffix adornments. These adornments enable the integration of icons, buttons, labels, or custom elements directly within the input boundaries. Users can attach events to adornments for actions, such as clearing content, toggling formats, or displaying validation indicators. This support is compatible with existing themes and floating labels, introducing no breaking changes. Prerequisites include setting up the standard component via the npm installation. Adornments enhance form usability in applications like user registration (e.g., country code prefixes in Input Mask), financial interfaces (e.g., currency symbols in Numeric TextBox), and content editors (e.g., character counters in TextArea). Positioning adapts to component-specific elements, such as spin buttons or resizable areas, ensuring consistent behavior across devices.

Explore demos:
Vue TextBox Adornments | Vue Numeric TextBox Adornments |
Vue Input Mask Adornments | Vue TextArea Adornments.

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

The exported PDF now closely matches the on‑screen Pivot Table, including:

• 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.