Forem: Lucy Muturi

Angular Spreadsheet Freezing on Large Excel Imports? Here’s the Fix

Lucy Muturi — Fri, 17 Apr 2026 12:10:31 +0000

TL;DR: Large Excel imports in Angular Spreadsheet freeze the UI because synchronous XLSX parsing (styles, formats, objects) blocks the main thread. Optimize imports by disabling style/format parsing, enforcing server-side cell and file size thresholds, and using openFromJson with selective deserialization for predictable performance and lower memory usage.

Have you ever uploaded an Excel file and watched your web app freeze instantly? It happens more often when users try to import Excel files in Angular. A large workbook can easily slow down the browser, trigger memory spikes, or get stuck while reading the file, making the entire page feel unresponsive.

Most Angular apps freeze during large Excel imports because the browser tries to parse every cell, style, formula, and object on the main thread. This leads to long pauses, high memory usage, and unpredictable “page unresponsive” errors.

Syncfusion^® Angular Spreadsheet Editor avoids these issues by loading only what’s necessary, enforcing file size and data limits, and allowing large workbooks to open quickly via lightweight JSON loading rather than full XLSX parsing.

In this blog, you’ll learn three specific techniques to fix this:

Skip heavy formatting using IgnoreStyle and IgnoreFormat.
Prevent server overload using MaximumDataLimit and MaximumFileSize.
Load large workbooks faster using openFromJson with selective deserialization.

Let’s dive deeper into these techniques that make large Excel imports fast and reliable.

Why large Excel imports silently break web apps

Large Excel files don’t just “take longer.” They often trigger a chain reaction that feels like a crash:

The page freezes because parsing blocks the UI thread.
Memory jumps due to styles, formats, images, and workbook metadata.
Imports time out on slower machines or remote environments.
Users get no actionable error, just a stuck screen or killed tab.

This is especially common in enterprise scenarios where “normal” spreadsheets contain hundreds of thousands of cells plus formatting rules, validations, and embedded objects.

How Syncfusion Angular Spreadsheet eliminates large file import failures

Many apps fail because they load everything at once. Syncfusion Angular Spreadsheet Editor is designed to avoid that pattern by letting you:

Load only what you need (data vs. styling/features)
Enforce thresholds before a file overwhelms the system
Open workbooks from lightweight JSON for faster startup

Angular Spreadsheet with Styles and Formatting

Curious to see the Angular Spreadsheet in action? Explore the live demo.

Parsing options: Load only what you need

Most Excel imports fail not because of data volume alone, but because of formatting overhead. Styles, number formats, and empty-cell metadata dramatically increase parsing cost, even when your app only needs raw values.

Syncfusion solves this with WorkbookParseOptions. By enabling IgnoreStyle and IgnoreFormat properties on the server, the spreadsheet loads only raw data, skipping the formatting overhead entirely.

Here is a server-side example:

public IActionResult Open(IFormCollection openRequest) 
{
    OpenRequest open = new OpenRequest();
    ...
    // Enable parsing options to skip styles and formats for faster loading
    open.ParseOptions = new WorkbookParseOptions()
    { 
        IgnoreStyle = true, 
        IgnoreFormat = true
    }; 
    ...
    // Process and return the parsed workbook data
    return Content(Workbook.Open(open)); 
}

By disabling style and format parsing:

Only raw cell values are processed
JSON payload size is reduced
Memory usage drops significantly
Import time improves immediately

Note: These options are ideal when styles and number formats aren’t important for your use case, and the goal is to load the Excel data as quickly as possible.

What you gain

Faster file loading
Lower memory usage
Smaller JSON payloads sent to the client

This is ideal for “data pipeline” imports where formatting is irrelevant (finance exports, HR records, inventory loads).

Threshold limits: Stop the file before it crashes the app

Large Excel files don’t just overload the browser; they can spike server memory too. Without a safety check, a single oversized upload can silently degrade your entire application’s performance.

Syncfusion’s threshold limits give you a clear control point. You can define:

MaximumDataLimit: The maximum number of cells allowed.
MaximumFileSize: The maximum file size in bytes.

What happens when a limit is exceeded

An alert message appears: The file is large.
Cancel stops the import cleanly
OK continues (only if your app logic permits it)

This single check prevents crashes, timeouts, and memory overloads caused by unexpectedly large uploads, and gives users clarity rather than confusion.

You can configure the thresholds API on the server side using the following code example:

public IActionResult Open(IFormCollection openRequest)
{
    OpenRequest open = new OpenRequest();
    open.File = openRequest.Files[0];
    open.Guid = openRequest["Guid"];

    // Set maximum allowed number of cells
    open.ThresholdLimit.MaximumDataLimit = 1000000; // 1,000,000 cells

    // Set maximum allowed file size in bytes (e.g., 5MB)
    open.ThresholdLimit.MaximumFileSize = 5000000;

    var openbook = Content(Workbook.Open(open));
    return openbook;
}

The above code example enforces a safety gate before parsing becomes expensive, protecting both the user experience and backend stability.

File size warning in Angular Spreadsheet

JSON serialization: Parse once, open instantly

Parsing a full XLSX file on every file open is expensive. If the workbook includes charts, images, conditional formatting, or complex styles, that overhead adds up fast.

Syncfusion Angular Spreadsheet solves this with JSON serialization options. These let you exclude specific features, such as styles, formats, charts, images, wrap, and more, from the Workbook JSON object when opening it via the openFromJson method.

Why JSON-based loading is faster

Using openFromJson, you can:

Avoid repeated XLSX parsing
Exclude features your app doesn’t need
Reduce JSON size and processing time
Improve load speed for large or complex workbooks

Syncfusion also supports selective deserialization. You can choose exactly which parts of the JSON to ignore during loading. Previously, openFromJson always loaded every element: styles, formulas, conditional formatting, charts, images, validations, and Notes. Now you control that explicitly.

Client-side example:

// Load workbook JSON — ignore styles for faster rendering of the spreadsheet
.openFromJson(
    { file: fileJson },
    { ignoreStyle: true }
);

This gives you fine-grained control over the loading process, exactly what you need when you import large Excel files in Angular apps with complex structures.

Want to know more details about these techniques? Explore the full Angular Spreadsheet documentation.

Configuring Syncfusion Angular Spreadsheet for large file imports

Here’s how to integrate the Syncfusion Spreadsheet into your Angular app from scratch.

Step 1: Install Angular CLI

You can use Angular CLI to set up your Angular applications. To install Angular CLI, use the following command:

Bash

npm install -g @angular/cli

Step 2: Create a new Angular application

You can create a new Angular application using the following Angular CLI command:

Bash

ng new my-app

Choose your preferred stylesheet format (CSS/SCSS) and SSR options when prompted.

For more details, refer to the blog post at Syncfusion.com

.NET MAUI State Management: From ViewModels to App Stores

Lucy Muturi — Thu, 16 Apr 2026 13:46:15 +0000

TL;DR: Start with MVVM and data binding for page-level state, apply Visual State Manager for visual-only changes, and rely on DI-backed app-wide stores for shared state. For highly interactive or complex flows, MVU or reducer-style unidirectional updates offer better predictability.

State is the backbone of every .NET MAUI application. It determines what users see, how the UI reacts to interactions, and how consistently data flows across screens. Whether it’s the text inside an Entry, the enabled state of a button, or the user session shared across pages, effective state management ensures your UI remains predictable, testable, and easy to maintain.

.NET MAUI does not enforce a single state management solution. Instead, it provides flexible building blocks that allow you to choose the right approach based on your app’s complexity. This article walks through the most practical and production-ready ways to manage state in .NET MAUI, from simple ViewModel state to shared app-wide stores, and helps you decide when to use each.

Why state management in MAUI matters

In real apps, state stops being “just a couple of properties” fast:

Authentication affects navigation, headers, API calls, and cached data.
Offline support introduces queues and retry logic.
Multiple pages need the same data (profile, cart, preferences).
Background sync and push notifications mutate state while the user is elsewhere.
Multi-window scenarios need a shared but safe global state.

If state changes can happen anywhere, debugging becomes guesswork. The goal is not a perfect architecture; it’s predictable updates and a UI that stays consistent.

Recommended state management approaches in .NET MAUI

Most real-world MAUI apps rely on a combination of the following patterns:

MVVM with data binding for page-level and feature-level state.
MVU-style updates for predictable, unidirectional state transitions.
Visual State Manager (VSM) for purely visual UI changes.
Dependency Injection (DI) for shared and app-wide state.

Rather than treating these as competing patterns, think of them as complementary tools. The key is applying each one where it fits best.

MVVM + INotifyPropertyChanged: The foundation

MVVM (Model-View-ViewModel) is the most widely used pattern in .NET MAUI and forms the foundation of state management for most applications.

In MVVM:

The View defines the UI using XAML.
The ViewModel holds the state and exposes it through bindable properties.
The Model represents your domain or business data.

The View never directly manipulates state. Instead, it binds to ViewModel properties. When the ViewModel changes, the UI updates automatically through data binding.

Here’s the example MVVM implementation:

ViewModel.cs

public class ViewModel : INotifyPropertyChanged
{
    private string name;
    public string Name
    {
        get => name;
        set
        {
            if (name != value)
            {
                name = value;
                OnPropertyChanged();
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

MainPage.xaml

<Label Text="{Binding Name}" FontSize="20" />

MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new ViewModel { Name = "Maui" };
    }
}

When to use:

Forms, lists, and CRUD screens
Input validation and command-based interactions
Navigation flows and page-level logic

MVVM is ideal when you want strong separation of concerns, easy unit testing, and straightforward data binding.

MVVM architecture flow in .NET MAUI

MVU (Model-View-Update): Predictable state flow

MVU introduces a functional, unidirectional approach to state management. Instead of mutating properties across different objects, MVU treats state as an immutable model that changes only through explicit updates.

The flow looks like this:

Model → View → Message → Update → Model

Model represents the entire state snapshot.
View renders UI based solely on the model.
Update receives user actions or events messages and returns a new model.

Example

public record AppModel(int Count);
public enum Msg { Increment }

public static AppModel Update(AppModel model, Msg msg) =>
    msg == Msg.Increment ? model with { Count = model.Count + 1 } : model;

Because all state changes occur in a single Update function, MVU delivers predictable behavior and prevents unintended state mutations. It works best for UIs with complex, interdependent interactions.

When to use

Highly interactive screens
Complex workflows with many dependent UI updates
Scenarios where unidirectional data flow is preferred

MVU is less common than MVVM in MAUI, but it shines in advanced use cases and pairs well with frameworks like Comet or MauiReactor.

MVU architecture flow in .NET MAUI

Visual State Manager (VSM): Declarative UI states

Visual State Manager (VSM) is designed specifically for visual changes, not business logic. It allows you to define named visual states, such as Normal, Pressed, or Selected, and let VSM handle the transitions.

The View (XAML) declares VisualStateGroups and individual VisualStates, each containing the appearance rules for that state.
State changes are triggered through bindings, behaviors, or code.

Instead of manually toggling properties across controls, you switch visual states and let VSM handle the transitions. This keeps your UI logic organized, consistent, and easy to maintain.

Example:

XAML

<ContentView>
    <BoxView x:Name="box"
             WidthRequest="120"
             HeightRequest="120" />
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="SelectionStates">
            <VisualState Name="Normal">
                <VisualState.Setters>
                    <Setter TargetName="box"
                            Property="BackgroundColor"
                            Value="LightGray" />
                </VisualState.Setters>
            </VisualState>
            <VisualState Name="Selected">
                <VisualState.Setters>
                    <Setter TargetName="box"
                            Property="BackgroundColor"
                            Value="LightBlue" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ContentView>

When to use

Visual feedback such as selection, focus, or disabled states.
Simple animations or appearance changes.
Keeping UI logic declarative and XAML-focused.

Avoid placing business logic inside visual state transitions.

Visual State Manager flow in .NET MAUI

For more details, refer to the blog post at Syncfusion.com

.NET MAUI ListView vs CollectionView: How Syncfusion ListView Performs Better

Lucy Muturi — Thu, 16 Apr 2026 12:16:44 +0000

TL;DR: Many .NET MAUI lists falter under real-world demands. This comparison reveals how Syncfusion .NET MAUI ListView confidently manages grouping, gestures, infinite scroll, and large data, delivering smoother scrolling, fewer allocations, and less glue code than CollectionView.

When CollectionView hits its limits, here’s the ListView built for real apps

If you’ve built more than a demo app with .NET MAUI, you’ve probably hit this point:

“The list worked great—until we added more features.”

The .NET MAUI CollectionView is a solid starting point, but it starts to show strain as an app grows.

Add grouped data, sticky headers, swipe actions, drag‑and‑drop, or infinite scrolling, and CollectionView often turns into a web of event handlers, state management, and performance trade‑offs. The result is familiar: more code to maintain, tougher debugging, and a list of experiences that feel sluggish on real devices.

Syncfusion^® .NET MAUI ListView takes a different approach.

Instead of making you piece together common list behaviors, it delivers them out of the box using built‑in properties, MVVM‑friendly commands, and a virtualization engine designed for large datasets. The payoff is immediate: cleaner code, smoother scrolling, and significantly lower memory usage.

This post compares both controls using the same real‑world scenario and shows where Syncfusion .NET MAUI ListView saves time, code, and memory.

How Syncfusion .NET MAUI ListView outshines Collection View

When comparing these two controls, the Syncfusion .NET MAUI ListView stands out with built‑in features that reduce extra code and deliver smoother performance:

Grouping with sticky headers: Pins the current group header at the top while scrolling.
Swipe actions: Reveals quick actions by swiping left or right on an item.
Drag-and-drop reorder: Users can reorder items by dragging them.
Incremental loading: Loads the page on demand for faster, lighter lists.
Layout choices: Switches between list and grid presentations to fit the content.
Item sizing and virtualization: Uses fixed or measured row heights to keep scrolling smooth.

Syncfusion .NET MAUI ListView vs .NET MAUI CollectionView: Real feature comparison

To keep this comparison honest, we are going to test both controls using the same MVVM book list, no shortcuts, no artificial demos. Each section answers the kinds of questions developers actually run into when building production apps:

How much effort does sticky grouping really take?
How quickly does swipe support get messy?
What breaks when you add drag‑and‑drop reordering?
And what happens to memory usage as the list grows?

Along the way, you’ll see where Syncfusion ListView handles these scenarios with built‑in properties and templates, and where Collection View requires extra event wiring, state tracking, and custom logic.

Instead of theory or feature checklists, this walkthrough shows real code, real UI behavior, and real performance numbers, so you can decide which control fits your feature needs and performance goals based on facts rather than assumptions.

1. Grouping with sticky headers

To see the difference clearly, let’s compare how each control handles this feature:

a) Syncfusion .NET MAUI ListView

Sticky headers are a built-in feature in Syncfusion .NET MAUI ListView. As you scroll, the current group title stays pinned at the top, so users always know where they are. A single setting enables it, and grouping by the first letter feels effortless.

Here’s the code you need:

XAML

<listView:SfListView x:Name="listView"
                      ItemsSource="{Binding BookInfo}"
                      IsStickyGroupHeader="True">

    <listView:SfListView.GroupHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#F2F2F2" Padding="8,4">
                <Label Text="{Binding Key}" VerticalTextAlignment="Center" FontAttributes="Bold" />
            </Grid>
        </DataTemplate>
    </listView:SfListView.GroupHeaderTemplate>
</listView:SfListView>

// Group items by the first character of BookName (uppercase).
listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
{
    PropertyName = "BookName",
    KeySelector = (object obj1) =>
    {
        var item = (obj1 as BookInfo);
        return item.BookName[0].ToString();
    }
});

b) .NET MAUI CollectionView

You need to manage sticky headers manually. On every scroll, you recalculate which group is visible and update the header. It works but requires extra housekeeping.

Refer to the following code.

XAML

<Grid RowDefinitions="Auto,*">
    <Border BackgroundColor="#F2F2F2" Padding="8,4">
        <Label Text="{Binding CurrentGroupName}" FontAttributes="Bold"/>
    </Border>

    <CollectionView x:Name="List"
                    Grid.Row="1"
                    ItemsSource="{Binding BookGroups}"
                    IsGrouped="True"
                    SelectionMode="Multiple"
                    ItemSizingStrategy="MeasureFirstItem"
                    Scrolled="OnCollectionViewScrolled">
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <Grid BackgroundColor="#f2f2f2" Padding="12">
                    <Label Text="{Binding Name}" FontAttributes="Bold" />
                </Grid>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
    </CollectionView>
</Grid>

Loaded += OnLoaded;

private void OnLoaded(object sender, EventArgs e)
{
    UpdateCurrentGroupHeader();
}

private void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    UpdateCurrentGroupHeader(e.FirstVisibleItemIndex);
}

private void UpdateCurrentGroupHeader(int firstVisibleIndex = 0)
{
    if (Vm == null || Vm.BookGroups == null || Vm.BookGroups.Count == 0)
        return;

    var index = firstVisibleIndex < 0 ? 0 : firstVisibleIndex;

    // Map to group by flattening groups until we cover firstVisibleIndex
    int cursor = 0;
    foreach (var group in Vm.BookGroups)
    {
        int groupCount = group.Count;
        if (index < cursor + groupCount)
        {
            Vm.CurrentGroupName = group.Name;
            return;
        }
        cursor += groupCount;
    }

    // Fallback
    Vm.CurrentGroupName = Vm.BookGroups[0].Name;
}

2. Swipe actions

Both controls support swipe gestures, but the way they implement and simplify quick actions differs significantly:

a) Syncfusion .NET MAUI ListView

Swipe gestures reveal sleek, ready-to-use actions like Favorite and Delete. Templates keep the UI consistent, and commands bind directly to your ViewModel. The experience feels native across platforms.

Refer to the following code example.

XAML

<listView:SfListView x:Name="listView"
                      ItemsSource="{Binding BookInfo}"
                      AllowSwiping="True">

    <listView:SfListView.StartSwipeTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#E8F5E9" Padding="12">
                <Button Text="Favourite"
                        FontSize="12"
                        Padding="10"
                        TextColor="White"
                        BackgroundColor="#2E7032"/>
            </Grid>
        </DataTemplate>
    </listView:SfListView.StartSwipeTemplate>

    <listView:SfListView.EndSwipeTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#FFEBEE" Padding="12">
                <Button Text="Delete"
                        TextColor="White"
                        BackgroundColor="#C62828"
                        Command="{Binding BindingContext.DeleteCommand, Source={x:Reference listView}}"
                        CommandParameter="{Binding .}"/>
            </Grid>
        </DataTemplate>
    </listView:SfListView.EndSwipeTemplate>
</listView:SfListView>

b) .NET MAUI CollectionView

You wrap each item in a Swipe View and define left/right actions yourself. Flexible, but repetitive, more template code for the same result.

Here’s how to implement this feature:

XAML

<CollectionView ItemsSource="{Binding BookInfo}">
  <CollectionView.ItemTemplate>
    <DataTemplate>
      <SwipeView>
        <SwipeView.LeftItems>
          <SwipeItems Mode="Reveal">
            <SwipeItem Text="Fav" BackgroundColor="#FFE08A"
                       Command="{Binding FavoriteCommand}" CommandParameter="{Binding .}"/>
          </SwipeItems>
        </SwipeView.LeftItems>
        <SwipeView.RightItems>
          <SwipeItems Mode="Reveal">
            <SwipeItem Text="Delete" BackgroundColor="#FFCDD2"
                       Command="{Binding DeleteCommand}" CommandParameter="{Binding .}"/>
          </SwipeItems>
        </SwipeView.RightItems>
        <Grid Padding="12,8"><Label Text="{Binding BookName}"/></Grid>
      </SwipeView>
    </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

3. Drag-and-drop reordering

This feature shows a clear difference in how each control handles item movement and user interaction:

a) Syncfusion .NET MAUI ListView

Reordering is built in. You can press, drag, and release; items move exactly where expected without juggling gestures or indexes, as shown in the code below.

XAML

<listView:SfListView x:Name="listView"
                      ItemsSource="{Binding BookInfo}"
                      DragStartMode="OnHold">

b) .NET MAUI CollectionView

You wire up drag/drop events, manage indices, and refresh grouping after reordering. Powerful, but more moving parts.

Here’s how you can do it in code:

XAML

<CollectionView x:Name="List"
                Grid.Row="1"
                ItemsSource="{Binding BookGroups}"
                IsGrouped="True"
                SelectionMode="Multiple"
                ItemSizingStrategy="MeasureFirstItem"
                Scrolled="OnCollectionViewScrolled">

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <SwipeView>
                <Grid Padding="12" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*" HeightRequest="70">
                    <Grid.GestureRecognizers>
                        <DropGestureRecognizer AllowDrop="True" DragOver="OnDragOver" Drop="OnDrop" />
                    </Grid.GestureRecognizers>

                    <!-- Drag handle icon -->
                    <Label Grid.RowSpan="2" Grid.Column="0" VerticalOptions="Center" Margin="0,0,8,0" Text="≡≡" FontSize="18" Opacity="0.6">
                        <Label.GestureRecognizers>
                            <DragGestureRecognizer CanDrag="True" DragStarting="OnDragStarting" DropCompleted="OnDropCompleted" />
                        </Label.GestureRecognizers>
                    </Label>

                    <Label Text="{Binding BookName}" Grid.Row="0" Grid.Column="1" FontAttributes="Bold" />
                    <Label Text="{Binding BookDescription}" Grid.Row="1" Grid.Column="1" Opacity="0.7" />
                </Grid>
            </SwipeView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

private void OnDragStarting(object sender, DragStartingEventArgs e)
{
    if (sender is Element element && element.BindingContext is BookInfo item)
    {
        e.Data.Properties["item"] = item;
    }
}

private void OnDrop(object sender, DropEventArgs e)
{
    if (Vm == null) return;
    if (!e.Data.Properties.TryGetValue("item", out var payload) || payload is not BookInfo source)
        return;

    if (sender is Element element && element.BindingContext is BookInfo target && !ReferenceEquals(source, target))
    {
        var list = Vm.BookInfo;
        var sourceIndex = list.IndexOf(source);
        var targetIndex = list.IndexOf(target);
        if (sourceIndex >= 0 && targetIndex >= 0)
        {
            // Normalize target index when removing earlier item affects index
            if (sourceIndex < targetIndex)
                targetIndex--;

            list.RemoveAt(sourceIndex);
            list.Insert(targetIndex, source);
            // Update stable order indices and rebuild grouping to reflect new order in the UI
            Vm.ReindexOrders();
            Vm.RefreshGroups();
        }
    }
}

4. Incremental loading

Handling large datasets highlights how each control approaches infinite scrolling and data fetch efficiency:

a) Syncfusion .NET MAUI ListView

Infinite scrolling is simple. The control fetches more items as you near the end, with a built-in busy indicator. A single command controls when and how much to load.

Refer to the following code examples for feature implementation.

XAML

<listView:SfListView x:Name="listView"
                      ItemsSource="{Binding BookInfo}"
                      LoadMoreOption="Manual"
                      LoadMorePosition="End"
                      LoadMoreCommand="{Binding LoadMoreItemsCommand}"
                      LoadMoreCommandParameter="{Binding Source={x:Reference listView}}">

public ICommand LoadMoreItemsCommand { get; }

LoadMoreItemsCommand =
    new Command<object>(LoadMoreItems, CanLoadMoreItems);

private bool CanLoadMore() => BookInfo.Count < totalItems;

private bool CanLoadMoreItems(object obj) => CanLoadMore() && !IsLoading;

private async void LoadMoreItems(object obj)
{
    if (!CanLoadMore() || IsLoading)
    {
        return;
    }
    else
    {
        listView.IsLazyLoading = true;
        await Task.Delay(2000);
        listView.IsLazyLoading = false;
    }

    AddBooks(currentIndex, PageSize);
    currentIndex += PageSize;
}

b) .NET MAUI CollectionView

You implement a “ Load More ” footer and spinner, track remaining items, and manage progress state. Clear and explicit, but heavier on logic.

Here’s the code you need for quick implementation:

XAML

<CollectionView x:Name="List"
                 ItemsSource="{Binding BookGroups}">

    <!-- Manual Load More footer to mirror List View's LoadMoreOption=Manual at End -->
    <CollectionView.Footer>
        <Grid Padding="12" BackgroundColor="Transparent" HorizontalOptions="Center" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto">
            <Button Text="Load More"
                    Grid.Row="0" Grid.ColumnSpan="2"
                    HorizontalOptions="Center"
                    IsEnabled="{Binding HasMoreItems}"
                    Command="{Binding LoadMoreItemsCommand}"
                    CommandParameter="{Binding Source={x:Reference List}}" />
            <ActivityIndicator Grid.Row="1" Grid.ColumnSpan="2"
                               IsVisible="{Binding IsLoading}"
                               IsRunning="{Binding IsLoading}" />
        </Grid>
    </CollectionView.Footer>
</CollectionView>

public ICommand LoadMoreItemsCommand { get; }

LoadMoreItemsCommand =
    new Command<object>(LoadMoreItems, CanLoadMoreItems);

private bool CanLoadMore() => BookInfo.Count < totalItems;

private bool CanLoadMoreItems(object obj) => CanLoadMore() && !IsLoading;

private async void LoadMoreItems(object obj)
{
    if (!CanLoadMore() || IsLoading)
    {
        return;
    }
    else
    {
        // CollectionView path uses the footer ActivityIndicator bound to IsLoading
        IsLoading = true;
        await Task.Delay(2000);
        IsLoading = false;
    }

    AddBooks(currentIndex, PageSize);
    currentIndex += PageSize;
    RebuildGroups();
}

For more details, refer to the blog post at Syncfusion.com

Spec-Driven Development with Markdown for AI Workflows

Lucy Muturi — Thu, 02 Apr 2026 07:23:10 +0000

TL;DR: Spec-driven development uses Markdown specifications and Code Studio prompt files as a single source of truth, letting AI reliably generate, test, review, and deploy code while preserving context. This blog shows practical prompt files and workflows, plus project structure and best practices for building a real-time project.

AI revolutionizes software development but loses context between chats, forgets earlier architectural decisions, and produces contradictory implementations unless you keep re-explaining the same requirements.

Spec-driven development treats Markdown specifications as your single source of truth. Rather than repeating requirements in AI conversations, you maintain a single living document that captures what your application does, how it behaves, and why.

Syncfusion ^®Code Studio makes this even easier with a prompt.md files (and Custom Agents), workflow files that tell your AI assistant exactly what to do at each development stage. This enables seamless specification-to-code compilation, code reviews, testing, and deployment workflows.

This blog post will guide you through implementing a practical spec-to-code workflow using prompt.md templates while building a real-world analytics dashboard example.

Why AI-assisted development breaks down

The core problem: AI context loss

When working with traditional AI‑assisted development, the AI often generates code in isolation without retaining or referencing the broader project context.

Example :

You ask for a feature (e.g., authentication).
The AI generates code in isolation.
Later, you ask for changes, and the AI forgets earlier constraints (tenancy, RBAC, security rules, naming conventions).
You repeat requirements and still get drift.

What is spec-driven development?

Spec-driven development is a methodology where:

The specification is the source code. Your Markdown files describe the complete application design (behavior, APIs, constraints, and acceptance criteria) in plain English mixed with structured data. AI generates implementation; Code Studio’s Custom Agents compile your specification into working code.
Every AI task references the same spec. You reduce contradictions and rework.
Documentation stays aligned. The spec evolves alongside the code rather than becoming stale.

Example:

User: Build me a user authentication module.

AI: Generates authentication code

Spec‐driven development ensures the AI always has access to the relevant specifications. This means the generated code is not only functional but also aligned with architectural requirements, security standards, and organizational workflows:

# User Authentication Module Specification
## Overview
Multi-tenant SaaS application requiring OAuth 2.0 with role-based access control (RBAC) 
across 10,000+ organizations.
## RBAC Structure
- Organization Admin: Full access to org settings
- Team Lead: Manage team members and reports
- Member: Read-only access to team data

This format makes requirements explicit, so code generation and reviews can consistently validate against it.

How spec-driven development with Markdown works in Code Studio

What are prompt.md files?

Prompt files are workflow specifications written in Markdown that tell Code Studio’s AI what to do at each stage of development. They are the primary tool for automating your development process.

Key features:

Repeatable instructions: Store prompts and reusable specifications to ensure consistent execution across projects.
Task automation: Automate critical stages such as compilation, testing, code review, and deployment for faster delivery.
Tool access: Provide AI with direct access to file operations, terminal commands, and web search for comprehensive workflow support.
Reusable workflows: Share and apply prompt files across teams and projects to standardize development practices.
Version control: Manage and track prompt files in Git alongside source code for full history and collaboration.

Prompt.md file format (template)

All prompt files follow this structure:

---
name: prompt file name 
mode: agent
description: Brief description of what this prompt does
---

# Main Task Title
Step-by-step instructions for the AI.
- Use bullet points for clarity
- Include specific file paths
- Reference specifications
- Define expected outputs

This structure is simple, but it’s the key to making AI output consistent and reviewable.

Spec-driven development with Markdown: Project setup (dashboard example)

Creating a complete dashboard project with the help of prompt.md files.

Recommended project structure

analytics-dashboard/

├──. codestudio/

│ └── prompts/

│ ├── compile.prompt.md

│ ├── lint.prompt.md

│ └── test.prompt.md

├── src/

│ ├── components/

│ │ ├── Dashboard.tsx

│ │ ├── Chart.tsx

│ │ └── Widget.tsx

│ └── types/

│ └── dashboard. types.ts

├── tests/

│ ├── dashboard.test.ts

│ └── api.test.ts

├── package. json

└── tsconfig. json

Note: Keep prompts in .codestudio/prompts/ so they’re easy to find, review, and run consistently.

Create your prompt files

To create Custom Prompts in Code Studio, follow these steps:

Open Chat Window.
Select Prompt Files.
Click + New Prompt File and choose the location based on your preference.
Type prompt file name.

For more insights, see our documentation on configuring custom prompts.

Creating Custom Prompt Files in Code Studio

Create the .codestudio/prompts/ folder and create these files:

compile.prompt.md: Compile spec to code.
dashboard.prompt.md: The dashboard specification.
review.prompt.md: Code review against spec.
security.prompt.md: Security audit.
test.prompt.md: Test generation.
lint-spec.prompt.md: Spec linting.

Note: You can find all these sample prompt files in this repository.

For more details, refer to the blog post at Syncfusion.com

AI Code Review in Code Studio: Instant Pre‑Commit Feedback that Cuts PR Churn

Lucy Muturi — Tue, 17 Mar 2026 15:12:28 +0000

TL;DR: AI code review in Code Studio gives developers instant, in‑editor feedback before opening a PR. Use #changes to analyze uncommitted diffs, run Custom Review Agents to enforce your team’s rules, and apply Inline Review suggestions directly in files. The result: fewer review cycles, more consistent standards, and cleaner pull requests.

You just finished implementing a complex feature that spans 15 files across your codebase. The code works well, and all tests pass. You open a PR and wait. Review queues grow, context fades, and you switch tasks. The slow part isn’t writing code anymore. It’s getting solid review feedback fast.

Sound familiar? You’re not alone.

Code reviews are essential, but the traditional process often wastes valuable time. What if there were a better way, one that gives you instant, intelligent feedback without sacrificing code quality?

That’s exactly what Syncfusion^® Code Studio delivers. This guide will show you the practical ways to get instant, intelligent code reviews in Code Studio. You’ll learn how to review your code changes in seconds before committing, and create AI reviewers that remember and enforce your team’s specific coding standards.

Code Studio brings all of this together, making the entire code review process faster, more consistent, and less frustrating.

What is a code review?

At its core, a code review is a systematic examination of source code intended to find bugs, improve code quality, and share knowledge among team members. It’s a critical practice in modern software development in which one or more developers review code written by a peer before it’s merged into the main codebase.

Here’s the typical manual flow many teams still rely on:

Developer writes code and creates a pull request (PR).
Reviewer(s) are assigned (manually or automatically).
Reviewers examine the changes line by line.
They leave comments and suggestions directly on the diff.
The author addresses feedback and pushes new commits.
The review cycle repeats until approval.
The final code is merged into the main branch.

Why do we need code reviews?

Every developer (junior or senior) benefits from consistent, thoughtful reviews. They help teams:

Catch bugs early: Bugs fixed during review take minutes. Bugs found in production cost time, money, and trust.
Improve code quality: Reviews promote best practices and maintain consistency. Code that makes sense today may confuse you or your teammates months later.
Share knowledge: Reviews spread context and patterns across the team. Junior developers learn faster, and experienced developers gain new perspectives.
Enhance security: Many security vulnerabilities are preventable with proper review.
Reduce technical debt: Regular review prevents shortcuts from piling up into large refactoring projects later.

The hidden costs of traditional code reviews

Before we dive into solutions, let’s examine the real pain points that plague modern development teams:

The waiting game: Manual reviews slow teams down. Senior developers get overloaded. Juniors wait for feedback. Work stalls, and release cycles stretch out.
Inconsistent standards: Different reviewers catch different things. What one approves, another flags. Without consistent rules, technical debt grows quietly.
Documentation debt: Most developers intend to update the documentation later, but later rarely comes. Missing documentation makes debugging and onboarding harder.

Enter Code Studio: Your AI-powered development partner

Syncfusion Code Studio helps reduce these bottlenecks by bringing AI into your development workflow. It supports instant code reviews, team-specific review rules, and context-aware suggestions, all without replacing human judgment. To learn more about Code Studio, visit our blog.

How to get instant code reviews in Code Studio

What you need

Install and configure Code Studio using our installation guide.
Install Git on your system.

Code Studio offers multiple ways to review your code. Choose the best way that fits you.

Instant Git diff review with ‘#changes’ tool

Right before committing, you’ve changed several files, fixed a bug, added a feature, and refactored code. Then comes the doubt: Did I miss anything? Scanning the diff takes time, and you can still miss issues. Imagine if you could ask someone to review it all instantly.

That’s exactly what #changes do in the Code Studio chat. Type #changes in the chat to analyze all uncommitted, staged, or unstaged changes, including:

Code you added or modified.
Code you deleted.
Files you renamed or deleted.

You’ll get a concise summary, risk flags, and a suggested commit message. This keeps feedback where it belongs: before the PR. For example, if you ask, “ What did I change? “, it summarizes all modifications.

Step-by-step guide to use #changes tool:

Open your Git project To use the #changes tool, your project needs to be connected to Git.

Check whether your project folder contains a .git directory:

Open your project folder in your system’s file manager or Finder.
Look for a .git folder in the project root.
If it exists, Git is already initialized.
Now open the same folder in Code Studio (File → Open Folder).

If your project does NOT have Git initialized yet, follow these steps:

Open your project in Code Studio (File → Open Folder).
Open the Terminal ( Ctrl+ (Windows`) or ^+ (macOS))`.
Type git init and press Enter.
That’s it — your project is now connected to Git.

Note: If you see an error while running the git init command, reinstall Git and make sure to select the “Add Git to PATH” option during installation.

Make your changes: Edit your code as usual. Any staged or unstaged edits will be included when you run #changes.
Open chat panel: Press Ctrl+Shift+I (Windows) or cmd+Shift+I (macOS) to open the chat view.
Type # in the chat: A dropdown menu appears showing available options.
Select #changes: Choose #changes from the dropdown to attach your Git diff as context.
Add your request: Type your question or instructions you want the AI to analyze.
Submit: The AI analyzes your Git diff and provides detailed feedback.

Example prompt

Prompt

#changes Analyze my uncommitted changes and answer the following:
Questions to Address:
1. What are the main changes I made? Summarize the modifications by file and purpose.
2. What is the overall impact of these changes on the codebase?
3. Are there any obvious bugs, logic errors, or edge cases I might have missed?
4. Are there any files I modified that might need corresponding test updates?
5. Could any of these changes potentially break existing functionality?
6. What would be a clear, descriptive commit message for these changes?

Output Format:
- Start with a summary of what changed (2-3 sentences)
- Answer each question with specific file references 
- Highlight any concerns that need immediate attention
- Provide a recommended commit message at the end
Be conversational but thorough. Flag anything that looks suspicious or needs clarification.

Code Review using #changes tool

This article was originally published at Syncfusion.com

AI Chatbots vs AI Agents: What Developers Should Build in 2026

Lucy Muturi — Thu, 12 Mar 2026 13:26:46 +0000

TL;DR: AI chatbots focus on conversational interfaces, while AI agents extend LLM capabilities with planning, tool usage, and autonomous task execution. Although both rely on similar AI models, their architectures and application patterns differ significantly. This guide compares chatbots and agents and helps developers decide which approach fits modern applications in 2026.

Conversational interfaces are now standard in modern applications. Whether you’re building support tools, productivity apps, or internal systems, users expect natural language interaction.

Early chatbots relied on rule-based logic and predefined flows. As NLP improved, chatbots became more flexible and could understand intent and generate natural responses.

LLMs advanced this further, enabling chatbots capable of rich, contextual interaction. They also enabled something more powerful: AI agents, which don’t just respond, but reason and act.

While both use LLMs, their architecture and purpose differ. This article explains those differences so you can choose the right approach for your application.

What are AI Chatbots?

An AI chatbot is software designed to simulate human conversation through natural language. Modern Chatbots use natural language processing (NLP) and large language models (LLMs) to understand queries and generate relevant responses.

Unlike older rule-based predecessors, today’s AI chatbots:

Understand user intent from natural language (not just keywords).
Maintain context across conversations.
Generate dynamic, contextual responses.
Pull data from backend systems when needed.

Key characteristic

Chatbots are reactive. They respond to user messages but do not independently initiate complex actions or workflows.

Core architecture

Most AI chatbot systems are built around these components:

Natural Language Understanding (NLU) Processes user input to determine intent and extract entities. Example: “What’s the status of my order?” → Order-status intent + order ID extraction.
Dialogue management Controls conversation flow and determines the next appropriate response.
Response generation Creates responses using templates, structured logic, or LLMs (increasingly common).
Backend integrations Accesses databases or APIs to retrieve information, such as order status.

Example workflow

User: “ Can you help me reset my password? “:

NLP layer interprets intent (password_reset_request).
Dialogue manager determines the appropriate response path.
System checks if additional info is needed (email, username ).
Chatbot generates a response.
If the user provides details, a backend API may be triggered.

Note: The chatbot responds to user input, it does not proactively inspect account health or take independent action.

What are AI Agents?

An AI agent autonomously performs tasks, makes decisions, and interacts with external systems to achieve specific goals. They extend beyond conversation. They integrate with tools, execute actions, and operate with independence.

Unlike chatbots that wait for prompts, AI agents:

Plan multi-step tasks.
Decide which tools or APIs to use.
Execute actions across different systems.
Remember previous interactions and outcomes.
Adjust strategies based on results and feedback.

This enables agents to perform tasks requiring reasoning, planning, and iterative execution, not just respond to questions.

Core capabilities

Autonomous decision making Agents determine the steps required to complete a task without human instructions.
Planning and reasoning LLMs help agents break down complex problems into actionable subtasks.
Tool usage Agents interact with APIs, databases, search engines, code interpreters, and more.
Memory systems Agents store information beyond single conversations across tasks and sessions.
Execution loops Agents continuously evaluate their progress and adjust actions until the task is completed. If one approach doesn’t work, they try another.

Example scenario

User: “Research the latest trends in AI developer tools and create a summary report.”

Plan the task: Break it into subtasks, search for sources, identify trends, extract insights, compile a report.
Execute searches: Use web search tools to find recent articles, GitHub repos, and discussions.
Analyze the results: Read through sources and extract key trends.
Synthesize findings: Identify patterns and important developments.
Generate the report: Compile everything into a structured summary document.
Deliver results: Present the completed report to you.

This involves planning, tool usage, information synthesis, and content creation, far beyond chatbot capabilities.

Conclusion

Thank you for reading! AI chatbots and AI agents offer two distinct approaches to building intelligent systems.

Chatbots support conversational UI and guided assistance.
Agents enable autonomous, multi-step workflow execution.

Developers should choose based on the problem:

Use chatbots for conversation.
Use agents for automation and complex workflows.
Use hybrid architectures when both are needed.

As AI evolves, the most effective applications will blend both approaches, delivering natural interaction and autonomous action.

This article was originally published at Syncfusion.com

How to Add Mentions and Slash Commands to a React Rich Text Editor

Lucy Muturi — Wed, 11 Mar 2026 14:47:58 +0000

TL;DR: Discover how Smart Suggestions (Slash Menu) and Mentions enhance the React Rich Text Editor’s workflow. The blog explains how slash-triggered commands improve formatting flow, how structured @ tagging strengthens accuracy, and how these features together support smoother content creation, stronger collaboration, and a more intuitive editing experience in modern applications.

Are you building a modern application that demands powerful, collaborative content tools? In today’s fast-paced digital landscape, content creation must be intuitive and efficient to meet workflow demands. The Syncfusion^® Rich Text Editor makes content simple and efficient. Its Smart Suggestions and Mentions features improve formatting and collaboration, making it a great fit for blogs, forums, and messaging apps.

In this blog post, we’ll explore how Smart Suggestions and Mentions work, their key benefits, and share sample code to help you implement them.

Why Smart Suggestions and Mentions matter

Modern users expect:

Fast actions without hunting through toolbars.
Structured formatting with minimal effort.
Accurate tagging inside collaborative environments.

Smart Suggestions and Mentions help achieve all of this by providing context-aware menus right where users type.

Configuring Smart Suggestions (Slash Menu) in React Rich Text Editor

Smart Suggestions, also known as the Slash Menu, allow users to type / in the editor to open a quick command popup for actions such as applying headings, creating lists, or inserting media. This removes friction from formatting and makes content creation feel natural, especially for blogging and note-taking.

How Smart Suggestions work

Trigger: Type / inside the editor.
Options: A customizable list of commands (e.g., Paragraph, Headings, lists, media insertion, and more).
Customization: Configure via the slashMenuSettings class:
- Enabling/disabling the feature.
- Define custom items using the items property.
- Handle custom actions with the slashMenuItemSelect event.

Enabling Smart Suggestions in React Rich Text Editor

Here’s a quick example showing how to enable and customize the Slash Menu using Syncfusion’s React Rich Text Editor.

JavaScript

/**
   * Initialize Rich Text Editor from React element
   */
import {
    HtmlEditor,
    Image,
    Table,
    Inject,
    Link,
    QuickToolbar,
    RichTextEditorComponent,
    Toolbar,
    EmojiPicker,
    PasteCleanup,
    SlashMenu
} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';

function App() {
    var editorObj;
    const meetingNotes = '
        <p><strong>Meeting Notes</strong></p>
        <table class="e-rte-table" style="width: 100%; min-width: 0px; height: 150px;">
            <tbody>
                <tr style="height: 20%;">
                    <td style="width: 50%;"><strong>Attendees</strong></td>
                    <td style="width: 50%;" class=""><br></td>
                </tr>
                <tr style="height: 20%;">
                    <td style="width: 50%;"><strong>Date & Time</strong></td>
                    <td style="width: 50%;"><br></td>
                </tr>
                <tr style="height: 20%;">
                    <td style="width: 50%;"><strong>Agenda</strong></td>
                    <td style="width: 50%;"><br></td>
                </tr>
                <tr style="height: 20%;">
                    <td style="width: 50%;"><strong>Discussed Items</strong></td>
                    <td style="width: 50%;"><br></td> 
                </tr>
                <tr style="height: 20%;">
                    <td style="width: 50%;"><strong>Action Items</strong></td>
                    <td style="width: 50%;"><br></td>
                </tr>
            </tbody>
        </table>
    ';

    const toolbarSettings = {
        items: [
            'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
            'Formats', 'Alignments', 'Blockquote', '|', 'NumberFormatList', 'BulletFormatList', '|','CreateLink', 'Image', 'CreateTable', '|', 'EmojiPicker', '|',
            'SourceCode', '|', 'Undo', 'Redo'
        ]
    };
    // Define custom Slash Menu items 
    const slashMenuSettings = {
        enable: true,
        items: [
            'Paragraph', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4',
            'OrderedList', 'UnorderedList', 'Blockquote', 'Link', 'Image',
            'Table', 'Emojipicker',
            {
                text: 'Meeting notes',
                description: 'Insert a meeting note template.',
                iconCss: 'e-icons e-description',
                type: 'Custom',
                command: 'MeetingNotes'
            }
        ]
    };

    // Handle custom Slash Menu item selection 

    function onSlashMenuItemSelect(args) {
        if (args.itemData.command === 'MeetingNotes') {
            // Insert custom meeting note 
            editorObj.executeCommand('insertHTML', meetingNotes);
        }
    }

    return (
        <RichTextEditorComponent
            ref={(scope) => { editorObj = scope; }}
            placeholder="Type '/' and choose format"
            toolbarSettings={toolbarSettings}
            slashMenuSettings={slashMenuSettings}
            slashMenuItemSelect={onSlashMenuItemSelect.bind(this)}
        >
            <Inject
                services={[
                    HtmlEditor,
                    SlashMenu,
                    Toolbar,
                    Link,
                    QuickToolbar,
                    Image,
                    PasteCleanup,
                    Table,
                    EmojiPicker
                ]}
            />
        </RichTextEditorComponent>
    );
}

export default App;

Code explanation

slashMenuSettings
- The enable: true property activates the Slash Menu and injects the SlashMenu service into the editor.
- The items array defines the available commands, including default options like Paragraph and Heading 1, as well as custom items (e.g., MeetingNotes).
slashMenuItemSelect
- This event handler runs when a user selects an item from the Slash Menu.
- In the above code example, we check if the selected command is MeetingNotes and use executeCommand method to insert a predefined HTML snippet.
- Developers can extend this logic to handle other custom actions, such as inserting templates, signatures, or dynamic content.

For example, a content creator can type / select Heading 1 to format a title, or choose MeetingNotes to insert a predefined note, streamlining their workflow as shown below.

Smart Suggestions menu displayed after typing “/” in the Rich Text Editor

Benefits of Smart Suggestions

Here are the key features that make this feature efficient.

Faster formatting: Skip toolbars and format inline.
Contextual workflow: Suggestions appear exactly where users type.
Customizability: Tailor the Slash Menu to include app-specific commands, like inserting signatures or templates.

Ready to level up your editor? Explore the Smart Suggestions demo and documentation to start implementing and customizing it.

Configuring Mentions in React Rich Text Editor

The Mentions feature allows users to tag people, groups, or entities by typing @, triggering a suggestion list populated from a data source. This is perfect for collaborative applications like messaging apps, comment sections, or project management tools, ensuring accurate and efficient tagging.

How Mentions work

Trigger: Type @ followed by a character to display the suggestion list.
Data Source: A list of objects (e.g., employee records with names, emails, and profile images).
Customization:
- Use itemTemplate to style the suggestion list.
- Use displayTemplate to format tagged values.
- Properties like suggestionCount, popupWidth, and allowSpaces provide further control.

Integrating Mentions in React Rich Text Editor

Below is a React example showing how to integrate and customize the Mentions feature using Syncfusion’s React Rich Text Editor.

JavaScript

/**
   * Initialize Rich Text Editor from React element
   */
import { 
    HtmlEditor,
    Image,
    Table,
    Inject,
    Link,
    QuickToolbar,
    RichTextEditorComponent,
    Toolbar,
    EmojiPicker,
    PasteCleanup,
    SlashMenu
} from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import './App.css';

function App() {
    // Sample data for Mentions 
    const mentionData = [
        { Name: 'Selma Rose', EmailId: 'selma@example.com' },
        { Name: 'Maria Smith', EmailId: 'maria@example.com' },
        { Name: 'John Doe', EmailId: 'john@example.com' }
    ];

    const fieldsData = { text: 'Name' };
    const toolbarSettings = {
        items: [
            'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
            'Formats', 'Alignments', 'Blockquote', '|', 'NumberFormatList', 'BulletFormatList', '|', 'CreateLink', 'Image', 'CreateTable', '|', 'EmojiPicker', '|',
            'SourceCode', '|', 'Undo', 'Redo'
        ]
    };

    return (
        <div>
            <RichTextEditorComponent
                id="mentionRTE"
                toolbarSettings={toolbarSettings}
                height={400}
                placeholder="Type @ to tag a name" toolbarSettings={toolbarSettings}
            >
                <Inject
                    services={[
                        HtmlEditor,
                        Toolbar,
                        Link,
                        QuickToolbar,
                        Image,
                        PasteCleanup,
                        Table,
                        EmojiPicker
                    ]}
                />
            </RichTextEditorComponent>
            <MentionComponent
                target="#mentionRTE_rte-edit-view"
                dataSource={mentionData}
                fields={fieldsData}
                suggestionCount={5}
                popupWidth="250px"
                itemTemplate="<span>${Name} - ${EmailId}</span>"
            />
        </div>
    );
}

export default App;

Code explanation

mentionData: A sample dataset containing objects with Name and EmailId fields for populating the suggestion list.
fieldsData: Specifies which field (Name) should be displayed in the suggestion list.
MentionComponent:
- The target property binds the Mentions feature to the Rich Text Editor’s editable area (e.g., #mentionRTE_rte-edit-view).
- dataSource and fields properties link the component to the dataset.
- suggestionCount limits the number of suggestions displayed.
- popupWidth sets the width of the suggestion list.
- itemTemplate customizes the suggestion list to show both name and email.

Example: In a team messaging app, typing @Maria displays a suggestion list with Maria Smith - maria@example.com, ensuring accurate tagging.

Refer to the following image.

Mention suggestions are displayed after typing “@”

Benefits of Mentions

Collaboration: Simplifies tagging team members, improving communication in collaborative tools.
Accuracy: Selecting from a predefined list reduces typing errors and ensures correct tagging.
Enhanced UI: Customizable suggestion lists with images or status indicators improve the visual experience.

Note: Explore the Mentions demo and documentation for detailed steps on implementing and customizing this feature.

Real-world applications

The combination of Smart Suggestions and Mentions makes the Rich Text Editor ideal for:

Blogging platforms: Use Smart Suggestions to format posts quickly and Mentions to tag contributors.
Collaboration tools: Tag team members in comments or notes for seamless communication.
Support ticket systems: Assign tasks with Mentions and insert predefined responses with Smart Suggestions.

Frequently Asked Questions

1. What is the difference between Smart Suggestions (Slash Menu) and Mentions?

A: Smart Suggestions are triggered by typing / and help with formatting actions like adding headings, lists, or inserting templates. Mentions are triggered by typing @ and are used to tag people, entities, or items from a data source within the editor.

2. Can I create my own custom Smart Suggestion (Slash Menu) commands?

A: Yes. You can fully customize the Slash Menu by adding your own items with text, icons, descriptions, and actions. Using the slashMenuSettings.items property and handling the slashMenuItemSelect event, you can insert templates, dynamic HTML, signatures, or any custom content.

3. Does the Mentions feature work with dynamic data from APIs?

A: Absolutely. Mentions can use any data source, static arrays, remote data, REST APIs, or databases. Bind the dataSource of the MentionComponent to your dynamic data and map fields like text, value, or email using the fields property.

4. Can I customize how Mention items appear in the suggestion list?

A: Yes. Mentions support multiple presentation options: Custom itemTemplate for list appearance and Custom displayTemplate for how selected mentions appear inside the editor

You can include profile images, roles, email IDs, statuses, or any custom UI element.

Conclusion

Thanks for reading! The Smart Suggestions and Mentions features in Syncfusion Rich Text Editor transform content creation by making it faster, more intuitive, and collaborative.

Smart Suggestions reduce clicks with quick formatting commands.
Mentions ensure accurate, structured tagging in collaborative environments.

Both features are highly customizable, flexible, and ready for real-world applications.

Try them out to elevate your content creation experience today!

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com

Prevent Connector Overlap in React Diagrams with Smart Line Routing

Lucy Muturi — Tue, 10 Mar 2026 12:31:05 +0000

TL;DR: Connector lines overlapping all over your diagram? This guide shows how to clean them up using Syncfusion React Diagram’s AvoidLineOverlapping with LineRouting. Learn how to keep connectors smart, readable, and neatly routed, complete with a copy-ready example you can plug into workflow, flowchart, or circuit-style diagrams.

Readable diagrams are essential when working on workflow designers, circuit editors, process maps, or architecture visualizations. Without clarity, even the best UI becomes frustrating to use. As the number of connections grows, connectors often stack on the same route, creating visual noise.

This guide shows how to prevent overlapping connector lines in React diagrams using the AvoidLineOverlapping API in Syncfusion^®React Diagram.

What is line overlapping (and why it hurts UX)?

Line overlapping happens when multiple connectors take the same (or nearly the same) route between nodes. When lines sit directly on top of each other, users can’t tell which connector goes where.

You’ll see this often in:

Repetitive data flows (many nodes sharing the same upstream/downstream path).
Multi-bit circuit diagrams (parallel signals).
Dense process maps.
Diagrams with lots of “fan-in / fan-out” connections.

How Syncfusion avoids connector overlap

AvoidLineOverlapping reduces clutter by:

Detecting when orthogonal connector segments overlap.
Applying small offsets/detours so each connector gets a distinct visible path.

It typically re-runs when:

You add new connectors.
You move nodes.
Multiple connectors share the same corridor.
Layout updates occur.

Result: Cleaner diagrams with less manual connector nudging.

Prerequisites

Before you start:

Install Node.js and NPM packages.
Install Syncfusion React Diagram Library (@syncfusion/ej2-react-diagrams).

Note: New to Syncfusion React Diagram? Start with the official getting-started guide.

Configuration checklist (required)

Before implementing the Avoid Line Overlapping feature, ensure:

Enable routing in diagram constraints You need routing enabled via constraints ( LineRouting ), as shown in the code snippet below:

DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.LineRouting

Use orthogonal connectors AvoidLineOverlapping is designed for orthogonal routing. Ensure your connectors are set to use orthogonal paths.

How to prevent connector overlap in React Diagram

Add DiagramConstraints.AvoidLineOverlapping to your DiagramComponent and inject the required services. This configuration ensures that your diagrams automatically manage connector paths to prevent overlapping without manual intervention.

Here’s how you can do it in code:

JavaScript

import * as React from "react";
import {
    AvoidLineOverlapping,
    ConnectorModel,
    DiagramComponent,
    DiagramConstraints,
    Inject, LineRouting,
    NodeModel,
    PointPortModel,
    PortVisibility,
    ShapeAnnotationModel
} from "@syncfusion/ej2-react-diagrams";

<DiagramComponent id="diagram"
                  ref={diagramRef}
                  width={"100%"}
                  height={"580"}
                  constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.AvoidLineOverlapping}
                  nodes={nodes}
                  connectors={connectors}>
    <Inject services={[LineRouting, AvoidLineOverlapping, Snapping]}></Inject>
</DiagramComponent>

What this does:

DiagramConstraints.LineRouting turns on routing logic for connectors.
DiagramConstraints.AvoidLineOverlapping offsets connectors when overlaps are detected.
Inject registers the runtime services needed for routing and overlap avoidance.

Complete example: custom nodes, ports, and orthogonal connectors

The code example below shows a practical setup where ports and orthogonal connectors are defined explicitly, common in circuit-style or workflow-style diagrams.

JavaScript

import * as React from "react";
import {
    AvoidLineOverlapping,
    type ConnectorModel
    DiagramComponent,
    DiagramConstraints,
    Inject,
    LineRouting,
    type NodeModel,
    type PointPortModel,
    PortVisibility,
    Snapping
} from "@syncfusion/ej2-react-diagrams";

function createPort(id: string, offsetX: number, offsetY: number): PointPortModel {
    return {
       id,
       offset: { x: offsetX, y: offsetY },
       visibility: PortVisibility.Visible
    };
}

export default function AvoidOverlapDiagram() {
    const nodes: NodeModel[] = [
        {
            id: "A",
            offsetX: 150,
            offsetY: 150,
            width: 120,
            height: 60,
            annotations: [{ content: "Node A" }],
            ports: [
                createPort("A_out1", 1, 0.35),
                createPort("A_out2", 1, 0.65)
            ]
        },
        {
            id: "B",
            offsetX: 350,
            offsetY: 200,
            width: 120,
            height: 60,
            annotations: [{ content: "Node B" }],
            ports: [
                createPort("B_in1", 0, 0.35),
                createPort("B_in2", 0, 0.65)
            ]
        }
    ];

    const connectors: ConnectorModel[] = [
        {
            id: "c1",
            sourceID: "A",
            sourcePortID: "A_out1",
            targetID: "B",
            targetPortID: "B_in1",
            type:"Orthogonal",
        },
        {
            id: "c2",
            sourceID: "A",
            sourcePortID: "A_out2",
            targetID: "B",
            targetPortID: "B_in2",
            type:"Orthogonal"
        }
    ];

    return (
        <DiagramComponent
            id="diagram"
            width={"700px"}
            height={"580px"}
            nodes={nodes}
            connectors={connectors}
            constraints={
                DiagramConstraints.Default |
                DiagramConstraints.LineRouting |
                DiagramConstraints.AvoidLineOverlapping
            }
        >
            <Inject services={[LineRouting, AvoidLineOverlapping, Snapping]} />
        </DiagramComponent>
    );
}

What to notice:

Both connectors would naturally try to share a similar route between Node A and Node B.
With AvoidLineOverlapping, the component offsets them so both paths remain visible.

Why this feature matters (practical wins)

Better readability: Users can trace each connection without guessing.
Less manual cleanup: Connectors adjust when nodes move, or new links appear.
Scales to dense diagrams: Helpful for fan-in/fan-out patterns and multi-connector corridors.

Preventing connector overlap in React Diagram

GitHub reference

For a complete working sample, refer to the GitHub demo to avoid line overlapping.

Frequently Asked Questions

1. Does AvoidLineOverlapping work with all connector types?

A: No. AvoidLineOverlapping is designed specifically for Orthogonal connectors. If your connectors use Straight or Bezier routing, the overlap‑avoidance logic will not apply.

2. Will enabling AvoidLineOverlapping affect diagram performance?

A: In large diagrams with many connectors, enabling AvoidLineOverlapping may introduce slight routing overhead because the algorithm recalculates and offsets connectors dynamically. However, in typical workflow and process diagram scenarios, the performance impact is minimal and optimized to run efficiently with LineRouting.

3. Do connectors automatically re-adjust when nodes move?

A: Yes. When a node is moved, resized, or new connectors are added, the AvoidLineOverlapping logic re-runs. This ensures connectors continuously avoid overlapping without requiring manual adjustments from the user.

Conclusion

Thank you for reading! To prevent connector overlapping in React Diagram, enable LineRouting, use orthogonal connectors, and turn on AvoidLineOverlapping. You’ll get cleaner visuals with far less manual connector work, especially as your diagrams scale in complexity.

For deeper configuration options, see the official Syncfusion React Diagram documentation.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com

AI-Powered DOCX Editor in React: Writing Assistance, Document Summaries & Contextual Q&A

Lucy Muturi — Tue, 10 Mar 2026 11:46:39 +0000

TL;DR: Learn to bring AI directly into the Syncfusion React DOCX Editor, so users can generate content, clean up their writing, summarize long documents, and ask natural questions without ever leaving the editor. We’ll also see how to plug in your own AI service (thanks to BYOK flexibility) while keeping full control of our data.

Why modern document editing needs more than just typing

Modern document creation has moved far beyond basic typing and formatting. Today’s users expect their editor to actually help them to generate content, improve clarity, translate text, summarize long sections, and let them interact with their documents more intelligently. Jumping between multiple apps to handle these tasks disrupts focus and slows down productivity.

To make this experience feel seamless, the Syncfusion^® React DOCX Editor offers APIs that let developers embed powerful AI capabilities directly into the editing workflow, including:

AI-powered content generation,
Refinement,
Summarization,
Translation,
Context-aware Q&A

AI results are inserted straight into the document through the editor, so the output blends naturally with existing content and formatting. The AI interaction interface, prompts, summarization, translation, rewriting panels, and more are built at the application level, giving you full control over the experience.

Let’s see why integrating AI into the Syncfusion React DOCX Editor is valuable, the intelligent capabilities you can add, and how these enhancements make modern document workflows smoother and far more efficient.

Why integrating AI into a DOCX Editor is a game-changer

Integrating AI into a DOCX editor workflow is all about saving time, reducing manual effort, and improving the overall writing and editing experience:

Generate document content faster using short prompts, no external tools or app switching required.
Improve writing quality instantly with AI-assisted rewriting, grammar correction, and tone adjustment.
Summarize long documents with AI or ask natural language questions to extract key insights without reading everything.
Stay in your workflow; all AI-assisted results are delivered directly into the document through the editor, keeping the experience seamless and uninterrupted.

Building an AI‑powered React DOCX Editor

Let’s follow these steps to integrate AI services in Syncfusion React DOCX Editor SDK:

Step 1: Set up the React project

Start by creating a React project and installing the required dependencies using the following commands.

BASH

npm create vite@latest ai-docx-editor -- --template react
cd ai-docx-editor

Now, install the Syncfusion React DOCX Editor and the required AI libraries.

BASH

npm install @syncfusion/ej2-react-documenteditor --save
npm install openai --save

Step 2: Configuring the AI service

Set up the AI service by specifying the required resource name, providing the API key for authentication, and selecting the AI model you wish to use.

The following code initializes the AI service and defines a utility function to handle requests.

JavaScript

import { generateText } from "ai";
import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { createAzure } from "@ai-sdk/azure";
import { createOpenAI } from "@ai-sdk/openai";

// For Google Gemini AI
const google = createGoogleGenerativeAI({
  baseURL: "https://generativelanguage.googleapis.com/v1beta",
  apiKey: "API_KEY",
});

// For Azure OpenAI
const azure = createAzure({
  resourceName: "RESOURCE_NAME",
  apiKey: "API_KEY",
});

// For Groq
const groq = createOpenAI({
  baseURL: "https://api.groq.com/openai/v1",
  apiKey: "API_KEY",
});

const aiModel = azure("MODEL_NAME"); // Update the model here

export async function getAzureChatAIRequest(options: any) {
  try {
    const result = await generateText({
      model: aiModel,
      messages: options.messages,
      topP: options.topP,
      temperature: options.temperature,
      maxOutputTokens: options.maxTokens,
      frequencyPenalty: options.frequencyPenalty,
      presencePenalty: options.presencePenalty,
      stopSequences: options.stopSequences,
    });

    return result.text;
  } catch (err) {
    console.error("Error occurred:", err);
    return null;
  }
}

Step 3: Configure the Syncfusion React DOCX Editor for visualization

The Syncfusion React DOCX Editor allows users to create, edit, view, and print Word documents in web applications. It runs entirely on the client side, resulting in faster, smoother editing.

Inside the App.jsx file, import, and configure the Syncfusion React DOCX Editor component. This component acts as the main workspace for document editing in your app.

XAML

<DocumentEditorContainerComponent
                    id="document-editor"
                    ref={container}
                    height="100%"
                    serviceUrl={SERVICE_URL}
                    enableToolbar={true}
                    toolbarMode='Ribbon'
                    enableSpellCheck={true}
                    created={onContainerCreated}/>

Step 4: Create AI assistant buttons

Let’s create two buttons for the AI-assisted services:

The first button will be placed inside the content area. It will help users generate new content and refine existing content using AI.
The second button will appear in the bottom-right corner of the Syncfusion React DOCX Editor. Users will use it to access AI-powered summarization and Q&A features.

XAML

<FabComponent
  ref={assistFabRef}
  cssClass="ai-assist-btn"
  iconCss="e-icons e-ai-assist-btn"
  title={isSmartEditor ? "Refine the content" : "Generate new content"}
  visible={fabAssistVisible}
  onMouseDown={(e) => {
    e.preventDefault();
    e.stopPropagation();
  }}
  onClick={openAssistMenu}
  style={{
    position: "absolute",
    left: `${assistBtn.left}px`,
    top: `${assistBtn.top}px`,
    width: `${assistBtn.width}px`,
    height: `${assistBtn.height}px`,
  }}/>

<FabComponent
  ref={chatFabRef}
  cssClass="ai-chat-btn"
  iconCss="e-icons e-ai-chat-btn"
  title="Summarization and Q&A"
  visible={fabChatVisible}
  created={onChatFabCreated}
  onClick={openChat}/>

Refer to the following image.

Creating AI-assisted buttons for document processing

Step 5: AI-powered content generation using React Document Editor

To generate content using AI, we’ll create:

A dialog with a textbox for the user to enter input,
A settings icon to set the tone, length, and format of the result to be generated, and
A send icon to submit the input to the AI.

Once content is generated, the user can enter a short instruction to expand or refine it, and the system will generate an updated result as needed. Also, we’ll implement the “Keep it”, “Regenerate”, and “Discard” buttons in the same dialog footer to seamlessly manage the generated content.

See the code example for generating content using AI in the DOCX Editor.

XAML

<DialogComponent
  ref={genDialogRef}
  visible={genVisible}
  target="#ai-assist"
  header={isContentGenerated ? "Generate content" : undefined}
  footerTemplate={isContentGenerated ? generateFooterTemplate : undefined}
  position={{ X: dialogPos.x, Y: dialogPos.y }}
  showCloseIcon={false}
  isModal={false}
  width="45%"
  beforeOpen={generateContentOpen}
  cssClass={
    isContentGenerated
      ? "ai-rewrite-dialog ai-assist-dialog"
      : "ai-generate-dialog ai-assist-dialog"
  }>

  <div className="ai-dialog-body">
    <div className="ai-generate-content">
      <div className="e-de-parent gc-row ai-gc-row">
        <div className="ai-input-wrapper">
          <TextBoxComponent
            ref={textboxRef}
            id="e-de-editableDiv"
            placeholder="Type a prompt"
            cssClass="ai-input-box"
            value={userPrompt}
            input={textboxValueChange}
            created={TextBoxCreated}
            type="text"
            onFocus={floatFocus}
            onBlur={floatBlur}
            onKeyDown={(e) => {
              if (e.key === "Enter" && userPrompt?.trim()) {
                e.preventDefault();
                onSend();
              }
            }}/>

        </div>
        <DropDownButtonComponent
          ref={gearRef}
          id="ai-assist-settings-btn"
          iconCss="e-icons e-settings"
          cssClass="e-caret-hide settings-btn"
          beforeOpen={(args) => {
            args.cancel = true;
            openGearMenu();
          }}/>

      </div>
    </div>
  </div>
</DialogComponent>

See the outputs in the following images.

Customizing the settings for content generation

AI-powered content generation in Syncfusion React DOCX Editor

Step 6: AI-powered content refinement: Rewrite, fix grammar, and translate

Let’s design the context menu to display the AI writing refinement options:

Rewriting: to rephrase existing content
Grammar: To automatically detect and fix grammar issues, and the
Translation: To convert selected text into other languages for multilingual document editing and cross‑team collaboration.

When the user selects any of these options, a dialog opens to handle the chosen AI refinement task. In the dialog, we’ll show the selected existing content in the top pane and the AI‑generated result in the bottom pane for a clear comparison.

The Rewrite option includes a Settings icon within the dialog to configure the tone, length, and format of the rewritten output.

The Grammar Fix option displays a list of grammar issues so that the user can choose which corrections should be applied in the dialog. We’ll also include the Replace and Cancel buttons in the dialog footer to either apply the AI‑refined content to the document or cancel the action.

For both the Rewrite and Grammar Fix dialogs, a Regenerate button is available so users can generate improved results after adjusting tone, length, format, or selected grammar corrections.

Refer to the code example for implementation.

JavaScript

// To show the refinement option
<ContextMenuComponent
  ref={cmAssistRef}
  cssClass="ai-smart-menu"
  items={menuItems}
  select={onMenuSelect}/>

// For the refinement option’s dialog
<DialogComponent
  ref={smartDialogRef}
  visible={smartVisible}
  target="#ai-assist"
  header={smartHeaderTemplate}
  footerTemplate={smartFooterTemplate}
  showCloseIcon={true}
  isModal={true}
  width="70%"
  close={() => setSmartVisible(false)}
  cssClass="e-smart-editor-dialog">
  <div className="ai-dialog-body">
    <SplitterComponent
      orientation="Vertical"
      separatorSize={0}
      className={`ai-splitter e-vertical-smart ${
        popupType === AiTask.Rephrase
          ? "e-smart-rephrase"
          : popupType === AiTask.Translate
          ? "e-smart-translate"
          : "e-smart-grammar"
      }`}>

      <PanesDirective>
        <PaneDirective
          size="50%"
          content={() => (
            <div className="pane-content">
              <div className="pane-content-header">
                <label className="translate-label">
                  {popupType === AiTask.Translate ? "Translate from:" : "From:"}
                </label>
              </div>
              <div
                className="pane-text-area"
                dangerouslySetInnerHTML={{ __html: inHtml }}/>
            </div>
          )}/>

        <PaneDirective
          size="50%"
          content={() => (
            <div className="pane-content">
              <div className="pane-content-header">
                <label className="translate-label">
                  {popupType === AiTask.Translate ? "Translate to:" : "To:"}
                </label>

                {popupType === AiTask.Translate && (
                  <ComboBoxComponent
                    dataSource={TranslateList}
                    value={translateTo}
                    change={changeLanguage}
                    width="160px"
                    placeholder="Translate to"
                    popupHeight="220px"
                    showClearButton={false}/>
                )}

                {popupType === AiTask.Grammar && (
                  <MultiSelectComponent
                    dataSource={GrammarOptions}
                    fields={{ text: "Name", value: "Name" }}
                    value={checks}
                    change={(e) => setChecks(e.value || [])}
                    mode="CheckBox"
                    showSelectAll={true}
                    showDropDownIcon={true}
                    allowFiltering={true}
                    placeholder="e.g. Spelling Errors"
                    width="180px"
                    popupHeight="260px"
                  >
                    <Inject services={[CheckBoxSelection]}/>
                  </MultiSelectComponent>
                )}
              </div>

              <div
                id="e-de-editableDiv"
                className="pane-text-area"
                dangerouslySetInnerHTML={{ __html: outHtml }}/>
            </div>
          )}/>
      </PanesDirective>
    </SplitterComponent>

    <div id="spinner-container" className="spinner-target"/>
  </div>
</DialogComponent>

Refer to the following images for visual clarity.

Context menu displaying the refinement options

AI-powered content refinement in Syncfusion React DOCX Editor

Step 7: AI- powered document summarization and intelligent Q&A

Let’s implement the code for AI-powered content summarization and contextual Q&A.

Here, when the user clicks the Summarization button, a chat panel will open with a default prompt, “Summarize this document,” to help generate a concise summary of lengthy content and highlight the main ideas.

Also, we’ll include a textbox for the user to enter a general intelligent question or a question related to the document’s content, along with a send button to submit the request to the AI service.

JavaScript

<AIAssistViewComponent
  ref={assistInstance}
  cssClass="e-aiassist-chat"
  promptPlaceholder="Type a question"
  promptSuggestions={aiSuggestions}
  promptIconCss="e-icons e-aiassist-chat-icon"
  responseIconCss="e-aiassist-chat-icon"
  created={chatPanelCreated}
  toolbarSettings={{
    items: [
      { iconCss: "e-icons e-close", align: "Right", tooltipText: "Close" },
    ],
  }}
  bannerTemplate={() => (
    <div className="ai-assist-banner">
      <div className="e-icons e-aiassist-page-icon"/>
      <div className="e-aiassist-page-header">How can I help you?</div>
    </div>
  )}
  promptRequest={async (args) => {
    const prompt = String(args?.prompt || "").trim();
    if (!prompt) {
      args.response = "";
      return;
    }

    try {
      if (prompt === "Summarize this document") {
        await new Promise((resolve) => {
          requestAnimationFrame(() => setTimeout(resolve, 10));
        });

        const documentContent = await getDocumentText(container);

        // Prepare the prompt for summarization
        const options = {
          messages: [
            {
              role: "system",
              content:
                "You are a helpful assistant. Your task is to analyze the provided text and generate short summary. Always respond in proper HTML format, but do not include <html>, <head>, or <body> tags.",
            },
            { role: "user", content: documentContent },
          ],
          model: "gpt-4",
        };

        const summaryHtml = await getAzureChatAIRequest(options);
        args.response = summaryHtml || "<p>No summary available.</p>";
        assistInstance.current.addPromptResponse(args.response);

        const suggestionsRaw = await getAzureChatAIRequest({
          messages: [
            {
              role: "system",
              content:
                "You are a helpful assistant. Your task is to analyze the provided text and generate 3 short diverse questions and each question should not exceed 10 words",
            },
            { role: "user", content: documentContent },
          ],
          model: "gpt-4",
        });

        if (suggestionsRaw) {
          const next = suggestionsRaw
            .split(/\d+\.\s*/)
            .filter((x) => x.trim() !== "")
            .map((text, index) => `${index + 1}. ${text.trim()}`);

          if (next.length) setAiSuggestions(next);
        }
      } else {
        await new Promise((resolve) => {
          requestAnimationFrame(() => setTimeout(resolve, 10));
        });

        // Prepare the prompt for Q&A
        const options = {
          messages: [
            {
              role: "system",
              content:
                "You are a helpful assistant. Use the provided context to answer the user question. Always respond in proper HTML format, but do not include <html>, <head>, or <body> tags. Context:",
            },
            { role: "user", content: prompt },
          ],
          model: "gpt-4",
        };

        const answerHtml = await getAzureChatAIRequest(options);
        const response = String(answerHtml ?? "<p>No answer.</p>");
        args.response = response;
        assistInstance.current.addPromptResponse(response);
      }
    } catch (e) {
      args.response = `<p class="aiassist-error">AI error: ${e?.message || e}</p>`;
    }
  }}
  responseToolbarSettings={{
    items: [
      { iconCss: "e-icons e-copy", tooltip: "copy" },
      { iconCss: "e-btn-icon e-de-ctnr-new", tooltip: "insert" },
    ],
    itemClicked: async (e) => {
      const idx =
        typeof e?.dataIndex === "number"
          ? e.dataIndex
          : (assistInstance.current?.prompts?.length ?? 1) - 1;

      const resHtml = assistInstance.current?.prompts?.[idx]?.response ?? "";
      if (!resHtml) return;

      const tmp = document.createElement("div");
      tmp.innerHTML = resHtml;

      const plainText = (tmp.innerText || "").trim();
      const tip = (e?.item?.tooltip || "").toLowerCase();

      if (tip === "copy") {
        if (navigator.clipboard && window.ClipboardItem) {
          const blobHtml = new Blob([resHtml], { type: "text/html" });
          const blobText = new Blob([plainText], { type: "text/plain" });

          await navigator.clipboard.write([
            new ClipboardItem({
              "text/html": blobHtml,
              "text/plain": blobText,
            }),
          ]);
        } else {
          await navigator.clipboard?.writeText(plainText);
        }
      } else if (tip === "insert") {
        const editor = container?.current?.documentEditor?.editor;
        if (editor && plainText) {
          editor.insertText(plainText);
        }
      }
    },
  }}
>
  <ViewsDirective>
    <ViewDirective
      header="AI Assistant"
      iconCss="e-icons e-aiassist-chat-header"/>
  </ViewsDirective>
</AIAssistViewComponent>

AI-powered content summarization in Syncfusion DOCX Editor

Step 8: Integrating AI for results

Here’s the code to prepare the prompt from the user’s input according to the chosen AI service.

JavaScript

let options = {
  messages: [
    { 
      role: "system", 
      content: `Develop your prompt based on the chosen AI option here` 
    },
    { 
      role: "user", 
      content: 'Handle the user input here' 
    }
  ],
  model: "gpt-4",
};

Then, implement the code to send the request to AI.

JavaScript

let out = await getAzureChatAIRequest(options);

Let’s insert the AI‑generated content into the content area for the AI content generation option.

JavaScript

const insertContent = async (out) => {
  if (canceledRef.current) return;

  closeStopDialog();
  setInHtml("");
  setOutHtml(out);

  try {
    const ed = editorRef?.current?.documentEditor;
    if (ed) {
      await ed.editor.delete();
      ed.focusIn();

      const { end: caretEndBefore } = getOffsets();
      if (caretEndBefore != null) selectOffsets(caretEndBefore, caretEndBefore);

      const plain = htmlToPlain(out);
      if (canceledRef.current) {
        return;
      }

      ed.editor.insertText(plain);
      ed.editor.insertText("\n");

      const { end: endAfter } = getOffsets();
      if (
        caretEndBefore != null &&
        endAfter != null &&
        endAfter >= caretEndBefore
      ) {
        selectOffsets(caretEndBefore, endAfter);
        setDraftRange({ start: caretEndBefore, end: endAfter });
      } else {
        setDraftRange({ start: null, end: null });
      }
    }
  } catch (e) {
    alert("Insert failed: " + (e?.message || e));
  }

  setUserPrompt("");
};

Now, replace the selected text with the AI result for AI writing refinement options.

JavaScript

const replaceSelectionWithPlainText = async (html) => {
  const text = (html || '')
    .replace(/<[^>]+>/g, ' ')
    .replace(/\s+/g, ' ')
    .trim();

  try {
    const editor = editorRef?.current?.documentEditor;
    if (editor?.selection?.text) editor.editor.delete();
    editor?.editor?.insertText(text);
  } catch (e) {
    alert('Replace failed: ' + e.message);
  }
};

Finally, copy the result from the chat panel or insert it into the DOCX Editor for Summarization and Q&A options.

JavaScript

if (tip === 'copy') {
  if (navigator.clipboard && window.ClipboardItem) {
    const blobHtml = new Blob([resHtml], { type: 'text/html' });
    const blobText = new Blob([plainText], { type: 'text/plain' });

    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': blobHtml,
        'text/plain': blobText,
      }),
    ]);
  } else {
    await navigator.clipboard?.writeText(plainText);
  }
} else if (tip === 'insert') {
  const editor = container?.current?.documentEditor?.editor;
  if (editor && plainText) {
    editor.insertText(plainText);
  }
}

Bring Your Own Key (BYOK): Use your own AI model

The Syncfusion DOCX Editor uses a Bring Your Own Key (BYOK) model for AI integration. Developers can connect their own AI service, such as OpenAI, Azure OpenAI, or any custom LLM, with no lock-in to a specific provider.

You can use your own AI service API key. Syncfusion does not provide or manage AI credentials.
You can also choose the AI model that best fits our use case, such as GPT-4, Claude, Gemini, or others.
You retain complete flexibility to switch AI providers at any time without changing the editor integration.

Data privacy and security in AI-assisted DOCX editing

AI support in the DOCX Editor is designed with privacy and control at the core.

All AI communication happens through your app, ensuring:

Syncfusion never accesses or stores your prompts, AI responses, or document content.
All data remains fully within your own environment , suitable for GDPR-compliant and enterprise document workflows.
You retain complete control over how AI requests are routed and processed, with no third-party data exposure.

This setup keeps your documents secure and gives you complete control, making it safe to use AI even in sensitive or regulated scenarios.

Get started: Syncfusion React DOCX Editor with AI Integration

Refer to our GitHub example that demonstrates how to build an app-level AI interaction UI, including prompt input, summarization, translation, and rewriting panels with the Syncfusion React DOCX Editor. The sample shows how AI-generated results are bound and inserted into the document through the editor’s API.

Frequently Asked Questions

1. How to enable the AI in this DOCX Editor?

A: You can enable AI by using the AI Enabled option available at the top-right of the editor.

2. Does the DOCX Editor include built‑in AI?

A: No, the DOCX Editor does not include built‑in AI. Developers integrate their own AI service using an API key.

3. How to set the tone, format, and length for AI results?

A: While generating or rewriting content, you can adjust tone, format, and length by clicking the settings icon before sending the AI request.

4. Which AI services can I use with the DOCX Editor?

A: You can connect any AI provider that exposes an API—such as OpenAI, Azure OpenAI, or a custom LLM.

5. Where does AI processing happen?

A: All AI processing happens in your application layer, not inside the editor.

6. Can the AI interaction UI be customized?

A: Yes. The AI input panel and controls are fully customizable since they are implemented at the application level.

7. Do AI features require internet access?

A: AI features require internet access only if the chosen AI provider requires connectivity.

Conclusion

Thanks for reading! AI is now a core expectation in modern document workflows. The Syncfusion React DOCX Editor with AI integration gives developers a production-ready foundation to embed AI content generation, grammar correction, document summarization, and intelligent ** Q&A** directly into their apps, with full control over the AI provider, data privacy, and security.

Whether you’re building an enterprise document editor, a SaaS writing tool, or a collaborative document platform, the DOCX Editor provides the API infrastructure to make it happen.

You can also try the core editing features of the Syncfusion DOCX Editor in your browser, the free online editor lets you create, format, and export high‑quality DOCX documents instantly, no setup, downloads, or sign‑in required.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com

How to Export Excel, CSV, and PDF Files from a React Spreadsheet

Lucy Muturi — Wed, 04 Mar 2026 18:46:37 +0000

TL;DR: Learn how to export spreadsheet data from React applications to Excel, CSV, and PDF formats using an enterprise-ready Spreadsheet component from Syncfusion. This guide covers exporting via ribbon UI and programmatic save methods, customizing output with beforeSave and saveComplete events, and optimizing performance using server-side processing or Docker-based deployment for large datasets.

Exporting spreadsheet data is a must-have feature in modern React apps, dashboards, reports, admin tools, and internal data workflows all need it. Users expect to download data for sharing, analysis, and archiving.

This guide shows how to export Excel, CSV, and PDF in React using the Syncfusion^® React Spreadsheet in two common ways:

Ribbon UI (end-user driven).
Custom export with the save() method (developer controlled).

You’ll also learn how to customize exports with beforeSave and saveComplete for better performance and more control.

Why use Syncfusion React Spreadsheet for exporting files?

The Syncfusion React Spreadsheet component is designed for enterprise-grade scenarios and includes export support that works well for both end users and developers:

Multiple export formats: Export to XLSX, XLS, CSV, and PDF.
Flexible UX: Users can export via the Ribbon, or you can trigger export from your own UI using save method.
Preserves workbook features: Keeps styles, formulas, and formatting in exports.
Server-side processing: Offloads file generation to the backend for better performance.
Customizable export lifecycle: Use events like beforeSave and saveComplete to fine-tune behavior.

If you need simple downloads or heavily formatted exports, this approach scales without forcing you to build export logic from scratch.

Supported file formats

You can export spreadsheet data to:

Microsoft Excel (.xlsx)
Microsoft Excel 97-2003 (.xls)
Comma-Separated Values (.csv)
PDF (.pdf)

How exporting works behind the scenes (server-side)

Syncfusion Spreadsheet export uses server-side processing via the Syncfusion.EJ2.Spreadsheet server library (ASP.NET Core / MVC). The high-level flow looks like this:

The React client sends spreadsheet content to the server as JSON.
The server uses Syncfusion.XlsIO to convert JSON into the target format (XLSX/XLS/CSV/PDF).
The server streams the generated file back to the client.
The client downloads the file (or you can handle it programmatically, e.g., as a Blob).

Note: The export runs in memory during the request lifecycle; no data is stored on the server.

React spreadsheet export workflow using Syncfusion XlsIO

Prerequisites

Before implementing export functionality;

Node.js and npm installed on your machine.
A React development environment set up using tools like VS Code or any preferred IDE.
A React project created (e.g., using create-react-app, Vite, or Next.js).
Syncfusion Spreadsheet component added to your React app.
Syncfusion.XlsIO or equivalent library configured on the backend for file generation.
Backend environment ready (Node.js, .NET, or any server stack) to handle spreadsheet generation and stream the file back to the client.

With the prerequisites ready, we can now integrate the Spreadsheet component and wire it up to the app logic. We’ll now set up the React front end and configure the backend services that will generate and export the spreadsheet files.

Step 1: Set up your React app

Integrate the Syncfusion Spreadsheet component into your React project using the Getting Started guide (install packages, add styles, render the Spreadsheet).

Step 2: Configure backend services for export (required)

Exports rely on a backend service. You have two common options:

Option A: Self-host with .NET (ASP.NET Core)

Best when you want full control over infrastructure and logic.

Follow the guide: Host Open and Save Services for JavaScript Spreadsheet with ASP.NET Core.
Use the GitHub sample: Essential Studio Spreadsheet Web Services

Option B: Deploy the Spreadsheet Server using Docker

Best when you want consistent deployments and easy scaling.

Read: Deploy Syncfusion Spreadsheet Docker Image.
Docker Hub: syncfusion/spreadsheet-server (ASP.NET Core 8.0)

Once your backend is running, configure the Spreadsheet component to point at your endpoints:

openUrl for opening content
saveUrl for exporting/saving content

Exporting approach

Export via Ribbon UI

If you want a familiar, user-driven workflow, the built-in Ribbon is the simplest option:

Go to File → Save As.
Choose a format: XLSX, XLS, CSV, or PDF.
Download the file.

This is ideal when users should control export format without any custom UI work.

Exporting files through the ribbon

Programmatic export with the save Method

When you need more control (custom buttons, workflow-based export, default naming, extra server params), use the Spreadsheet save API.

How the Save workflow operates:

Pick an export format (XLSX, XLS, CSV, PDF) from the dropdown.
The save action calls the save API.
Spreadsheet JSON is posted to the backend for processing.
Use beforeSave and saveComplete to modify routing, performance, or output.

Code example (React)

tsx

import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
…
function Default() {
    let spreadsheet;
    // Initial save type
    let saveType = 'Xlsx';

    // Dropdown data 
    const saveAsOptions = [
     { saveAs: 'XLSX', saveType: 'Xlsx' },
        { saveAs: 'XLS', saveType: 'Xls' },
        { saveAs: 'CSV', saveType: 'Csv' },
        { saveAs: 'PDF', saveType: 'Pdf' }
    ];
    const fields = { text: 'saveAs', value: 'saveType' };

    // Update save type on selection
    const onSaveTypeChange = (args) => {
     saveType = args.itemData[fields.value];
    };

    // Trigger export programmatically
    const onSaveClick = () => {
     spreadsheet.save({
         url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
            fileName: 'Sample',
            saveType: saveType,
            // Optional (PDF): customize PDF layout if saveType === 'Pdf'
            // pdfLayoutSettings: { orientation: 'Landscape', fitSheetOnOnePage: true }
        });
    };

    // Fires before save; great place to customize behavior
    const onBeforeSave = (args) => {
        // Disable full form submission to improve performance on large workbooks
        args.isFullPost = false;

        // Example: send custom data to the server
        // args.customParams = { tenantId: 'contoso', exportSource: 'marketing' };

        // Example: request Blob data back (for custom handling in saveComplete)
        // args.needBlobData = true;
    }; 

    // Fires after save completes if isFullPost is false
    const onSaveComplete = (args) => {
        // Example: show a toast or handle Blob
        // if (args.blobData) { uploadToServer(args.blobData); }
        console.log('File saved successfully', args);
    }; 
    …  
    return (
        <div className='control-pane'>
         <DropDownListComponent
                dataSource={saveAsOptions}
                fields={fields}
                width="100px"
                change={onSaveTypeChange}
                index={0}
            />
            <ButtonComponent cssClass="save-btn" onClick={onSaveClick}>Save</ButtonComponent> 
            <div className='control-section spreadsheet-control'>
             <SpreadsheetComponent
                    openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'
                    saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
                    ref={(ssObj) => { spreadsheet = ssObj; }}
                    created={onCreated}
                    beforeSave={onBeforeSave}
                    saveComplete={onSaveComplete}
                > 
                 <SheetsDirective> 
                     <SheetDirective name="Car Sales Report">
                         …
                            …
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
        </div>
    );
}

Key Highlights:

Dynamic format selection: The dropdown updates the saveType based on user input.
Performance optimization: The beforeSave event disables full form submission (isFullPost = false)
for better performance exports. This switches the request to a lightweight fetch call, making the export faster and more reliable, especially with large workbooks.
Custom server endpoint: The export is sent to Syncfusion’s hosted service, but you can replace the url with your own backend if self-hosted.
PDF customization: You can optionally pass pdfLayoutSettings to control orientation and layout.

You can see this feature in action with the Live demo, and for more technical details, check out the API guide for save method.

Note: The Spreadsheet component supports multiple save workflows. Beyond downloading directly, you can save the file as a Blob, or send exported files to a server.

Export events you can customize (most useful hooks)

Syncfusion gives you powerful hooks to customize the export process through two key events: beforeSave and saveComplete. These events let you fine-tune how exports behave, add custom logic, or even intercept the process entirely.

beforeSave event

Runs right before export starts. Use it to:

Override file name/format or change the target saveUrl.
Pass custom parameters to your backend (customParams).
Cancel export (args.cancel = true).
Improve performance by switching to fetch-based export (args.isFullPost = false).
Request Blob data for custom handling (args.needBlobData = true).
Customize PDF Layout (layout/orientation via pdfLayoutSettings).

saveComplete event

Runs after export completes (especially when isFullPost = false ). Use it to:

Show a toast or success message.
Access Blob data (if requested) for uploads or alternate storage flows.
Trigger logging/analytics hooks in your app.

Enterprise considerations (performance, scalability, maintainability)

Performance: For larger workbooks, set args.isFullPost = false in beforeSave to avoid heavier form-style submissions.
Scalability: Host the export service in your own infrastructure (or Docker) so you can scale independently from the React frontend.
Maintainability: Keep export logic centralized on the server. The client stays thin: it sends workbook JSON and receives a file stream back.
Security: Exports run in memory during the request lifecycle; design your endpoints with auth, rate limits, and auditing if you handle sensitive data.

Frequently Asked Questions

1. How do I enable export functionality in my project?

A: Enable the export feature by configuring the saveUrl property to point to your backend export service. The backend must use Syncfusion’s Open and Save service or your own ASP.NET Core service to handle file generation.

2. Can I customize the export process?

A: Yes. You can use lifecycle events such as beforeSave to modify parameters, change file names, customize formats, or cancel exports. You can also use saveComplete to trigger notifications, analytics, or follow-up actions after successful export.

3. What export options are available besides downloading from the Ribbon UI?

A: You can export using custom UI buttons, save the file as a Blob, send exported files to a server, or generate Base64 output for advanced workflows. These methods allow full control over export behavior depending on your application’s requirements.

4. Are formatting and formulas preserved during export?

A: Yes. Exported Excel files retain formatting such as fonts, colors, borders, alignment, merged cells, and conditional formatting. Formulas, values, and data validation rules are also preserved in supported formats.

5. Is there a Docker image available for easy deployment of the export server?

A: Yes, Syncfusion offers a pre-built Docker image on Docker Hub based on an  ASP.NET Core  project, which requires no additional .NET code from your side. Configure your React app’s saveUrl to point to this containerized server for file exports (e.g., for Excel/CSV processing). It’s lightweight, secure, and deployable on any platform supporting Docker, like Kubernetes or AWS EKS.

Conclusion

Thank you for reading! Exporting Excel, CSV, and PDF from React apps is fast and reliable with the Syncfusion React Spreadsheet. Use the Ribbon for a familiar user experience, or use the save() method for full control in custom UIs. With beforeSave and saveComplete, you can optimize performance, pass custom parameters, and support advanced workflows like Blob-based handling, while keeping export generation reliable on the server.

Try it out today and let us know your thoughts in the comments!

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forums, support portal, or feedback portal for queries. We are always happy to assist you!

Reference links

Syncfusion React Spreadsheet Documentation
Open and Save Files in React Spreadsheet
Performance best practices
Other save options: Save as Blob, Save as Base64, Save to server, Add custom headers, Configure JSON serialization

Related Blogs

This article was originally published at Syncfusion.com

How to Diagnose and Fix Font Issues in a JavaScript PDF Viewer

Lucy Muturi — Tue, 03 Mar 2026 14:55:40 +0000

TL;DR: PDF font issues in JavaScript PDF Viewer typically occur due to missing embedded fonts, browser differences, corrupted font data, or unsupported multilingual scripts. This guide explains common causes and shows how Syncfusion’s JavaScript PDF Viewer, powered by the Pdfium engine, ensures accurate, multilingual, and custom‑font rendering across browsers.

Accurate font rendering in PDFs isn’t “nice to have.” It affects readability, layout, branding, and sometimes compliance, especially for invoices, contracts, reports, and multilingual documents.

The tricky part: PDF font rendering in the browser is deceptively complex. Many apps look fine until a production document triggers a JavaScript PDF viewer font problem, like:

PDF text garbled or scrambled.
PDF font replaced or incorrect.
Missing fonts in PDF Viewer.
PDF shows boxes/tofu squares instead of characters.
Layout shifts between Chrome, Firefox, and embedded viewers.

If you’re hitting “PDF font issues in JavaScript PDF Viewer”, this guide breaks down the most common technical causes, what to check, and practical ways to fix it using Syncfusion^® JavaScript PDF Viewer.

Why PDF font not display in browser-based viewers

There were several reasons that affected the font rendering in the JavaScript PDF Viewers. Here are the most common technical reasons for broken fonts and PDF font display problems.

Font embedding and cross‑viewer rendering differences in PDFs

If a PDF references a font but doesn’t embed it, the viewer must substitute a system font. Substitution often fails for corporate fonts, decorative fonts, or fonts with unusual metrics, leading to spacing issues, line breaks changing, or glyphs missing entirely.

Even when fonts are embedded, different viewers may interpret font programs and encodings differently. That’s why developers often see “works in Adobe Acrobat but breaks in browser viewer” scenarios.

Real-world examples show this mismatch across viewers and browsers:

Reddit: “PDF viewer is not detecting the fonts correctly, but Google PDF viewer / Adobe shows correct fonts.” Ref: PDF viewer’s fonts issues: r/zen_browser

Broken fonts in Browser PDF viewers

GitHub: “The issue occurs in Chrome, but not Firefox.” Ref: Text appears broken · Issue #2950 · stephanrauh/ngx-extended-pdf-viewer

PDF fonts render differently in Chrome vs Firefox

What to do

Prefer PDFs with embedded fonts (especially for generated PDFs).
Validate the PDF’s font embedding and encoding if you control the PDF generation pipeline.
Test across browsers early to catch cross browser PDF compatibility issues.

CJK/complex scripts and “Base‑14” assumptions

Languages like Chinese, Japanese, and Korean (CJK) and complex scripts like Arabic/Hebrew depend on correct font selection, shaping rules, and glyph mapping. Some PDFs also rely on assumptions around common built-in fonts (like Helvetica/Times), but those assumptions don’t always hold in browser-based renderers.

This is where you’ll often see:

tofu squares (missing glyphs)
incorrect character widths (layout drift)
broken shaping or direction for RTL text

References from PDF.js-related issues highlight these edge cases:

User-reported discussion on PDF.js font rendering issues

Chinese text renders incorrectly in PDF.js but works in Adobe

What to do

Ensure PDFs include proper font programs and mappings for the target scripts.
For multilingual apps, treat font rendering as a first-class test scenario (CJK + RTL + mixed-language documents).

Font data issues in PDFs: Corrupt streams and subset mapping

PDFs often use subset fonts (only embedding glyphs that are used). That’s normal, but it increases reliance on correct mapping tables. If font streams are malformed, compressed oddly, or mappings are incomplete, some viewers fail to map glyphs correctly, leading to random characters, missing symbols, or messy spacing.

Developers frequently report issues like this in popular JavaScript viewer stacks:

Garbled text caused by corrupted font streams in PDF.js

What to do

If the same PDF renders differently across viewers, suspect font stream parsing or subset mapping.
Try rendering the same file in multiple engines to isolate whether it’s a PDF issue or a viewer limitation.

How it works (why font rendering is hard in JavaScript viewers)

A browser PDF viewer typically has to:

Parse PDF objects (including font dictionaries, encodings, and streams).
Decode embedded font programs (TTF/OTF/CFF/CID fonts).
Map character codes to glyphs (often via ToUnicode maps).
Apply shaping/direction rules for complex scripts.
Rasterize or draw text consistently across browsers and devices.

Small differences in any step can cause “looks fine here, broken there” behavior.

Fix checklist: What to try before switching viewers

Use this as a practical debugging flow:

Confirm fonts are embedded (especially custom/corporate fonts).
Test across Chrome + Firefox + Edge with the same file.
Try a known-good viewer (Adobe Acrobat / Chrome built-in) to compare output.
Check if the PDF is subset-heavy and whether ToUnicode mappings exist.
Re-generate the PDF (if you own the pipeline) with explicit embedding and standard encodings.
Collect a minimal repro PDF (one page, one problematic font) to speed up debugging.

If you don’t control the PDFs (common in enterprise), the most reliable fix is often choosing a viewer that handles real-world font edge cases consistently.

How Syncfusion resolves PDF font issues in JavaScript PDF Viewer

Syncfusion addresses this with intelligent font handling and robust support for embedded and custom fonts, enabling your documents to appear exactly as intended, every time they’re viewed.

Pdfium font rendering engine for consistent output

Syncfusion JavaScript PDF Viewer uses the Pdfium rendering engine, an industry-standard library from the Chromium project renowned for its precise font rendering. This eliminates common font issues in JavaScript PDF Viewer and ensures flawless display across browsers.

By leveraging Pdfium, Syncfusion accurately preserves every character, symbol, and layout, along with high-fidelity images and graphics, ensuring PDFs display flawlessly across all browsers and devices without issues like blurry text, missing glyphs, or broken layouts.

PDFium ensuring proper font rendering in a JavaScript PDF viewer

Multilingual PDFs and Unicode characters (CJK + RTL)

Global businesses require support for diverse languages and special characters. Syncfusion’s PDF Viewer excels in rendering in global languages, unique characters, solving pdf font display problems for CJK and right-to-left scripts.

CJK (Japanese/ Chinese/ Korean) languages have unique font structures and character sets. Syncfusion loads these fonts from the server side, ensuring accurate representation.
Right-to-left languages like Arabic and Hebrew with proper text direction and alignment.
Unicode support for symbols, emojis, and special characters.

RTL text rendering (Arabic) in JavaScript PDF viewer

Custom font rendering (bring your own TTF resources)

Syncfusion JavaScript PDF Viewer supports rendering the custom fonts in the PDF with the respective resources. To view PDFs containing custom fonts in the Syncfusion PDF Viewer, simply place your TTF font files in the designated resource URL directory and configure the viewer to access them. This ensures your documents display every unique font exactly as designed.

Example code for custom fonts:

JavaScript

// Create PdfViewer instance and configure with document path, resource URL, and custom fonts
var pdfviewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf_font.pdf',
    resourceUrl: 'https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib',
    customFonts: [ 
        "arialbd.ttf",
        "arial.ttf",
        "BKANT.TTF",
        "calibri.ttf",
        "GARA.TTF",
        "GARAIT.TTF",
        "msgothic.ttc",
        "trebuc.ttf",
        "wingding.ttf"
    ]
});
// Render the PDF Viewer control to the target HTML element
pdfviewer.appendTo('#PdfViewer');

GitHub reference

You can find a detailed reference sample for custom font rendering here. This solution ensures that the custom font rendering in JavaScript PDF Viewer with own TTF resource.

For deeper insights, explore our comprehensive user guide, which includes extensive documentation, live demo, advanced usage scenarios, and the full suite of powerful features available in the Syncfusion PDF Viewer.

Empower your applications with industry-leading accuracy, flexibility, and seamless integration, starting today.

Frequently Asked Questions

1. Does any local installations required to use the Syncfusion JavaScript PDF Viewer?

A: No, you don’t need any local installation. The Syncfusion JavaScript PDF Viewer runs in the browser, and you just include the Syncfusion scripts and resources alone in your web project.

2. Does the Syncfusion viewer allow text selection and text search inside a PDF?

A: Yes. If the PDF contains real text (not scanned images), you can select text and use the built‑in search feature. For scanned PDFs, you can convert them into searchable text using Syncfusion’s OCR PDF library.

3. Can Syncfusion display PDFs that contain form fields?

A: Yes! It supports text fields, checkboxes, radio buttons, dropdowns, and signature fields. You can fill and save form fields directly in the browser.

4. Does Syncfusion PDF Viewer support dark themes?

A: Yes. You can apply Syncfusion themes like Material Dark, Fluent Dark, Bootstrap Dark, etc., and the viewer UI adapts automatically.

5. Is any additional configuration required for PDFs that use special or custom fonts?

A: Yes, only if the PDF uses custom fonts that aren’t embedded. In that case, you place the font files on your server and tell Syncfusion where to find them.

6. Can Syncfusion PDF Viewer display fonts with special characters, emojis, or multi‑colored fonts?

A: Yes. The Syncfusion PDF Viewer can display multi‑color fonts, special characters, emojis, and other advanced font styles, as long as those font elements are already embedded in the PDF.

Conclusion

Thank you for reading! Font rendering in PDFs isn’t just cosmetic; it affects usability, branding, and compliance. Syncfusion JavaScript PDF Viewer offers a robust, developer-friendly solution with server-side rendering, multilingual support, and custom font handling. It ensures that every PDF, no matter how complex, is displayed accurately and beautifully, solving PDF font rendering issues and ensuring cross-browser PDF compatibility.

Ready to upgrade your PDF viewer? Try Syncfusion JavaScript PDF Viewer today and deliver a professional, polished experience your users will love.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forums, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com

SDKs vs APIs vs JavaScript: Modern Document Processing in 2026

Lucy Muturi — Fri, 27 Feb 2026 14:54:54 +0000

TL;DR: Modern document workflows in 2026 typically rely on three approaches: high-performance SDKs, scalable Docker-based Web APIs, and flexible JavaScript or Node.js tools. Each addresses different needs around performance, scalability, and user experience. This guide compares the trade-offs, explains when to use each approach, and shows why many teams now combine them to build faster, cloud-ready, and future-proof document-processing systems.

Document processing is now a core feature in modern apps, from generating invoices and contracts to powering real-time PDF review and web-based document editing. But expectations have changed. Teams want automation that is reliable, scalable, and compatible with both traditional deployments and cloud-native platforms.

In 2026, most developers choose one of three approaches:

SDKs that run directly inside applications deliver raw speed and handle heavy workloads efficiently.
Web APIs packaged as Docker containers help teams scale document processing easily across microservices.
JavaScript/Node.js solutions for web‑based, interactive experiences provide rich in‑browser viewing and editing without requiring additional installations.

The real question isn’t “Which is best?” It’s “Which approach aligns with your workload, architecture, and UX requirements, and where does it make sense to combine them?”

The best part is that Syncfusion^® supports all three approaches, giving teams a single, reliable solution for any document‑processing workflow.

The 2026 dilemma: Speed, Scale, or Flexibility?

Microsoft Office or Adobe‑based pipelines often struggle to keep up with modern automation demands, frequently introducing errors and bottlenecks.

Document workloads keep getting more complex:

Multiple formats: PDF, DOCX, XLSX, PPTX.
More automation: Merge, split, convert, redact, sign, extract.
Higher reliability requirements: Fewer failures, fewer “works on my machine” issues.
More security pressure: sensitive documents, controlled environments, compliance needs.

Often create bottlenecks, add manual steps, and introduce dependency issues in server environments.

So teams end up deciding two things:

Where does processing happen? In-process vs over HTTP vs in the browser.
How does it scale? Single service vs microservices vs client-side offload.

3 approaches to modern document processing

Each model plays a distinct role in meeting specific performance and scalability needs, which we’ll explore in detail below.

SDKs as the high-performance backbone

If you need low latency and high throughput, SDKs are usually the most direct path. They run inside your application process, so you avoid network overhead and keep tight control over document behavior.

Syncfusion provides a complete .NET Document SDK for programmatic processing across common formats, without any Microsoft Office dependencies.

PDF Library: Create, edit, merge, split, secure, and convert PDFs. You can process PDF files with advanced features like forms, OCR, redaction, digital signatures, and PDF/A compliance, all without relying on Adobe Acrobat.
Word Library (DocIO): Create, edit, and convert Word documents with formatting, mail merge, charts, images, document protection, and PDF export.
Excel Library (XLSX): Create and modify spreadsheets, import and export data, use formulas, generate charts and pivot tables, apply conditional formats, and convert workbooks to PDF.
PowerPoint Library (PPTX): Build slide decks, update content, add images, create charts, apply animations and transitions, clone or merge slides, and export presentations to PDF.

Why SDKs win

Best fit for performance-critical services (conversion pipelines, batch jobs, high-volume generation).
Strong option for restricted environments (no desktop installs, fewer moving parts).
Deep APIs for document manipulation and compliance workflows.

Unlock advanced PDF, Word, Excel, and PowerPoint automation with standalone, high‑performance libraries built for enterprise workloads. → Explore Syncfusion’s complete .NET Document Processing Suite.

Prefer building interactive, UI-driven document experiences instead of using libraries alone? Syncfusion offers UI controls you can pair with the Document Libraries to create complete, end‑to‑end document workflows. Each UI SDK requires its own separate license and is not included with the Document SDK. If your application needs a fully interactive UI, the UI SDK is the right choice. For automation or server‑side processing, the Document SDK alone is sufficient.

PDF Viewer SDK: View, annotate, review, and redact PDFs directly in the browser.
DOCX Editor SDK: Create and edit Word documents online with full formatting, track changes, and comments.
Spreadsheet Editor SDK: Work with Excel-like spreadsheets online with formulas, formatting, and charts.

Cloud Native Scalability Web APIs (Docker)

Using a ready-to-use Docker image for document processing is a popular approach because it provides a consistent, portable, and easy-to-deploy environment. If your architecture is microservice-oriented or you need document processing accessible from multiple stacks Web APIs (Docker) are often the cleanest option.

Dockerized APIs give you:

A consistent runtime across dev/stage/prod.
Easier scaling (run more containers when demand spikes).
Language-agnostic access (anything that can call HTTP can use it).

Syncfusion’s Docker-based Document Processing Web APIs are positioned for teams that want a ready-to-deploy container model, with benefits like:

Preconfigured and ready to use: Everything is included, so you can start processing documents immediately without manual setup.
Scales easily: Add more containers to handle higher workloads while keeping performance steady.
Runs anywhere Docker runs: Ensures consistent behavior across dev, staging, and production.
Secure by design: Host the API in your own infrastructure for full control over authentication, network rules, and compliance.
Flexible and customizable: Extend the image or adjust configurations to fit your project’s needs.

When APIs win

You need document processing shared across multiple services or languages.
You want predictable deployments and cleaner CI/CD.
You prefer to centralize document logic behind versioned endpoints.

Ready to deploy Syncfusion’s Document Processing Web APIs in Docker? Start with the official Docker setup guide.

JavaScript & Node.js for Interactive and Collaborative Apps

Using JavaScript and Node.js for document processing is increasingly popular because it enables fast, interactive, and fully client‑side workflows. With this approach, applications can generate and modify PDFs directly in the browser or in Node.js without relying on servers, plugins, or external software. This makes the experience lightweight, secure, and ideal for modern, real‑time, collaborative web applications.

Syncfusion’s JavaScript PDF Library enhances this approach by offering:

A pure JavaScript PDF engine that works entirely in the browser with zero installation.
Unified API for both browser and Node.js, allowing client and server workflows to share the same code.
No server dependencies, making deployments simpler, faster, and more secure.
Full PDF creation and editing features, including loading, editing, saving, and working with password‑protected files.
Rich PDF enhancements such as adding text, images, shapes, hyperlinks, bookmarks, annotations, and form fields.
Advanced operations, including flattening, merging, splitting, redaction, text extraction, image extraction, and layer management.
Support for digital signatures, enabling secure authentication and integrity checks.

Want to see the JavaScript PDF Library in action? Try the JavaScript PDF Library.

Document Processing SDK vs Web API vs JavaScript — Comparison Table

Choosing the right document processing model depends on your performance needs, deployment style, and user experience goals. Here’s a simple table to help you decide the best approach for your needs.

Decision Factor	.NET Document Processing SDKs	Web APIs (Docker)	JavaScript / Node.js
Performance	Fastest in‑process execution (no HTTP overhead)	Slight overhead due to HTTP requests	Fast in-browser; Node.js suitable for light–moderate workloads
Setup Requirements	No Office/Acrobat required; works fully standalone	Requires Docker + hosting environment	Zero install in browser; Node.js runtime for server usage
Best For	High‑performance backend automation in .NET	Cloud‑native, microservice‑based architectures	Interactive, real‑time client experiences
Access Model	In‑app library calls	HTTP API accessible from any stack	Browser APIs + Node.js APIs
Scalability	Scales by app instance	Horizontal scaling by adding containers	Browser scaling depends on client device; Node.js can scale
Cross‑Platform Use	.NET-only	Any language that can call HTTP	Browser + Node.js (JavaScript ecosystems)
Ideal Workloads	Generation, conversion, protection, signing, heavy document processing	High‑volume conversion/extraction shared across teams	In‑browser viewing, annotation, collaboration, client‑side workflows
When to Choose	You need maximum speed & deep control; automation-centric	You need shared processing across teams or stacks; microservices	You want real-time UX or privacy‑focused client-side operations

What the future suggests: Hybrid models win

Most modern document apps don’t pick only one approach. They combine them to get speed, scale, and UX.

Below are two practical hybrid patterns you can use.

SDK backend + JS frontend
- Use .NET SDKs for high-speed creation/conversion/redaction/signing on the server.
- Use in-browser JS for viewing, forms, annotations, and interactive review.
- Optionally perform some edits fully in the browser using a JS PDF library.
- This pattern keeps heavy processing server-side while giving users a responsive UI.
Docker API + in-browser editors
- Run document processing as Dockerized Web APIs for scalable conversions and operations
- Pair with browser-based viewing/editing for real-time interaction
- This pattern works well for microservices and multi-language organizations.

With Syncfusion supporting SDKs, Docker‑based Web APIs, and JavaScript tools, you can mix and match to achieve the right balance of speed, scale, and user experience without locking yourself into a single approach. Syncfusion also offers UI controls like the PDF Viewer, DOCX Editor, and Spreadsheet Editor, which you can pair with any model to deliver rich in‑app viewing and editing experiences.

Frequently Asked Questions

1. Is client-side JavaScript PDF processing secure enough for sensitive documents?

A: Client‑side processing improves privacy** because documents never leave the user’s device. Sensitive PDFs (medical forms, financial statements, legal drafts) can be viewed, annotated, and redacted safely without hitting a backend.

2. Are Docker-based document processing APIs suitable only for large enterprises?

A: No. Even small products benefit from Web APIs because containers eliminate dependency headaches. Whether you run a single instance or thousands, Docker gives you predictable behavior and easy deployment—ideal for both startups and enterprise workloads.

3. Can Docker-based document APIs replace SDKs process entirely?

A: Not fully. Docker‑based Web APIs scale easily and centralize document processing, but SDKs still offer the lowest latency because they run in‑process with no network calls. Many teams use Docker APIs for high‑volume workloads and SDKs for performance‑critical tasks inside core services. To learn more, see the Docker Image Hosting Guideand the Ready to deploy Docker Image for Syncfusion document processing APIs.

4. Do JavaScript libraries require Web Assembly or plugins to process PDFs?

A: No. Syncfusion’s JavaScript PDF Library is a pure JS, non-UI library—no plugins or Web-Assembly needed. It supports full PDF manipulation: create, edit, annotate, sign, redact, merge, split, and more.

5. Will Self-Hosted APIs lock me into a single tech stack?

A: No. Because Web APIs are language‑agnostic (HTTP endpoints), they can be used from Java, Python, Go, Node.js, PHP, .NET, or anything else. This makes the API approach ideal for large teams using multiple stacks.

6. Are the UI components easy to integrate?

A: Yes. Syncfusion’s UI components come with simple APIs, clear documentation, and ready-made examples, so you can add viewing or editing features to your app quickly and with minimal effort.

Conclusion

Thank you for reading! Document processing in 2026 isn’t about choosing one tool. It’s about choosing the right execution model for each part of your workflow.

Pick SDKs for speed, deep control, and dependency-free backend automation.
Pick Web APIs (Docker) for cloud-native scaling and cross-stack reuse.
Pick JavaScript/Node.js for interactive, zero-install browser experiences.
Use a hybrid when you need both backend power and frontend UX.

Syncfusion supports all three approaches: .NET SDKs, Docker-based Web APIs, and JavaScript/Node libraries, so teams can implement the architecture that fits their product without re-platforming later.

Ready to Power Your Apps with Syncfusion’s Document SDK? Explore the complete Syncfusion Document Processing Suite.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com