Forem: Lucy Muturi

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

Accelerate Enterprise UI Development with Syncfusion MCP Servers

Lucy Muturi — Tue, 24 Feb 2026 09:43:03 +0000

TL;DR: Syncfusion MCP Servers now power the newly introduced Agentic UI Builder, enabling developers to generate complete enterprise UI layouts for React, Angular, and Blazor directly inside their IDE. Combined with the AI Coding Assistant, MCP Servers deliver accurate, documentation-backed UI development from components to full pages.

Enterprise UI development often slows down not because of complexity, but because of fragmentation. Developers constantly switch between documentation, component APIs, layout patterns, theming rules, and icon references, then manually assemble everything inside the IDE. Even with AI-powered editors, results can be inconsistent unless the AI has reliable, component-specific context.

Syncfusion^® MCP Servers were introduced to solve this problem by grounding AI developer tools in verified Syncfusion component knowledge. Until now, this foundation powered the AI Coding Assistant, enabling accurate component-level code generation and troubleshooting.

Today, Syncfusion introduces a major new capability built on top of MCP Servers: the Agentic UI Builder. With Agentic UI Builder, developers can now generate complete enterprise UI layouts, pages, dashboards, and application scaffolding directly inside their IDEs for React, Angular, and Blazor.

This guide introduces the Agentic UI Builder, explains how it works with Syncfusion MCP Servers, and shows how it complements the AI Coding Assistant for faster, more reliable UI development.

What is Syncfusion MCP Server?

Syncfusion MCP Server is a lightweight, framework-specific Model Context Protocol (MCP) server that connects AI developer tools to real Syncfusion component expertise.

When enabled in an MCP-capable IDE, the server provides AI tools with direct access to:

Syncfusion component APIs (properties, events, methods, patterns)
Pre-built UI layout blocks (dashboards, headers, sidebars, forms)
Theme and styling guidance across popular design systems
A comprehensive icon library with usage and accessibility guidance

The goal is simple: eliminate guesswork and reduce time spent searching documentation, without leaving the IDE.

What’s new: Introducing the Agentic UI Builder

While the AI Coding Assistant focuses on individual components, the Agentic UI Builder represents a shift toward end-to-end UI generation.

The Agentic UI Builder (New)

The Agentic UI Builder is a newly introduced capability that enables developers to describe an entire page or workflow and receive a fully structured, production-ready UI layout.

It is currently available for:

Support for additional frameworks is actively in progress.

Together, Syncfusion MCP Servers now power two complementary experiences:

Agentic UI Builder generates complete pages, layouts, and dashboards.
AI Coding Assistant handles precise component implementation and troubleshooting.

Why Agentic UI Builder matters

Traditional AI assistance often stops at code snippets. The Agentic UI Builder goes further by coordinating multiple aspects of UI creation at once.

Instead of assembling layouts manually, developers can now:

Generate responsive layouts in a single prompt
Use correct Syncfusion components automatically
Apply consistent theming and icon usage
Align with proven enterprise UI patterns

This reduces UI setup time from hours to minutes, without sacrificing correctness.

Key benefits of Syncfusion MCP Servers

Syncfusion MCP Servers unlock several enterprise-ready advantages:

Verified component intelligence: AI tools work with real Syncfusion metadata, not generic assumptions.
Design system alignment: Built-in guidance for Tailwind CSS, Bootstrap 5.3, Material 3, and Fluent 2 (including light and dark themes).
Pre-built UI blocks: Reusable layouts for common enterprise screens.
Comprehensive icon library: 600+ icons with integration and accessibility best practices.
Unlimited usage: No request limits or time caps.
Privacy-focused design: MCP Servers do not access project files, store prompts, or train models.

Now, let’s walk through configuring the Syncfusion MCP Server for React in a real setup.

Prerequisites

Before getting started, ensure you have:

An AI-powered IDE that supports Model Context Protocol (MCP)
Node.js v18+ and npm
A React project (optional, recommended for applying generated UI and code)

Installing and configuring the Syncfusion MCP Server (React)

To invoke the Syncfusion MCP Server, configure your MCP client with the following settings:

npm package: @syncfusion/react-assistant
Type: stdio
Command: npx
Arguments: -y @syncfusion/react-assistant@latest

Provide your Syncfusion API key via an environment variable in the configuration file.

JSON

"env": {
    "Syncfusion_API_Key": "YOUR_API_KEY"
}

VS Code configuration (mcp.json)

Create a .vscode folder in your project root (if needed).
Add a file named mcp.json.
Paste the configuration below and set your API key:

JSON

{
    "servers": {
        "syncfusion-react-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@syncfusion/react-assistant@latest"
            ],
            "env": {
                "Syncfusion_API_Key": "YOUR_API_KEY"
            }
        }
    }
}

Start the server from your IDE’s MCP panel.
Confirm it’s running (you should see: “Syncfusion AI Tools MCP Server is running…”)

For other IDEs (Cursor, Windsurf, JetBrains), follow their MCP configuration guidelines.

Using MCP-Powered tools in your IDE

To activate the tools, start your prompt with one of these mode tags:

#sf_react_ui_builder for complete pages and dashboards.
#sf_react_assistant for component-level tasks and troubleshooting.

In VS Code, the mode tag explicitly selects the tool. You then describe your requirement in plain language, and the IDE returns React code aligned with Syncfusion best practices.

Example prompts

Agentic UI Builder

Prompt

#sf_react_ui_builder
Build a responsive admin dashboard with a left sidebar, top header, and a main grid with filtering and paging. Use Tailwind and dark mode.
#sf_react_assistant
Show how to configure a Syncfusion React Grid with remote data, sorting, and server-side paging. Include key props and events.

AI Coding Assistant

Prompt

#sf_react_assistant
Show how to configure a Syncfusion React Grid with remote data, sorting, and server-side paging. Include key props and events.

How the Agentic UI Builder works

When you describe a UI, the Agentic UI Builder coordinates multiple specialized capabilities:

Layouts: responsive page structure and UI blocks
Components: correct Syncfusion controls and configuration
Styling: design systems, themes, and icon usage

Sub-tools you can target

1. Layout Tool (`#sf\_react\_layout`)

Generates responsive UI patterns and page structures.

2. Component Tool (`#sf\_react\_component`)

Provides detailed guidance for Syncfusion React components.

3. Styling Tool (`#sf\_react\_style`)

Applies Tailwind or Bootstrap themes, dark mode, and icon integration.

Note: If users want to create a UI similar to existing React UI blocks, you can use this tool to achieve it.

AI Coding Assistant: Precision at the component level

The AI Coding Assistant remains the go-to tool for accuracy and speed when working on individual components.

Use it to:

Generate fully configured components
Add features like sorting, paging, or filtering
Troubleshoot configuration issues
Create minimal working examples

Framework support

The Agentic UI Builder is currently available for React, Angular, and Blazor, enabling end-to-end UI generation using Syncfusion’s pre-built layouts, components, and design system guidance. Support for additional frameworks is actively in progress and will be rolled out in upcoming releases.

Alongside this, the AI Coding Assistant already supports a broader range of frameworks and platforms, including React, Angular, Blazor, JavaScript, Vue, ASP.NET Core, ASP.NET MVC, .NET MAUI, WPF, WinUI, WinForms, Document SDK, PDF Viewer SDK, and Spreadsheet Editor SDK.

This means you can start benefiting from Syncfusion’s component-level guidance, code generation, and troubleshooting today while more Agentic UI Builder capabilities continue to expand across frameworks.

Best practices for effective usage

Use strong models, for example: Claude Sonnet 4.5, GPT-5 series, or equivalent Gemini models.
Be specific: mention the component name, desired design system, layout constraints, and data source shape.
Review and test the generated code before deploying to production.
Iterate freely. Unlimited usage makes it practical to refine prompts until the UI matches your requirements.

Privacy and security

Syncfusion MCP Servers are designed to keep your code and prompts private:

The tools do not access your project files or workspace contents.
Prompts are not stored or used for training.
The MCP server functions as a knowledge bridge between your IDE and Syncfusion’s component expertise.

Troubleshooting

If you run into issues while using Syncfusion MCP Server, try the following:

API key: Confirm Syncfusion_API_Key is set correctly in your MCP server config.
Server started: Verify the MCP server is running in your IDE’s MCP panel.
IDE support: Confirm your IDE supports MCP and that MCP is enabled.
Restart: Restarting the IDE often clears stuck MCP processes or stale configs.

Uninstallation

Need to remove Syncfusion MCP Server?

Delete the mcp.json file from .vscode (or your IDE’s MCP config location).
Restart your IDE.

Frequently Asked Questions

1. What's the difference between Agentic UI Builder and AI Coding Assistant?

A: Use Agentic UI Builder for creating complete pages, dashboards, and full interfaces from scratch with coordinated tools for layout, components, styling, and icons. Use AI Coding Assistant for integrating Syncfusion component knowledge directly into your development workflow, perfect for implementing individual components, troubleshooting integration issues, and accessing API documentation on-demand.

2. Are there usage limits or charges for using Syncfusion MCP Server?

A: Syncfusion MCP Server Tools are free with unlimited usage. The MCP server connects your development environment to Syncfusion's enterprise component library and documentation. All code generation happens through your IDE's AI assistant (like Claude in Cursor or GitHub Copilot), so there are no additional charges, token limits, or request caps from Syncfusion. You'll only pay for your AI provider's service if you're using a paid IDE or LLM subscription.

3. How is my data protected?

A: The tools don't access project files or workspace contents directly. User prompts are not stored or used for training. The MCP server acts as a knowledge bridge while respecting your privacy.

4. How do Syncfusion MCP Server Tools interact with my existing code?

A: Syncfusion MCP Server Tools generate code suggestions that respect your project structure and coding conventions. The assistants provide implementation guidance through your IDE's AI, allowing you to review and accept changes before they're applied. You maintain full control—the MCP server provides context and recommendations, but all code modifications require your approval through your IDE's interface.

Conclusion

The introduction of the Agentic UI Builder marks a major step forward in how enterprise UIs are built with Syncfusion. Powered by Syncfusion MCP Servers, developers are no longer limited to generating isolated code snippets or individual components. Instead, they can now create complete, structured, and design-consistent application UIs directly inside their IDE.

By combining the strengths of the Agentic UI Builder for full UI generation and the AI Coding Assistant for precise component-level implementation, Syncfusion MCP Servers provide a unified, AI-driven development experience. The result is faster UI development, fewer integration errors, and consistent use of Syncfusion’s enterprise-grade components across frameworks such as React, Angular, and Blazor.

For teams building large-scale applications, this means spending less time assembling UI foundations and more time focusing on business logic, performance, and user experience. As support expands to more frameworks and scenarios, Syncfusion MCP Servers, and the Agentic UI Builder built on top of them, set a new standard for AI-assisted enterprise UI development.

If you have any questions or feedback, reach out through our support forum or feedback portal. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com

Agentic AI in Software Development: From Coding to Orchestration

Lucy Muturi — Thu, 19 Feb 2026 14:05:38 +0000

TL;DR: Agentic AI in software development introduces autonomous agents that can set goals, plan steps, execute tasks, and adapt with less constant prompting. This shifts developers from pure coding to designing intelligence: orchestration, workflow redesign, evaluation, and enterprise governance (security, auditability, cost controls). Organizations are experimenting widely, but scaling remains limited, so teams that redesign workflows and build responsible guardrails will get the biggest impact.

Shipping software has always been more than writing code. But now the gap is widening: teams must engineer systems that can take initiative, not just generate snippets.

AI has moved from “experimental” to operational. McKinsey reports that 88% of organizations use AI in at least one business function (2025) (McKinsey & Company).

Source - McKinsey & Company

The next step is not simply smarter assistants. It’s Agentic AI that can plan, act, and adapt toward a goal. That changes your job from pure execution to orchestration, designing how autonomous systems behave, collaborate, and stay safe.

What is Agentic AI (and why developers should care)

Agentic AI refers to AI systems that behave like autonomous agents. They can:

Plan steps toward a goal.
Reason about tradeoffs and constraints.
Execute tasks using tools without frequent human input (repos, CI, tickets, APIs).
Adapt when conditions change (errors, failing tests, new requirements).

Traditional AI usage often looks like:

Prompt → Output

Agentic AI flips workflow into a loop:

Agent → Goal → Plan → Execute → Adapt

What agentic looks like in real dev work

You’ve probably seen early versions of this already:

Coding assistants that attempt fixes and re-run tests.
Testing bots that plan entire test suites based on code changes.
Release agents that manage CI/CD pipelines and roll back deployments automatically.

These aren’t just chat tools. They operate against objectives, not only prompts.

Why it matters for developers

Agentic AI in software development is a paradigm shift:

You design systems of behavior, not just functions and classes.
You care more about reliability, observability, and guardrails.
You must consider ethics, security, and accountability, as agents can take actions.

Industry insights: McKinsey’s 2025 AI Agents survey

McKinsey’s reported adoption shows momentum, but also a scaling gap:

Adoption trends (McKinsey & Company)

23% of organizations are actively scaling Agentic AI in at least one business function.
39% are experimenting with Agentic AI.
Only up to 10% per function have scaled agents.

In other words, many teams are trying agents, but deep adoption is still rare, often limited to one or two functions.

Source - McKinsey & Company

Where agents are thriving

Agentic AI adoption is strongest in areas that map directly to developer workflows:

Industry	Top functions scaling AI Agents
Technology	IT (22%), Software Engineering (24%), Service Ops (21%)
Media and Telecom	IT (12%), Marketing and Sales (10%)
Healthcare	Service Ops (6%), Knowledge Management (14%)
Advertising and Marketing	Marketing and Sales (5%)

Source - McKinsey and Company

Business impact signals

Software engineering is among the top three functions reporting cost benefits from AI.

Source - McKinsey and Company

High-performing companies allocate 20%+ of their digital budgets to AI tools, indicating deep integration, not superficial add-ons.

Source - McKinsey and Company

Efficiency gains show up most clearly in software engineering, IT, and manufacturing.

Source - McKinsey & Company

The developer’s new roles (and skills)

Agentic AI isn’t replacing developers, it’s empowering them. Instead of writing code for every step, you increasingly:

Define goals and constraints.
Choose tools and boundaries.
Validate outcomes.
Harden reliability and safety.

Emerging roles

Agent Orchestration Engineer: Coordinate multi-agent workflows like managing a team of specialized digital coworkers.
Prompt Architect: Craft structured reasoning patterns that guide AI thinking step by step.
LLMOps Specialist: Ensure reliability, safety, and performance in agentic pipelines.

The new unit of delivery is not only code. Its capability: a system that can repeatedly achieve a goal with predictable results.

Agents can act, but humans must decide

Autonomy is useful, but it’s not the same as responsibility.

AI agents can move fast: generate patches, update configs, trigger pipelines, or create specs. But humans still decide on:

Product intent and tradeoffs.
Ethical constraints and acceptable risk.
Final approvals for high-impact actions (production deploys, security changes, compliance decisions).

The practical model is human + agent: agents handle execution and complexity; humans provide judgment and accountability.

Ethical and governance challenges in Agentic AI

Autonomous agents bring great potential but also new responsibilities. Organizations must focus on four key areas:

Bias and fairness: Agent can learn skewed patterns from data. Use diverse data sources and periodic reviews.
Compliance: Follow global regulations like GDPR and the EU AI Act by building transparency and risk controls.
Transparency: Decisions should be clear and traceable. Use explainable AI methods and maintain audit logs.
Accountability: When agents act independently, define who is responsible and set up human oversight and fail-safe measures.

Strong governance is essential for trust, safety, and long-term success with agentic AI. A useful test: if an agent causes an incident, can you answer what happened, why, and who approved the behavior?

Workflow redesign: The real key to AI-driven success

Workflows are the steps that move work from start to finish. Traditional workflows are manual and linear. Agents work best when the flow is designed for:

Goal-based execution.
Tool use (repo, CI, issue trackers, docs).
Validation checkpoints.
Safe rollback paths.

If you bolt AI onto rigid workflows, you get small gains. If you rebuild workflows to be AI-native, you unlock bigger outcomes. These autonomous agents don’t just automate tasks; they reason, plan, and act toward goals, adapting as conditions change and collaborating with humans for better outcomes.

What high performers do differently

Redesign don’t patch: They rebuild workflows instead of layering AI onto legacy systems.
Aim beyond efficiency: Target growth and innovation, not only cost reduction.
Proven impact: Workflow redesign is reported as 3× more linked to success than incremental changes.

Source - McKinsey & Company

Human + AI validation: Leadership engagement and human validation ensure trust and accountability.

Scaling AI Agents for enterprise impact

Many enterprises experiment with agents. Few scale them across critical workflows. Instead of patching legacy processes, scaling means embedding agents into high-impact areas where they can deliver measurable outcomes.

Scaling requires:

Clear objectives (what the agent owns).
Standard operating boundaries (what it must never do).
Reliability and evaluation (does it work consistently across repos and teams?).
Security controls (tool permissions, prompt injection defenses).
Cost visibility (token usage, model selection, fallback strategies).

Why scaling matters

Beyond efficiency: Scaling agents unlock growth and innovation, not just cost savings.
Goal-driven orchestration: Agents work toward business objectives, adapting dynamically instead of following rigid steps.
Enterprise-wide impact: When agents collaborate across departments, productivity gains multiply.

Meet your new coding partner: The Syncfusion Code AI Agent

To scale Agentic AI in software development, teams need tools built for real engineering constraints: security, governance, and repeatability.

Syncfusion^® Code Studio includes a Code AI Agent that functions as a coding assistant within a controlled workspace. Rather than simply responding to prompts, it is designed to reason, plan, and execute tasks with continuity and cost awareness. It supports multiple models for planning and coding and includes built-in rules for continuity and cost monitoring.

Syncfusion Code Studio

Agent Mode: What it helps you do

Agent Mode goes beyond simple code generation. It understands context, applies best practices, and executes tasks securely. With Agent Mode, you can:

Develop complete applications using UI Builder and Syncfusion components.
Refactor existing code for better performance.
Fix bugs and iterate based on feedback.
Generate specifications and requirement documents.
Create unit and UI test cases.
Deploy applications seamlessly.

Most importantly, Code Studio agents write code using advanced syntax and patterns, improving developer experience and accelerating delivery.

What makes it practical for enterprises

Multi-model support: Choose the right model for planning vs. coding vs. testing.
Workspace intelligence: Includes project rules, prompt injection controls, and enterprise-level cost monitoring.
UI Builder integration: Powered by 1600+ Syncfusion components for all platforms, enabling rapid app development.
Enterprise governance and compliance: Built-in security controls, audit trails, and SOC 2 compliance, and role-based access managed through Syncfusion’s enterprise server.
Cost efficiency: Enterprise monitoring ensures token usage stays predictable and optimized.
Multi-agent collaboration: Agents can work together on planning, coding, and deployment workflows.
Continuous improvement: Agents learn from previous executions, improving code quality and reducing bugs over time.

Everyday developer helpers in Code Studio

Autocomplete Mode: Intelligent code suggestions as you type.
Chat Mode: Ask questions, plan tasks, or generate snippets in natural language.
Edit Mode: Highlight code and instantly rewrite or optimize it.

Advanced features

MCP Server Marketplace: Find, install, and manage MCP server integrations.
Code Studio rules: Define project-specific rules for coding standards and patterns.
Prompt files: Create reusable prompts for consistent workflows.
Memory: Recall relevant past interactions for continuity.
Apply from chat: Insert AI-generated code snippets directly into your file.
Codebase search: Search your entire project using natural language queries.
Image input: Provide visual context (UI screenshots, architecture diagrams, error messages).

Adaptability and integration

Choose any model: You can choose a different Agent Model based on your use cases.
Unlimited reach with MCP: Pull data from APIs, databases, local files, or cloud storage.
Deep context awareness: Attach files, logs, Git diffs, or documentation URLs for precise answers.

Here are some helpful resources to get you started:

Future trends: Where Agentic AI is headed

Over the next decade, expect agentic AI to move from assistants to system-level capability:

Hyper-autonomous systems: Agents will handle complex workflows end-to-end, reducing human intervention to oversight only.
Multi-agent collaboration: Networks of specialized agents will work together, enabling dynamic problem-solving across domains.
Context-aware intelligence: Agents will adapt in real time using environmental signals, user behavior, and business context.
Ethics-first design: Governance, transparency, and compliance will become core features, not add-ons.
Integration everywhere: From enterprise platforms to consumer apps, agentic AI will be embedded as a standard capability.

The long-term shift is simple: software won’t just respond. It will act, and we’ll be responsible for how it acts.

Frequently Asked Questions

1. What is Agentic AI?

A: Agentic AI refers to systems that can act independently, make decisions, and adapt without constant human input.

2. Will Agentic AI replace developers?

A: No. It works alongside developers, automating tasks while humans provide oversight and strategic direction.

3. Why do humans still need to make decisions?

A: Human judgment ensures ethical compliance, accountability, and alignment with business goals.

4. What skills should developers focus on?

A: Beyond coding, developers need to understand AI design, decision-making frameworks, and responsible AI practices.

5. How can developers ensure AI is responsible?

A: Validate AI continuously, document its behavior, and maintain transparency in decision-making.

6. What is Syncfusion Code AI Agent?

A: It’s a smart coding companion that helps developers build and scale agentic AI systems efficiently within Syncfusion Code Studio.

Conclusion

Thank you for reading! Agentic AI in software development is changing what “building software” means. The work shifts from writing every step to designing autonomous behavior: goals, plans, tool access, guardrails, and validation.

If you want to experience the shift from code to agents, evaluate Syncfusion Code Studio and test how Agent Mode fits your team’s workflow, especially where governance, cost control, and repeatability matter.

You can contact us through our feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com

Are Your .NET PDF Redactions and Digital Signatures Truly Secure?

Lucy Muturi — Wed, 18 Feb 2026 13:36:06 +0000

TL;DR: Redaction fails when it only hides text—PDF data often remains recoverable. And signatures that appear valid can still break without timestamps or revocation details. This guide shows a standards-based .NET workflow using Syncfusion to properly redact, secure, sign, and validate PDFs.

Compliance-driven teams in finance, healthcare, legal, and government handle sensitive PDFs every day, and even small mistakes can expose confidential data. Many PDF libraries may look secure after redaction, but they can leave searchable text, signatures may fail across readers, and encryption might not hold up over time.

Are your documents truly protected across platforms and years?

True document safety comes from standards-based redaction, where sensitive content is entirely removed, not just visually masked, along with reliable digital signatures that validate consistently across desktop apps, browsers, mobile devices, and long-term archives.

In this guide, we’ll look at the compliance failures teams face with redaction and digital signatures, how to perform redaction using the Syncfusion^® PDF Library, how to implement standards‑aligned digital signatures, and finally, how to build an end‑to‑end workflow that keeps PDFs consistently secure.

Where compliance fails: Redaction and signature issues in the real world

Compliance failures in PDFs often start with a simple question: Are your redactions and signatures as secure as they look? In many cases, the answer is no. Visual redaction and incomplete digital signatures often create a false sense of safety. Hidden text, unremoved metadata, or missing validation details can expose sensitive information during audits, eDiscovery, or document reviews, long after the document has been shared.

Why visually redacted PDFs still leak data

Many teams assume that covering text is enough. Still, the underlying content usually remains intact, searchable in full-text queries, accessible through select-and-copy actions, or recoverable from hidden layers. During compliance checks, this can reveal sensitive PII, account details, patient records, or legal information that was supposed to be permanently removed.

Why digital signatures fail technical validation

Even when a document appears signed correctly, it may fail to provide technical validation across different viewers. Missing timestamps, incomplete certificate chains, absent revocation data (OCSP/CRL), or post-signing modifications can cause signatures to appear INVALID. These issues become visible when files are opened in different PDF readers or long after they’ve been archived.

The result can be costly: Faulty redaction can undermine privacy laws like GDPR and HIPAA, while broken signatures can disrupt essential business workflows. These problems occur not because teams are careless, but because many solutions prioritize appearance over genuine standards compliant with PDF security.

PDF Redaction with Syncfusion: Accurate, Irreversible, Auditable

The Syncfusion .NET PDF Library delivers true programmatic PDF redaction that removes sensitive content at the document structure level, rather than merely masking it. Once applied, redacted text and images are permanently deleted. Each operation can be logged and flattened into the final file, creating an audit-ready PDF that stands up to compliance checks.

How Syncfusion redaction works

Permanent removal at the PDF data level: Syncfusion deletes text, images, and annotations directly from the PDF structure, ensuring redacted content cannot be restored through search, copy, or layer inspection.
Precise region targeting with layout preserved: Define exact redaction areas using coordinate-based boxes, removing only sensitive content while keeping the rest of the document interactive.
Scalable server-side batch processing: Process large volumes of PDFs in automated .NET workflows on Windows, Linux, or Docker with no desktop components.
Flattened output for irreversible redaction: After redaction, flatten the document to lock changes permanently and prevent any editing or recovery attempts.

This gives compliance-driven teams a standard-aligned redaction workflow for PDF security, PII redaction, and audit-ready documents, improving both trust and cross-platform reliability in modern content pipelines.

Here’s how you can do it in code:

// Load the existing PDF document
using (PdfLoadedDocument document = new PdfLoadedDocument("Input.pdf"))
{
    // Get the first page from the document
    PdfLoadedPage page = document.Pages[0] as PdfLoadedPage;

    // Apply redaction to the confidential region using the specified bounds
    PdfRedaction redaction = new PdfRedaction(new RectangleF(343, 147, 60, 17), Color.Black);
    // Add the redaction to the page
    page.AddRedaction(redaction);
    // Apply redactions and permanently remove marked content from the PDF
    document.Redact();
    // Save the redacted PDF file
    document.Save("Output.pdf");
}

Running this code generates a PDF document similar to the screenshot below.

PDF page after structural redaction

Want to redact PDF documents using interactive UI controls?

Syncfusion offers the PDF Viewer SDK, a powerful interactive UI suite that allows users to inspect pages, mark sensitive regions, preview redaction markers, and review all changes before redaction is applied. Since this UI component is licensed separately, it’s important to carefully evaluate your workflow needs.

If you require a fully interactive UI for editing and redaction, the PDF Viewer SDK is the ideal solution. However, if your workflow is primarily focused on automation or server-side processing, the Document SDK alone can fully meet your requirements.

Tips for PDF Reduction

Automated redaction with APIs:
- Load your PDF file using PdfLoadedDocument.
- Find the sensitive content (text or images) and get their positions on the page.
- Create redaction boxes around each item using PdfRedaction.
- Add them to the page with PdfLoadedPage.AddRedaction().
- Then apply them all at once with PdfLoadedDocument.Redact().
If you target a compliance format like PDF/A‑2u, apply the conformance setting after redaction is complete and before applying the digital signature.

Digital Signatures done right: Standards-based, trusted, verifiable

The Syncfusion .NET PDF Library creates standards-based digital signatures that validate consistently across Adobe Reader, major PDF viewers, document management systems, and long-term archives. Each signature carries proof of identity, data integrity, and time of signing, making tampering immediately detectable.

How Syncfusion digital signatures work

Standards-based formats: Supports PAdES, CAdES, and CMS signatures using SHA256/SHA512 to ensure validation across major PDF viewers.
Trusted timestamping: Adds RFC 3161 timestamps to prove the exact moment a document was signed.
Long Term Validation (LTV): Embeds OCSP/CRL data, so signatures remain verifiable years after certificate changes.
Flexible certificate sources: Works with PFX files, Windows certificate store, and HSM-backed keys.
Automated server-side signing: Runs on Windows, Linux, and Docker with no UI interaction, enabling high-volume automated workflows.

Here’s how you can do it in code:

// Load the PDF document
using (PdfLoadedDocument document = new PdfLoadedDocument("Input.pdf"))
{
    // Load digital ID with password.
    PdfCertificate certificate = new PdfCertificate(@"DigitalSignatureTest.pfx", "DigitalPass123");
    // Create a signature with a loaded digital ID.
    PdfSignature signature = new PdfSignature(document, document.Pages[0], certificate, "DigitalSignature");
    // Save the PDF document.   
    document.Save("SignedDocument.pdf");
}

Running this code generates a PDF document similar to the screenshot below.

PDF document signed with standards-based digital signatures

Tips for standards-based digital signatures

Use a trusted CA-issued certificate (not self-signed) for workflows that require broad validation.
Add a TSA timestamp (RFC 3161) to prove when the signing occurred.
Embed revocation info (OCSP/CRL) to keep validation possible after certificate changes or expiration.
Lock down edits after signing so viewers don’t mark the signature invalid due to post-sign changes. For more details, refer to our official documentation.

How to build the compliance-ready workflow: Redact → Secure → Sign → Archive → Validate

Want a repeatable, compliance-ready PDF workflow that stands up to audits, legal reviews, and long-term retention requirements? Follow these stages, each aligned to how regulated organizations protect sensitive data, enforce policy, and guarantee verifiable document integrity.

1. Redact: permanently remove sensitive content

Precisely target regions and flatten redactions.

Redact confidential information before security or signing.
Flatten where appropriate to prevent editing or recovery attempts.
Optional: mark redactions programmatically using the .NET PDF Library, review in the PDF Viewer SDK, then apply permanent redaction.

2. Secure: apply encryption and permissions

Restrict access and control what users can do.

Configure AES-based encryption.
Set permissions to disable editing/copying or allow form-fill and comments based on policy.

3. Sign: add digital signatures

Prove document authenticity and detect tampering.

Use standards-based signatures (PAdES, CAdES, CMS) with SHA-256/SHA-512 algorithms.
Include RFC 3161 timestamps for durability.

4. Archive: enable Long-Term Validation (LTV)

Keep signatures valid for years or decades.

Embed certificate chains.
Include OCSP responses and CRL data.
Keep signatures verifiable even after certificate expiration.

5. Validate: confirm compliance before distribution

Perform final verification:

Redactions are permanent (no searchable/copyable residual content).
Encryption and permissions match policy.
Signatures validate across target viewers.
LTV evidence is embedded.
No hidden content remains.

This workflow fits automated document pipelines and can run server-side at scale (Windows, Linux, Docker, Kubernetes) without UI dependencies.

Frequently Asked Questions

1.Can Syncfusion redact text automatically using patterns or regex?

A: Yes. Syncfusion PDF library supports regex-based search to find items like emails, dates, or IDs and redact them automatically.

2. Does Syncfusion support overlay text or custom appearance on redacted areas?

A: Yes. You can add custom overlay text, fonts, colors, and even images to the redacted zones using the Syncfusion PDF library.

3. Can Syncfusion handle redaction for high-volume or bulk PDF processing?

A: Yes. Syncfusion’s PDF Library is optimized for server-side, high-volume workloads. Developers can batch process redactions using automation pipelines, and the library even provides a redaction progress event for large documents. This makes it suitable for enterprises that need to sanitize thousands of PDFs for audits, legal archives, GDPR exports, and regulatory submissions.

4. Can I digitally sign a PDF that already contains another signature?

A: Yes. Syncfusion .NET PDF library allows multiple signatures, enabling sequential approvals and multi-sign workflows.

5. Does Syncfusion allow for creating custom digital signature appearances?

A: Yes. Syncfusion PDF library enables fully customizable digital signature appearances, including signer name, reason, timestamp info, custom images, logos, handwritten signatures, and shapes. This helps brands maintain a professional, compliant document-signing experience.

6: Are Syncfusion’s digital signatures compliant with global standards?

A: Yes. The library supports OCSP, CRL, timestamps, ECDSA, CMS, and CAdES, ensuring full compliance with digital signature standards.

7: Does Syncfusion support long-term validation (LTV) for PDF signatures?

A: Yes. Syncfusion’s PDF Library supports adding LTV signatures, which remain valid even if root certificates expire or are revoked—ideal for long-term archiving and audits.

8: Is Syncfusion’s redaction and signing available across all .NET platforms?

A: Yes. It works on ASP.NET Core, MAUI, Blazor, WinForms, WPF, Windows, macOS, Linux, iOS, and Android.

9: Can I apply or manage PDF redaction interactively using UI controls?

A: Yes. Syncfusion provides a PDF Viewer SDK that lets users visually inspect pages, highlight sensitive text, and place redaction markers interactively. After marking, the content can be permanently removed, ensuring secure and irreversible redaction.

Conclusion: Why teams choose Syncfusion for compliance workflows

Thank you for reading! Redaction and digital signing aren’t optional; they’re the foundation of every compliance-ready document workflow. A single error, such as residual searchable text after redaction or a digital signature that fails validation, can expose sensitive information, spark audit failures, and undermine customer trust in an instant. So, the real question is: which platform do you trust to get this right?

The Syncfusion PDF Library eliminates these risks at the structural level. Redaction permanently removes sensitive information, including text, images, annotations, layers, and metadata, ensuring nothing can be recovered through search or analysis. Digital signatures follow global standards, including timestamps and OCSP/CRL validation, and remain trusted across readers and long-term archives.

Beyond functional correctness, Syncfusion offers cloud-ready, server-safe libraries optimized for high-load production environments. With extensive documentation and implementation samples, development teams can rapidly deploy reliable, compliant, and automated document workflows from end to end, ready.

Curious how this fits your workflow? Experience it directly with our live demo.

ASP.NET Core PDF library – Redaction Example – Syncfusion Demos

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