DEV Community: Syncfusion, Inc.

Secure PDF Digital Signatures in JavaScript: Best Practices for Developers

Jollen Moyani — Mon, 20 Apr 2026 14:18:18 +0000

TL;DR: Digital signatures fail in production when workflows ignore permissions, timestamps, and validation. Follow 4 best practices: signature type selection, certificate-based signing, full metadata/appearance, and certification flags for multi-sign, to ship browser-based signing that stands up in real review chains.

A PDF that looks signed is not necessarily a PDF that can be trusted.

In regulated workflows, legal reviews, compliance audits, and financial approvals, a signature must do more than display a name or image. It must prove who signed the document, confirm that the content has not changed, and record when the signing occurred. Without those guarantees, a PDF fails validation regardless of how convincing it appears.

This guide outlines four essential best practices for implementing secure, legally aligned PDF digital signatures in JavaScript using the Syncfusion^® JavaScript PDF Library. Each practice focuses on technical correctness, audit readiness, and long-term validation, without relying on server-side processing or external tools.

Why digital signatures define trust in regulated PDF workflows

Digital trust is not assumed; it is verified.

A PDF becomes trustworthy only when its signature can reliably answer three questions:

Who signed the document? Verified through a cryptographic identity bound to the file.
Was the document altered after signing? Guaranteed through tamper-evident cryptographic protection.
When did the signing occur? Anchored to a verifiable timestamp.

These guarantees are delivered only by an X.509 certificate-based digital signatures aligned with standards such as eIDAS and the ESIGN Act. Unlike visual or simple electronic signatures, certificate-backed signatures validate consistently across enterprise PDF viewers and audit tools.

With this foundation in place, the next sections focus on how to implement digital signatures correctly in JavaScript-based workflows.

Quick setup overview (Syncfusion JavaScript PDF signing)

The Syncfusion JavaScript PDF Library runs entirely in the browser with no server-side processing, no Adobe dependency, and no additional package installation required.

Before applying the best practices covered in this guide, ensure you have a working PDF signing setup by referring to the Syncfusion JavaScript PDF Library documentation for detailed getting-started instructions.

At a high level, a JavaScript-based PDF signing workflow includes:

Loading a browser-based PDF library
Creating or opening a PDF document
Adding a digital signature field
Applying a certificate-backed signature
Saving the signed PDF for validation

For step-by-step instructions on creating and configuring digital signature fields, refer to the official documentation.

PDF with signature field

4 best practices for secure PDF digital signatures in JavaScript

The following four practices of a PDF digital signature cover everything from choosing the right signature type to managing complex multi-party approval workflows. Each practice is demonstrated with complete implementation using the Syncfusion JavaScript PDF Library.

1. Choose the right signature type for your workflow

Not every document requires the highest signature level protection. Using advanced signing everywhere increases file size, processing time, and implementation complexity without adding meaningful value for low-risk workflows.

The right choice depends on the level of trust the workflow demands.

Signature Type	Protection Level	Best For
Simple Electronic Signature (SES)	Visual only	Internal approvals, informal acknowledgments, and everyday organizational tasks
Standard Digital Signature	Cryptographic identity + tamper-proof	Contracts, HR documents, and onboarding forms
Digital Signature with Trusted Timestamp	Identity + integrity + signing time proof	Legal, financial, and regulated compliance workflows

For most enterprise use cases, standard digital signatures or timestamped signatures provide the right balance of security and performance.

Choosing the correct type upfront prevents downstream validation failures and avoids unnecessary rework.

Curious to learn more about the different signature types that best fit your workflow? Explore Interactive Signature Fields and Digital Signature documentation.

2. Use certificate-based signing for legal enforceability

A digital signature becomes legally enforceable only when it is backed by a valid X.509 certificate.

Certificate-based signing:

Identity-verified through the signer’s X.509 certificate
Tamper-proof, with any post-signing edit instantly revealed
Legally aligned with ESIGN and eIDAS requirements
Audit-ready, with timestamped evidence of when the signature was applied
Produces signatures that validate across PDF viewers

For regulated workflows, adding a trusted timestamp further strengthens the signature by proving when it was signed, which is critical in audits and disputes.

The Syncfusion JavaScript PDF Library supports certificate-based signing with configurable cryptographic standards and digest algorithms.

The following example applies to CAdES signing with SHA-256 hashing, a strong, standard-aligned combination for regulated workflows.

JavaScript

// Base64 string of the PFX certificate used for digital signing
const certData = "MIIGwgIBAzCCBn4GCSqGSIb3D……. 8AGCSqG"

// Base64 string of the signature image
const imageData = "iVBORw0KGgoAAAANS………………..fQAAAEsC"

// Create a new document;
var document = new ej.pdf.PdfDocument();

// Add a new page to the document
var page = document.addPage();

// Access the PDF form
var form = document.form;

// Create a new signature field
var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 200, height: 200 });

// Create a new signature using PFX data and private key
var sign = ej.pdf.PdfSignature.create(certData, "syncfusion", {
    cryptographicStandard: ej.pdf.CryptographicStandard.cades,
    digestAlgorithm: ej.pdf.DigestAlgorithm.sha256,
});

// Get the normal appearance graphics for the signature field
var graphics = field.getAppearance().normal.graphics;

// Create an image from a base64-encoded bitmap
var image = new ej.pdf.PdfBitmap(imageData);

//Draw the image to fill the signature widget
graphics.drawImage(image, { x: 10, y: 10, width: 100, height: 100 });

// Set the signature to the field
field.setSignature(sign);

// Add the field into the PDF form
form.add(field);

// Save the document
document.save('Signed.pdf');

// Destroy the document
document.destroy();

PDF showing signature type options

Certificate-based signing confirms technical validity, but a correctly validated signature still needs to communicate clearly to human reviewers. That’s where appearance and metadata configuration become essential.

3. Configure signature appearance and metadata completely

A signature can be cryptographically valid and still fail an audit.

Auditors, reviewers, and compliance teams rely on what they can see as much as what software can validate. A production-grade signature must communicate clearly at a glance.

Every signature should include:

Visible signer details: Name, reason, and location
Embedded metadata: Signer identity, purpose, and context
Consistent appearance: Recognizable layout, timestamp, and optional image or stamp

These details allow reviewers to confirm authenticity without opening technical validation panels, while still validating correctly under cryptographic inspection.

The Syncfusion JavaScript PDF Library provides full API control over all appearance and metadata properties. The following code example adds contact info, location, reason, and a custom visual layout to the signature field.

JavaScript

// Base64 string of the PFX certificate used for digital signing
const certData = "MIIGwgIBAzCCBn4GCSqGSIb3D……. 8AGCSqG"

// Base64 string of the signature image
const imageData = "iVBORw0KGgoAAAANS………………..fQAAAEsC"

// Create a new document;
var document = new ej.pdf.PdfDocument();

// Add a new page to the document
var page = document.addPage();

// Access the PDF form
var form = document.form;

// Create a new signature field
var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 300, height: 300 });

// Create a new signature using PFX data and private key
var sign = ej.pdf.PdfSignature.create(certData, "syncfusion", {
    cryptographicStandard: ej.pdf.CryptographicStandard.cades,
    digestAlgorithm: ej.pdf.DigestAlgorithm.sha256,
    contactInfo: 'johndoe@owned.us',
    locationInfo: 'USA',
    reason: 'Testing signature'
});

// Get the graphics from the signature appearance
var graphics = field.getAppearance().normal.graphics;

// Draw rectangle border and background
graphics.drawRectangle({ x: 0, y: 0, width: 280, height: 80 }, new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1), new ej.pdf.PdfBrush({ r: 255, g: 255, b: 255 }));

// Draw signature image
graphics.drawImage(new ej.pdf.PdfBitmap(imageData), { x: 5, y: 5, width: 70, height: 70 });

// Draw signature text
graphics.drawString(
    'Digitally Signed by Syncfusion'
    new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 9),
    { x: 80, y: 8, width: 195, height: 15 },
    new ej.pdf.PdfBrush({ r: 0, g: 0, b: 0 })
);

graphics.drawString(
    'Reason: Testing signature',
    new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 8),
    { x: 80, y: 28, width: 195, height: 12 },
    new ej.pdf.PdfBrush({ r: 0, g: 0, b: 0 })
);

graphics.drawString(
    'Location: USA',
    new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 8),
    { x: 80, y: 45, width: 195, height: 12 },
    new ej.pdf.PdfBrush({ r: 0, g: 0, b: 0 })
);

// Set the signature to the field
field.setSignature(sign);

// Add the field into the PDF form
form.add(field);

// Save the document
document.save('Signed.pdf');

// Destroy the document
document.destroy();

PDF with signature appearance and metadata

A complete signature satisfies both machine validation and human review, a requirement in most regulated workflows.

4. Design multi-signature workflows that preserve validity

Multi-party approvals introduce a common risk: each new signature can accidentally invalidate the previous one.

Properly designed workflows ensure that:

Earlier signatures remain valid as additional signers complete the document.
Reviewers can add comments or annotations without breaking signatures.
Permissions are explicitly defined at signing time.

This requires configuring document certification and modification permissions correctly for each signer.

The Syncfusion JavaScript PDF Library gives developers full control over multi-signature workflows through its PdfCertificationFlags API. Beyond workflow permissions, it also supports flexible cryptographic options, including CMS and CAdES standards and multiple digest algorithms, so each organization can apply the exact level of protection their workflow requires.

The following example demonstrates a two-signature workflow:

A certifying signature applied first, defining allowed changes.
Subsequent approval signatures added without altering protected content.

JavaScript

// Base64 string of the PFX certificate used for digital signing
Const certData = "MIIGwgIBAzCCBn4GCSqGSIb3D……. 8AGCSqG"

// Base64 string of the signature image
const imageData = "iVBORw0KGgoAAAANS………………..fQAAAEsC"

// Create a new PDF document
var document = new ej.pdf.PdfDocument();

// Add a new page to the document
var page = document.addPage();

// Add the first visible signature field
var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 50, y: 50, width: 150, height: 150 });

// Add the second visible signature field
var field2 = new ej.pdf.PdfSignatureField(page, 'Signature1', { x: 50, y: 250, width: 150, height: 150 });

// Create a certifying signature (CMS + SHA-256), allowing form fill
var signature = ej.pdf.PdfSignature.create(certData, "syncfusion", {
    cryptographicStandard: ej.pdf.CryptographicStandard.cms,
    digestAlgorithm: ej.pdf.DigestAlgorithm.sha256,
    reason: 'I am author of this document.',
    documentPermissions: ej.pdf.PdfCertificationFlags.allowFormFill
});

// Get the normal appearance graphics for the signature field
var graphics = field.getAppearance().normal.graphics;

// Create an image from a base64-encoded bitmap
var image = new ej.pdf.PdfBitmap(imageData);

//Draw the image to fill the signature widget
graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 100 });

//Draw the image to the page graphics
page.graphics.drawImage(image, { x: 50, y: 250, width: 100, height: 100 });

// Bind the certifying signature to the first signature field
field.setSignature(signature);

// Add the first signature field
document.form.add(field);

// Add the second signature field
document.form.add(field2);

// Save the current state to a Uint8Array
var data = document.save();

// Dispose of the first document
document.destroy();

// Reopen the saved bytes as a new PdfDocument
var ldocument = new ej.pdf.PdfDocument(data);

// Retrieve the second signature field by index (0-based; index 1 = the second field)
field = ldocument.form.fieldAt(1);

// Create the second signature (certify with forbid changes)
signature = ej.pdf.PdfSignature.create(certData, "syncfusion", {
    cryptographicStandard: ej.pdf.CryptographicStandard.cms,
    digestAlgorithm: ej.pdf.DigestAlgorithm.sha256,
});

// Bind the signature to the second field
field.setSignature(signature);

// Save the document
ldocument.save('output.pdf');

// Dispose of the document
ldocument.destroy();

PDF with multi-signature workflow

Multi-party approval workflows, sequential review chains, and regulated signing processes all demand this level of control. Syncfusion ships it ready to configure. When implemented correctly, multi-signature PDFs remain valid throughout the entire approval chain, without manual intervention or re-signing.

Curious to explore more digital signature standards, workflows, and implementation examples? Explore the Digital Signature documentation.

Beyond signing: Syncfusion’s complete PDF toolkit for JavaScript developers

Digital signatures are one part of a complete PDF workflow. In real-world applications, documents move through multiple stages: creation, editing, annotation, protection, reviews, and signing. Enterprise workflows require a full-stack PDF engine, not just a signing API.

The Syncfusion JavaScript PDF Library covers the entire PDF lifecycle without external tools or Adobe dependencies:

Create PDF documents: Generate PDFs from scratch using a flexible, developer-friendly API.
Add or edit text, images, and graphics: Insert text blocks, shapes, and visual elements programmatically.
Annotations: Add highlights, comments, notes, and markup for document review workflows.
Form fields: Create, populate, import, export, and flatten form fields for structured data capture.
Merge and split PDFs: Combine multiple PDFs or split a single PDF into individual parts.
Watermarks: Apply text or image watermarks for branding, security, or classification.
Hyperlinks and bookmarks: Add navigation links and bookmark structures for smooth document movement.
Text and image extraction: Retrieve text content and embedded images from PDF pages.
Redaction: Permanently remove sensitive content using text or shape-based redaction.

Every capability listed above is available in the browser, no server-side runtime required.

Looking for more detailed information and complete code implementation examples for all features? Visit the Syncfusion JavaScript PDF Library documentation.

Frequently Asked Questions

Can I reuse the same certificate for signing multiple documents?

Yes. A single X.509 certificate can be used to sign multiple documents. Each signed PDF carries its own unique cryptographic signature, even when the same certificate is reused.

Can a digital signature be removed from a PDF once applied?

Yes, you can remove the signature by deleting the associated signature field. However, plan your workflow structure before signing to avoid post-signing field removal.

Does adding pages after signing break the signature?

Yes. Modifying the document structure after signing, including adding or removing pages, altering content, or changing form fields outside the permissions defined at signing time, invalidates existing signatures.

Does using a stronger digest algorithm significantly increase PDF file size?

Minimally. Stronger digest algorithms, such as SHA-256 or SHA-512, increase the cryptographic signature payload, but the difference in overall file size is negligible in practice for standard document sizes.

Can I redact sensitive information before applying a digital signature?

Yes. The library supports text and shape-based redaction to permanently remove sensitive content before a signature is applied. Always complete redaction before signing; applying a signature first and redacting afterward will invalidate the signature.

Is a PDF Viewer available for JavaScript to render and validate signed PDFs?

Yes. Syncfusion provides a full PDF Viewer component for JavaScript that supports rendering, annotation, form filling, and signature validation directly in the browser, no server rendering required.

Conclusion

Thank you for reading! Implementing secure PDF digital signatures in JavaScript does not require a complex server-side pipeline.

By following these four best practices, you can ensure that your signed PDFs:

Prove signer identity
Detect any post-signing modification
Validate across viewers and audit tools
Remain compliant in regulated workflows

The Syncfusion JavaScript PDF Library brings all four practices together in a single browser-native API. Your applications can deliver documents that remain trusted, verifiable, and legally compliant across every stage of the business process.

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!

From Static PDFs to Interactive Documents: Create QR Codes in C#

Jollen Moyani — Mon, 20 Apr 2026 13:05:51 +0000

TL;DR: Turn ordinary PDFs into interactive, scannable documents. This hands‑on guide shows how to create, customize, brand, and embed QR codes in PDFs using C# and Syncfusion, with production‑ready code for headers, footers, existing files, and enterprise workflows.

Why QR codes in PDFs actually matter

PDFs are everywhere, but most remain static, disconnected, and underutilized.

QR codes change that.

With a single scan, QR codes can turn a PDF invoice into a payment gateway, a product manual into a live support portal, or a ticket into a secure entry pass. They bridge the gap between printed documents and real‑time digital experiences, and that’s why they’re now a standard across enterprise workflows.

In this guide, you’ll learn how to create, customize, and embed QR codes into PDF documents using C# and the Syncfusion^® .NET PDF Library. We’ll go beyond basic examples and cover production‑ready patterns, from branding and error correction to updating existing PDFs and exporting QR codes as images.

If you’re building document automation, invoicing systems, event workflows, or secure PDFs, this guide is designed for you.

Setting up a .NET Core application

First, we need to create a simple .NET Core console app to work with PDF files. To do so, please follow these steps:

1 Initialize the project using the following command:

BASH

dotnet new console -n embed-qrcode-in-new-pdf-file
cd embed-qrcode-in-new-pdf-file

2 Then, install the Syncfusion PDF NuGet package.

BASH

dotnet add package Syncfusion.Pdf.Net.Core

3 Import the following required namespaces in the Program.cs file:

Program.cs

using Syncfusion.Drawing;
using Syncfusion.Pdf;
using Syncfusion.Pdf.Barcode;
using Syncfusion.Pdf.Graphics;

4 Next, we need to register the Syncfusion license. This step is crucial, as the library will add a watermark without a valid license. Open your Program.cs file and add the following line at the beginning of your app’s entry point.

BASH

using Syncfusion.Licensing;

// Replace "YOUR_LICENSE_KEY" with the key from your Syncfusion account
SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

With the initial setup complete, let’s explore the different ways you can embed QR codes in PDF files using the Syncfusion .NET PDF Library and C#. Each method offers unique possibilities depending on your document processing needs.

Embedding a basic QR Code in PDF using C

Use the following code to generate a QR code and insert it into a new PDF document:

// Create a new PDF document
using (PdfDocument document = new PdfDocument())
{
    // Add a new page
    PdfPage page = document.Pages.Add();

    // Create QR barcode instance
    PdfQRBarcode qrBarcode = new PdfQRBarcode();

    // Set QR code properties
    qrBarcode.Text = "https://syncfusion.com";

    // Set the QR size
    qrBarcode.Size = new SizeF(120, 120);

    // Draw the QR code
    qrBarcode.Draw(
        page.Graphics,
        new PointF(100, 10)
    );

    // Add text to the PDF document page
    page.Graphics.DrawString(
        "Scan QR Code to Visit Syncfusion",
        new PdfStandardFont(PdfFontFamily.Helvetica, 20),
        PdfBrushes.Black,
        new PointF(0, 150)
    );

    // Save the document
    document.Save("qrcode-in-pdf.pdf");
}

This creates a PDF containing a QR code linked to Syncfusion’s website.

Embedding a basic QR code in a PDF document

Customizing QR code (Size, XDimension, Error correction, Quiet Zone)

Professional apps require precise control over QR code appearance and behavior. Syncfusion .NET PDF Library also provides various customization options, including:

Size and XDimension
Error correction levels
Color and style adjustments

This ensures the generated QR codes meet the specific business requirements.

//Create a new PDF document
using (PdfDocument document = new PdfDocument())
{
    //Add a page to the document
    PdfPage page = document.Pages.Add();

    // Create and configure an advanced QR barcode
    PdfQRBarcode qrBarcode = new PdfQRBarcode()
    {
        Text = "https://www.syncfusion.com/document-sdk",

        // Size customizations
        Size = new SizeF(150, 150),

        //Set the dimension of the barcode.
        XDimension = 5,

        // Error correction configuration
        ErrorCorrectionLevel = PdfErrorCorrectionLevel.High,

        // Encoding mode optimization
        InputMode = InputMode.BinaryMode,

        // Version control (1-40 or Auto)
        Version = QRCodeVersion.Version10,

        // Foreground color for QR pattern
        ForeColor = Color.White,

        // Background color
        BackColor = new PdfColor(46,197, 190),

        //Set quiet zone (margin) around the QR code
        QuietZone = new PdfBarcodeQuietZones() { All = 5 }        
    };

    // Draw a customized QR code
    qrBarcode.Draw(page.Graphics, new PointF(100, 10));

    //Draw text below the QR code
    var details = $"""
            QR Code Specifications:
            -> Text: {qrBarcode.Text}            
            -> XDimension: {qrBarcode.XDimension}
            -> Error Correction: {qrBarcode.ErrorCorrectionLevel}
            -> Version: {qrBarcode.Version}
            -> Input Mode: {qrBarcode.InputMode}
            -> ForeColor: RGB({qrBarcode.ForeColor.R}, {qrBarcode.ForeColor.G}, {qrBarcode.ForeColor.B})
            -> BackColor: RGB({qrBarcode.BackColor.R}, {qrBarcode.BackColor.G}, {qrBarcode.BackColor.B})
            -> Quiet Zone: {qrBarcode.QuietZone.All}
            """;

    page.Graphics.DrawString(details, new PdfStandardFont(PdfFontFamily.Courier, 10), new PdfSolidBrush(new PdfColor(51, 51, 51)), new PointF(50, 200));

    //Save the document
    document.Save("qrcode-customization.pdf");
}

Running the code above produces a PDF containing the customized QR code, as shown below.

Customizing the QR code specifications in a PDF document

Points to remember:

The XDimension controls the width of the smallest module. Larger values make codes easier to scan.
Use high error correction when placing logos or expecting lower print quality.
The QuietZone adds the required margin, allowing scanners to detect the boundary.

Adding QR Codes to the PDF headers and footers

Headers and footers containing QR codes create professional documents that provide quick access to additional resources, verification links, or contact information throughout multi-page documents.

Refer to the following code example to add QR codes in PDFs’ headers and footers.

// Create header template and return
PdfPageTemplateElement CreateHeaderTemplate(SizeF headerSize)
{
    // Create PdfPageTemplateElement
    PdfPageTemplateElement header =
        new PdfPageTemplateElement(
            new RectangleF(0, 0, headerSize.Width, headerSize.Height)
        );

    string headerText = "PDF Succinctly";

    // Font
    PdfStandardFont font =
        new PdfStandardFont(
            PdfFontFamily.Helvetica,
            16,
            PdfFontStyle.Regular
        );

    // Measure the text size
    SizeF textSize = font.MeasureString(headerText);

    // Draw the text with center alignment
    header.Graphics.DrawString(
        headerText,
        font,
        PdfBrushes.Black,
        new PointF(
            0,
            (headerSize.Height - font.Height) / 2
        )
    );

    // Create a QR code and draw
    PdfQRBarcode qrBarcode = new PdfQRBarcode()
    {
        Text = "https://www.syncfusion.com/succinctly-free-ebooks/pdf",
        Size = new SizeF(75, 75)
    };

    // Draw the QR code on the header
    qrBarcode.Draw(
        header.Graphics,
        new PointF(
            headerSize.Width - (qrBarcode.Size.Width + 40),
            (headerSize.Height - qrBarcode.Size.Height) / 2
        )
    );

    // Draw a line to separate the header
    header.Graphics.DrawLine(
        new PdfPen(PdfBrushes.LightGray, 0.5f),
        new PointF(0, headerSize.Height - 5),
        new PointF(headerSize.Width, headerSize.Height - 5)
    );

    return header;
}

This ensures the QR code appears on every page.

Adding QR codes in a PDF’s header and footer sections

Overlay a logo on a QR Code (Branding)

Branded QR codes that incorporate company logos enhance brand recognition while maintaining functionality. This section covers both simple logo placement and complex embedded logo generation.

// Create a new PDF document
using (PdfDocument document = new PdfDocument())
{
    // Add a new page
    PdfPage page = document.Pages.Add();

    string qrText = "Syncfusion";

    // Create QR barcode instance
    PdfQRBarcode qrBarcode = new PdfQRBarcode();

    // Set QR code properties
    qrBarcode.Text = qrText;

    //Set the QR size
    qrBarcode.Size = new SizeF(120, 120);

    //Create logo for QR code
    QRCodeLogo logo = new QRCodeLogo(PdfBitmap.FromStream(new FileStream("data/logo.png", FileMode.Open, FileAccess.Read)));

    //Set logo in QR code
    qrBarcode.Logo = logo;
        ;

    // Draw the QR code
    qrBarcode.Draw(page.Graphics, new PointF((page.GetClientSize().Width - qrBarcode.Size.Width) / 2, 10));

    //Draw the QR code text
    PdfStandardFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 12);

    //Measure the text size
    SizeF textSize = font.MeasureString(qrText);

    //Calculate the center point
    float x = (page.GetClientSize().Width - textSize.Width) / 2;

    page.Graphics.DrawString(qrText, font, PdfBrushes.Black, new PointF(x, 130));

    // Save the document
    document.Save("qrcode-with-logo.pdf");
}

This is the resulting PDF document showcasing a QR code enhanced with a company logo.

Overlaying a logo on a QR Code in a PDF using C#

Adding a QR Code to an existing PDF

Adding QR codes to existing PDFs without disrupting the original content is crucial for document updates, compliance marking, and certification workflows.

Here’s the code snippet for implementation:

using Syncfusion.Pdf;
using Syncfusion.Pdf.Barcode;
using Syncfusion.Pdf.Parsing;

//Load the existing PDF file
using (PdfLoadedDocument loadedDocument = new PdfLoadedDocument("data/input.pdf"))
{

    //Create a QR code
    PdfQRBarcode qrBarcode = new PdfQRBarcode()
    {
        Text = "support@adventure-works.com",
        XDimension = 2.5f
    };

    //Get the first page of the PDF document
    PdfLoadedPage loadedPage = loadedDocument.Pages[0] as PdfLoadedPage;

    //Draw the QR code on that page.
    qrBarcode.Draw(loadedPage, new Syncfusion.Drawing.PointF(50, 710));    

    //Save the document
    loadedDocument.Save("qrcode-in-existing-pdf.pdf");
}

The following image shows a QR code embedded in an existing PDF using Syncfusion’s parsing and barcode APIs.

Adding a QR Code to an existing PDF document

Export a QR Code as an image

Beyond embedding QR codes directly in PDFs, there are scenarios where exporting the generated QR code as a standalone image (e.g., PNG or JPEG) is beneficial.

This allows for flexible use in web apps, print materials, or integration with other image processing workflows. Syncfusion’s .NET PDF Library facilitates this by allowing you to export the QR code as an image.

To export the barcode as an image on the .NET Core platform, we need to add the

Syncfusion.Pdf.Imaging.Net.Core NuGet package in the app.

Refer to the following code example.

using Syncfusion.Pdf.Barcode;
using Syncfusion.Pdf.Graphics;

// Create QR barcode instance
PdfQRBarcode qrBarcode = new PdfQRBarcode();

// Set QR code properties
qrBarcode.Text = "https://syncfusion.com";

qrBarcode.XDimension = 8;

//Export the QR code as an image
Stream qrCodeImage = qrBarcode.ToImage();

//Save the image stream to a file
using (FileStream fileStream = new FileStream("qrcode.png", FileMode.OpenOrCreate, FileAccess.ReadWrite))
{
    qrCodeImage.CopyTo(fileStream);
}

Export your QR code for broader use. Here’s how it looks as a standalone image.

Exporting a QR code embedded in a PDF document as an image

Real-world use cases

QR codes in PDFs offer versatile use cases across sectors:

1. Event tickets & invitations

Use case: PDFs for event tickets or invitations include QR codes for check-in, directions, or agenda downloads.
Benefit: Attendees scan to confirm attendance, view schedules, or access venue maps in real time.

Refer to the GitHub demo to create the event ticket with QR codes.

Embedding a QR code in a PDF to create event tickets

2. Invoices & receipts

Use case: Businesses add QR codes to PDF invoices linking to payment portals or transaction history.
Benefit: Clients can pay instantly or verify details without manually entering URLs.

Refer to the GitHub demo to create the invoice with QR codes.

Creating invoices with a QR code in a PDF

3. Product packaging & manuals

Use case: Brands embed QR codes in PDF product guides or warranty documents.
Benefit: Customers scan the code on packaging to instantly access digital manuals, setup instructions, or troubleshooting guides, no need for bulky paper inserts.

4. Education & training materials

Use case: Teachers and trainers embed QR codes in lesson plans or handouts.
Benefit: Students scan to access supplementary videos, quizzes, or interactive content, ideal for hybrid learning environments.

5. Retail & restaurant menus

Use case: Digital menus in PDF format include QR codes for ordering, nutritional info, or promotions.
Benefit: Customers scan to place orders or view real-time updates without touching shared surfaces.

6. Business proposals & portfolios

Use case: Freelancers and consultants embed QR codes in PDF proposals linking to case studies, testimonials, or booking pages.
Benefit: Prospective clients can engage with rich media instantly or take action without leaving the page.

7. Healthcare & patient forms

Use case: PDFs include QR codes for appointment scheduling, telehealth access, or medication instructions.
Benefit: Patients scan to complete forms or access care resources securely and efficiently.

QR codes are no longer optional; they’re a core part of modern document workflows!

GitHub reference

Also, refer to the GitHub demo for creating and embedding QR codes in PDF using C#.

Turn static PDFs into smart, interactive, production‑ready documents with QR codes

Thanks for reading! With the Syncfusion .NET PDF Library, you can embed QR codes in new or existing PDFs, customize them for reliability and branding, add them to headers and footers, and export QR codes as images. The above-mentioned examples are minimal and ready for production, with guidance on error correction, quiet zones, and testing to ensure the ability to scan. You can refer to the Syncfusion documentation for comprehensive barcode support, including QR, Data Matrix, Code 39, PDF417, and more.

Whether you’re building invoices, tickets, manuals, healthcare forms, or enterprise documents, the patterns in this guide are ready for production.

Explore Syncfusion’s .NET PDF Library today! Existing Syncfusion users can download the newest version of Essential Studio from the license and download page, while new users can start a 30-day free trial to experience its full potential.

Our dedicated support team is also available via the support forum, support portal, or feedback portal for any questions or concerns and is committed to providing prompt and comprehensive assistance.

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

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

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

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

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

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

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

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

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

Why large Excel imports silently break web apps

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

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

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

How Syncfusion Angular Spreadsheet eliminates large file import failures

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

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

Angular Spreadsheet with Styles and Formatting

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

Parsing options: Load only what you need

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

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

Here is a server-side example:

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

By disabling style and format parsing:

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

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

What you gain

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

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

Threshold limits: Stop the file before it crashes the app

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

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

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

What happens when a limit is exceeded

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

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

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

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

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

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

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

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

File size warning in Angular Spreadsheet

JSON serialization: Parse once, open instantly

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

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

Why JSON-based loading is faster

Using openFromJson, you can:

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

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

Client-side example:

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

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

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

Configuring Syncfusion Angular Spreadsheet for large file imports

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

Step 1: Install Angular CLI

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

Bash

npm install -g @angular/cli

Step 2: Create a new Angular application

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

Bash

ng new my-app

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

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

AI-Powered File Search in Blazor File Manager: Semantic and Tag-Based

Jollen Moyani — Fri, 17 Apr 2026 12:03:31 +0000

TL;DR: Turn the Syncfusion Blazor File Manager into a smart file assistant. This guide shows two AI search strategies:

Semantic Search: Find files even with vague or incomplete keywords using embeddings.
Tag-Based Search: Auto-generate AI tags, save them, and search later.

You’ll learn setup, wiring (Program.cs, events), and the core search logic, step by step.

From guessing filenames to intelligent discovery

Let’s be honest, searching for files usually means guessing filenames, scrolling endlessly, and hoping you named things well months ago.

In this post, we’ll fix that.

You’ll see how to turn the Syncfusion^® Blazor File Manager into an AI-powered search experience that understands what you mean, not just what you type. On top of that, we’ll add AI-generated smart tags so files stay easy to find long after you’ve forgotten where you saved them.

What you’ll build

By the end, your Blazor File Manager will:

Understand natural language search.
Match files using semantic similarity.
Generate AI‑suggested tags for any file.
Save and reuse tags for future searches.
Work entirely inside your Blazor app.

No external search engine required.

Prerequisites

Before getting started, ensure you have the following:

Visual Studio 2022 with ASP.NET and a web development environment.
.NET 8 / .NET 9.0 SDK.
An OpenAI or Azure OpenAI account to access AI models.

Create an Azure AI service

First, we need to create a new Azure OpenAI Service resource and generate an API key by following the instructions in the Microsoft documentation.

Create a Blazor app and configure AI

Now, we are going to create a Blazor web app and configure the AI services in it!

Step 1: Create a Blazor web app

Follow the instructions in the .NET Blazor tutorial or refer to the Syncfusion Blazor documentation to create a new Blazor Web app.

Step 2: Install Syncfusion Blazor File Manager and AI packages

Once the project is created, install the required Syncfusion and AI dependencies using the NuGet Package Manager. These packages are essential for building the File Manager and enabling AI-powered functionalities.

Step 3: Import the namespaces

Now, open the _Imports.razor file and import the necessary Syncfusion.Blazor namespaces so the components are accessible throughout the app.

BASH

@using Syncfusion.Blazor
@using Syncfusion.Blazor.FileManager

Step 4: Configure the Program.cs file

Now, register the Syncfusion Blazor service and AI service in the Program.cs file. For apps with WebAssembly or Auto (Server and WebAssembly) interactive render mode, ensure the Syncfusion Blazor is registered in both Program.cs files.

using FileManagerAI.Services;
using Microsoft.Extensions.AI;
using OpenAI;
using SmartComponents.LocalEmbeddings;
using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;

var builder = WebApplication.CreateBuilder(args);
…
builder.Services. AddSyncfusionBlazor();

// Local Embeddings
builder.Services.AddSingleton<LocalEmbedder>();

// Open AI Service
string apiKey = "Api Key";
string deploymentName = "model-name";

OpenAIClient openAIClient = new OpenAIClient(apiKey);
IChatClient openAiChatClient = openAIClient.GetChatClient(deploymentName).AsIChatClient();
builder.Services.AddChatClient(openAiChatClient);

builder.Services.AddSingleton<SyncfusionAIService>();
builder.Services.AddSingleton<AzureAIService>();
#endregion

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);

    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();
app.MapStaticAssets();
app.UseAntiforgery();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
app.Run();

Step 5: Add stylesheet and script resources

The Syncfusion theme stylesheets and scripts are delivered through NuGet packages using Static Web Assets.

To ensure proper rendering of the Blazor File Manager component, include the required references as follows:

Add the theme stylesheet in the <head> section.
Add the File Manager script at the end of the <body> section in the _Layout.cshtml file for Blazor Server apps or App.razor file for Blazor WebAssembly apps.

_Layout.cshtml

<head>
      ....
      <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
....
<body>
      ....
      <script src="_content/Syncfusion.Blazor.FileManager/scripts/sf-filemanager.min.js" type="text/javascript"></script>
</body>

Creating the AI-powered Blazor File Manager

With the app and services configured, you can now add the Syncfusion Blazor File Manager component to your project.

Add the File Manager to a Razor file (for example, SmartFileManager.razor). Ensure that an appropriate interactive render mode, such as, InteractiveAuto is specified at the top of the file.

SmartFileManager.razor.cs

<SfFileManager TValue="FileManagerDirectoryContent" ID="@FileManagerId" @ref="FileManager" Height="500px">
        <FileManagerSearchSettings AllowSearchOnTyping=false></FileManagerSearchSettings>
        <FileManagerEvents TValue="FileManagerDirectoryContent" OnRead="OnReadAsync" Searching="SearchingAsync"></FileManagerEvents>
 </SfFileManager>

Initialize File Manager services

In the razor.cs file named as SmartFileManager.razor.cs, initialize the File Manager service with the OnReadAsync function to handle AI functionalities.

protected override async Task OnInitializedAsync()
{
        await base.OnInitializedAsync();
        _ = Task.Run(() => FileManagerService.EmbedInitialFiles());
}

public async Task OnReadAsync(ReadEventArgs<FileManagerDirectoryContent> args)
{
        if (!Directory.Exists(Path.Combine(FileManagerService.DemoBaseDirectory, FileManagerId)))
        {
            FileManagerService.RootFolder(FileManagerId);
        }
        args.Response = await FileManagerService.GetFiles(args.Path, false, args.Folder.ToArray());
}

With the above configuration, the File Manager will be rendered with the loaded files and folders as shown below.

Creating the AI-powered Blazor File Manager

Adding AI search functionality to the Blazor File Manager

The Blazor File Manager provides two powerful AI-driven search options that enhance file discovery:

Smart Search: Finds files even with incomplete or unclear keywords by understanding the context.
Tag Search: Locates files based on tags added, making it easier to locate related items.

AI-powered smart search in Blazor File Manager

Smart search enables users to find files based on meaning rather than just exact file name matches. For example, users can type keywords in the Blazor File Manager’s search bar, and the system uses AI to match files that are semantically similar to the search query, even when the terms do not match exactly.

This process leverages local embeddings to compare the search query with file metadata and content, returning the most relevant results.

To improve similarity matching, refer to an updated local embeddings model URL in the project file, as shown below.

XAML

<ItemGroup>
    <PackageReference Include="SmartComponents.LocalEmbeddings" Version="0.1.0-preview10148" />
    <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.8.0-preview.1.25412.6" />
    <PackageReference Include="Microsoft.Extensions.AI" Version="9.8.0" />
</ItemGroup>

Map the searching event

Now, enable the smart search feature by mapping the File Manager’s Searching event and integrating the AI search logic within this event.

XAML

<!-- SmartFileManager.razor -->
    <SfFileManager TValue="FileManagerDirectoryContent" ID="@FileManagerId" @ref="FileManager" Height="500px">
        <FileManagerSearchSettings AllowSearchOnTyping=false></FileManagerSearchSettings>
        <FileManagerEvents TValue="FileManagerDirectoryContent" Searching="SearchingAsync"></FileManagerEvents>
    </SfFileManager>

Then, define the SearchingAsync in the SmartFileManager.razor.cs file.

// SmartFileManager.razor.cs
public async Task SearchingAsync(SearchEventArgs<FileManagerDirectoryContent> args)
   {
      args.Response = await FileManagerService.Search(args.Path, args.SearchText, false, false);
    }

Implement smart search in the FileManagerService.cs file

Smart search functionality uses a local embedder to evaluate semantic similarity between files and the user’s search input. The embedder analyzes the entered search string to determine the file relevance and returns the most relevant matches as the search response. This approach eliminates the need for exact file name for character matches.

public async Task<FileManagerResponse<FileManagerDirectoryContent>> Search(string path, string searchString, bool showHiddenItems = false, bool caseSensitive = false, bool isTagSearch = false, params FileManagerDirectoryContent[] data)
   {
       // ... (existing code for path validation and initial setup) ...

       if (!string.IsNullOrEmpty(searchString))
       {
           if (isTagSearch)
           {
               // ... (tag search logic) ...
           }
           else // Semantic search using embeddings
           {
               using var embedder = new LocalEmbedder();
               foreach (var category in foundedFiles)
               {
                   string key = category.FilterPath + category.Name;
                   try
                   {
                       if (!FileEmbeddings.ContainsKey(key))
                       {
                           FileEmbeddings.Add(key, embedder.Embed($"{category.Name}"));
                       }
                   }
                   catch
                   {
                       continue;
                   }
               }
               using var targetEmbedder = new LocalEmbedder();
               var queryVector = targetEmbedder.Embed(searchString);
               List<FileManagerDirectoryContent> filteredCategories = new List<FileManagerDirectoryContent>();
               foreach (FileManagerDirectoryContent item in foundedFiles)
               {
                   double similarity = LocalEmbedder.Similarity(FileEmbeddings[item.FilterPath + item.Name], queryVector);
                   if (similarity > 0.35)
                   {
                       filteredCategories.Add(item);
                   }
               }
               searchResponse.Files = filteredCategories;
           }
       }
       else // No search string, return all founded files
       {
           searchResponse.Files = foundedFiles;
       }
       return await Task.FromResult(searchResponse);
   }

Once a search term is entered in the Blazor File Manager’s search bar, files with higher semantic similarities are displayed as search results, as shown below.

Implementing AI-powered smart search in Blazor File Manager

AI-powered smart tag search in Blazor File Manager

Smart tag search allows users to quickly find files based on AI-generated tags, improving file organization and retrieval.

The FileManagerTagSearch.razor component includes the UI elements for displaying existing tags and AI-suggested tags using the SfChip component, along with buttons to generate and save AI tags.

<!-- FileManagerTagSearch.razor - Tags UI snippet -->
@if (isTag)
{
    <div id="tags" class="tags">
        <div id="tagContainer">
            <div class="title-container">
                <strong>Existing File Tags:</strong>
                <SfButton IconCss="e-icons e-close" CssClass="e-small" OnClick="CloseTagContainer"></SfButton>
            </div>
            <br />
            @if (fileTags.Length == 0)
            {
                <p>No tags available</p>
            }
            else
            {
                <div class="scrollable-container">
                    <SfChip EnableDelete="true" @ref="Chip">
                        <ChipEvents Deleted="@Deleted"></ChipEvents>
                        <ChipItems>
                            @foreach (var tag in fileTags)
                            {
                                <ChipItem Text="@tag"></ChipItem>
                            }
                        </ChipItems>
                    </SfChip>
                </div>
            }
            <br />
            <strong style="margin-bottom: 10px;">AI suggested File Tags:</strong>
            @if (aiTags.Length == 0)
            {
                <p>Click <strong>"Generate AI Tags"</strong> button to get suggested tags from AI.</p>
            }
            else
            {
                <div class="scrollable-container">
                    <SfChip EnableDelete="true" @ref="AIChip">
                        <ChipEvents Deleted="@AIDeleted"></ChipEvents>
                        <ChipItems>
                            @foreach (var tag in aiTags)
                            {
                                <ChipItem Text="@tag"></ChipItem>
                            }
                        </ChipItems>
                    </SfChip>
                </div>
            }
            <div class="button-container">
                <SfButton CssClass="e-btn e-outline e-primary" OnClick="SaveTags" Disabled=@isSave>Save AI Tags</SfButton>
                <SfButton CssClass="e-btn e-outline e-primary" OnClick="AddTags">Generate AI Tags</SfButton>
            </div>
        </div>
    </div>
}

The AddTags method in the FileManagerTagSearch.razor.cs file sends file content to the AI service to GetTagsFromAI, which then returns a list of suggested tags for the selected file. These tags are then stored via the FileManagerService.UpdateTagsToFile.

We can save these tags using the SaveTags method, which can be later utilized to search the files.

// FileManagerTagSearch.razor.cs - AddTags snippet
private async Task AddTags()
{
    var data = FileManager?.GetSelectedFiles();
    string filePath = FileManagerService.contentRootPath + data?.FirstOrDefault()?.FilterPath + data?.FirstOrDefault()?.Name;
    string fileContent = "File Named as " + data?.FirstOrDefault()?.Name;
    string tagsString = await GetTagsFromAI(fileContent);
    try
    {
        var tagsArray = Regex.Split(tagsString, @"\r\n|\n\n|\n")
        .Where(tag => !string.IsNullOrWhiteSpace(tag))
        .Select(tag => tag.Substring(tag.IndexOf(' ') + 1).Trim())
        .ToList();
        aiTags = tagsArray.Select(tag => new ChipItem { Text = tag }).ToList();
        isSave = aiTags.Count == 0 ? true : false;
    }
    catch (Exception e)
    {
        ErrorDetails er = new ErrorDetails();
        er.Message = e.Message.ToString();
        er.Code = "401";
        er.Message = "Need to clean the AI result";
    }
}

// save Tags

private void SaveTags()
{
    var data = FileManager?.GetSelectedFiles();
    List<string> tagsList = new List<string>();
    foreach (var item in AIChip?.Chips)
    {
        tagsList.Add(item.Text);
    }
    aiTags = tagsList.Select(tag => new ChipItem { Text = tag }).ToList();
    string filePath = FileManagerService.contentRootPath + data?.FirstOrDefault()?.FilterPath + data?.FirstOrDefault()?.Name;
    string fileContent = "File Named as " + data?.FirstOrDefault()?.Name;
    FileManagerService.UpdateTagsToFile(filePath, aiTags);
    fileTags = FileManagerService.GetTagsFromFile(filePath).Select(tag => new ChipItem { Text = tag }).ToList();
    aiTags = null;
    isSave = true;
}

// FileManagerService.cs - UpdateTagsToFile 

public void UpdateTagsToFile(string filePath, string[] newTags)
{
    string adsPath = filePath + ":tags";
    string[] existingTags = GetTagsFromFile(filePath);
    var combinedTags = existingTags.Union(newTags).ToArray();
    using (FileStream fs = new FileStream(adsPath, FileMode.OpenOrCreate, FileAccess.Write))
    using (StreamWriter writer = new StreamWriter(fs))
    {
        string tagsString = string.Join(";", combinedTags);
        writer.Write(tagsString);
    }
}
// FileManagerService.cs - UpdateTagsToFile

public string[] GetTagsFromFile(string filePath)
{
    string adsPath = filePath + ":tags";
    if (File.Exists(adsPath))
    {
        using (FileStream fs = new FileStream(adsPath, FileMode.Open, FileAccess.Read))
        using (StreamReader reader = new StreamReader(fs))
        {
            string tagsString = reader.ReadToEnd();
            return tagsString.Split(new[] { ';' }, StringSplitOptions.RemoveEmptyEntries);
        }
    }
    return new string[0];
}

The tag search is handled through the searching event of the Blazor File Manager. The search action is performed from the File Manager service, and the response will be returned to the component.

public async Task SearchingAsync(SearchEventArgs<FileManagerDirectoryContent> args)
 {
     args.Response = await FileManagerService.Search(args.Path, args.SearchText, false, false, true);
 }

Now, right-click on the file and choose the Manage Tags menu item; the existing tags will be listed in the right pane. If required, tags can be generated and saved for future search. Once saved, the tags can be entered in the search bar, and relevant files will be returned as a search result. This behavior is demonstrated in the GIF image below.

Implementing AI-powered smart tag search in Syncfusion Blazor File Manager

References

For more details, refer to the AI-powered smart search in the Blazor File Manager GitHub demo. Also, try out the live demos for tag search and smart file operations.

Time to switch to smart search

Thanks for reading! You’ve seen how easily AI can upgrade traditional file browsing into a modern discovery experience. If you’re building productivity apps with Blazor, this AI‑powered smart Blazor File Manager UI is a game‑changer.

👉 Try it out, explore the demo, and let your users stop guessing filenames forever.

And don’t forget to share your thoughts in the comments. We always love hearing from you.

If you’re already a Syncfusion user, you can download the latest setup from the license and downloads page. New to Syncfusion? Feel free to try it out with a free 30-day trial.

For any questions or assistance, reach out through our support forum, support portal, or feedback portal. We’re always happy to help!

.NET MAUI State Management: From ViewModels to App Stores

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

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

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

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

Why state management in MAUI matters

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

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

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

Recommended state management approaches in .NET MAUI

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

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

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

MVVM + INotifyPropertyChanged: The foundation

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

In MVVM:

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

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

Here’s the example MVVM implementation:

ViewModel.cs

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

MainPage.xaml

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

MainPage.xaml.cs

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

When to use:

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

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

MVVM architecture flow in .NET MAUI

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

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

The flow looks like this:

Model → View → Message → Update → Model

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

Example

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

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

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

When to use

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

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

MVU architecture flow in .NET MAUI

Visual State Manager (VSM): Declarative UI states

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

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

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

Example:

XAML

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

When to use

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

Avoid placing business logic inside visual state transitions.

Visual State Manager flow in .NET MAUI

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

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

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

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

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

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

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

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

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

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

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

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

How Syncfusion .NET MAUI ListView outshines Collection View

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

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

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

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

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

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

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

1. Grouping with sticky headers

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

a) Syncfusion .NET MAUI ListView

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

Here’s the code you need:

XAML

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

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

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

b) .NET MAUI CollectionView

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

Refer to the following code.

XAML

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

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

Loaded += OnLoaded;

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

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

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

    var index = firstVisibleIndex < 0 ? 0 : firstVisibleIndex;

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

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

2. Swipe actions

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

a) Syncfusion .NET MAUI ListView

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

Refer to the following code example.

XAML

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

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

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

b) .NET MAUI CollectionView

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

Here’s how to implement this feature:

XAML

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

3. Drag-and-drop reordering

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

a) Syncfusion .NET MAUI ListView

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

XAML

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

b) .NET MAUI CollectionView

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

Here’s how you can do it in code:

XAML

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

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

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

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

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

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

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

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

4. Incremental loading

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

a) Syncfusion .NET MAUI ListView

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

Refer to the following code examples for feature implementation.

XAML

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

public ICommand LoadMoreItemsCommand { get; }

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

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

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

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

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

b) .NET MAUI CollectionView

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

Here’s the code you need for quick implementation:

XAML

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

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

public ICommand LoadMoreItemsCommand { get; }

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

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

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

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

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

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

Import and Export Word Documents in .NET MAUI Rich Text Editor with DocIO

Calvince Moth — Wed, 15 Apr 2026 11:49:03 +0000

TL;DR: Developers often need to move Word content seamlessly across platforms. This guide shows how to import Word documents into a .NET MAUI Rich Text Editor and export them back using DocIO, ensuring consistent formatting and productivity.

Bring native Word document handling to your cross‑platform .NET MAUI apps

Modern cross‑platform apps no longer work with plain text alone. They handle full‑fledged documents, rich formatting, images, and structured content that users expect to look consistent on every device.

Among these formats, Word documents remain a preferred choice for real‑world apps. Users expect to open a .docx file, edit it effortlessly, and save it back, whether they’re using a mobile device or a desktop. In a cross‑platform .NET MAUI app, delivering this experience reliably can be challenging.

That’s where the Syncfusion^® .NET MAUI Rich Text Editor comes in. It simplifies document handling across iOS, Android, Windows, and macOS, allowing you to work with rich content while preserving formatting, images, and layout. With built‑in support for importing and exporting Word documents, content moves seamlessly between platforms without unexpected surprises.

This makes it a great fit for:

Business and enterprise apps.
Blog and content editors.
Email composers.
Collaborative and productivity tools.

What this article covers

In this blog, you’ll learn how to:

Import a Word document into the Syncfusion .NET MAUI Rich Text Editor by converting it to HTML.
Export edited content back to Word using Syncfusion .NET Word Library, without losing text, images, or formatting.

Let’s get started!

Getting started with .NET MAUI Rich Text Editor

First, create a .NET MAUI application.

Then, declare the SfRichTextEditor in your XAML page, where the converted Word content will be displayed.

For more details, refer to the Syncfusion .NET MAUI Rich Text Editor blog.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:rte="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"
             x:Class="MauiApp1.MainPage">
    <rte:SfRichTextEditor x:Name="richTextEditor" />
</ContentPage>

Note: Rich Text Editor features are organized into individual modules. To enable the import or export functionality, add the ImportExportService to the provider’s array.

Import a Word document into the .NET MAUI Rich Text Editor

To bring Word content into the .NET MAUI Rich Text Editor, read the Word file stream and load it using the Syncfusion DocIO library.

Next, convert the Word document to HTML so the Rich Text Editor can render it accurately. To ensure images are displayed correctly, we encode them as Base64 and embed them inline, creating a self-contained HTML string. Finally, we assign this HTML string to the SfRichTextEditor.HtmlText property, so the content appears instantly in the Rich Text Editor UI.

Here is the implementation code:

using var inStream = await file.OpenReadAsync();
using var ms = new MemoryStream();
await inStream.CopyToAsync(ms);
ms.Position = 0;

using var document = new WordDocument(ms, FormatType.Automatic);

document.SaveOptions.ImageNodeVisited += (s, args) =>
{
    using var imgMs = new MemoryStream();
    args.ImageStream.Position = 0;
    args.ImageStream.CopyTo(imgMs);

    var bytes = imgMs.ToArray();
    string mime =
        bytes.Length > 3 && bytes[0] == 0xFF && bytes[1] == 0xD8 ? "image/jpeg" :
        bytes.Length > 8 && bytes[0] == 0x89 && bytes[1] == 0x50 && bytes[2] == 0x4E && bytes[3] == 0x47 ? "image/png" :
        bytes.Length > 6 && bytes[0] == 0x47 && bytes[1] == 0x49 && bytes[2] == 0x46 ? "image/gif" :
        bytes.Length > 2 && bytes[0] == 0x42 && bytes[1] == 0x4D ? "image/bmp" :
        "image/png";

    var data = Convert.ToBase64String(bytes);
    args.Uri = $"data:{mime};base64,{data}";
};

using var htmlStream = new MemoryStream();
document.Save(htmlStream, FormatType.Html);
htmlStream.Position = 0;

using var reader = new StreamReader(htmlStream);
var html = await reader.ReadToEndAsync();

richTextEditor.HtmlText = html;

This article was originally published at Syncfusion.com.

How to Digitally Sign PDFs in Android Apps with .NET MAUI

Calvince Moth — Wed, 15 Apr 2026 10:44:12 +0000

TL;DR: Need secure PDF signing in Android apps with .NET MAUI? This hands-on guide walks through digitally signing new and existing PDFs using a PFX certificate, customizing visible signatures, adding timestamps, tracking revisions, and managing signature fields, all with production-ready, developer-friendly APIs.

Why digital signatures matter for Android PDFs

As mobile apps increasingly handle contracts, approvals, and sensitive documents, ensuring document integrity and authenticity is critical.

Digital signatures play a key role by providing:

Integrity: Ensures the document hasn’t been altered.
Authenticity: Verifies the signer’s identity.
Non-repudiation: Prevents signers from denying their actions.
Role in mobile workflows: They enable quick, secure approvals and document exchanges directly from Android devices, ensuring compliance and trust.

Unlike electronic signatures (simple images or consent marks), *digital signatures rely on cryptographic certificates , making them suitable for compliance-driven and security-sensitive workflows.

However, developers often struggle with:

Managing certificates securely
Customizing signature appearance
Implementing standards-compliant signing in mobile apps

This is where a .NET MAUI-based PDF solution significantly simplifies the process. The Syncfusion ^®.NET PDF Library supports digital signatures in Android through .NET MAUI, making it easy to add secure signatures to PDF documents. It offers APIs for certificate-based signing, appearance customization, timestamping, and validation, all within your application.

In this blog post, we’ll walk through using the Syncfusion .NET PDF Library with .NET MAUI to sign new and existing PDFs and implement advanced features such as timestamping, deferred signing, and revision tracking.

By the end, you’ll have a clear roadmap to integrate secure, professional digital signing into your Android MAUI apps.

Implement digital signatures in Android with Syncfusion .NET MAUI PDF Library

The Syncfusion .NET PDF Library simplifies implementing digital signatures in Android apps built with .NET MAUI.

Key features include:

Easy-to-use APIs for adding, validating, and managing signatures.
Support for visible signatures with custom images and metadata.
Compliance with global standards like PAdES and X.509.

With these capabilities, creating secure and professional signing experiences on mobile is effortless.

Set up a .NET MAUI project for Android

Create a new .NET MAUI App in Visual Studio 2022 and ensure the latest .NET MAUI workload is installed.
Install Syncfusion PDF Library
- In Solution Explorer, right-click your project and select Manage NuGet Packages.
- Search for Syncfusion.Pdf.Net and install it.

Installing Syncfusion PDF Library via NuGet in Visual Studio

Note: Run the sample using an Android Emulator or connect a physical Android device for testing.

Curious about creating a .NET MAUI sample using Syncfusion PDF Library? Explore our official documentation for a complete walkthrough.

Add digital signatures to your PDFs in Android using .NET MAUI

Adding a digital signature to a PDF ensures the PDF’s authenticity and legal validity. The process involves creating or loading a document, applying a certificate-based signature, and saving the signed file.

If you’re wondering how to add a digital signature to a PDF on Android, this step-by-step guide will help you integrate it seamlessly.

Step 1: Create and sign a new PDF document

You can create a new PDF from scratch and sign it using a digital certificate. The signing process typically includes:

Creating the PDF document
Adding a page
Loading a certificate (PFX)
Applying a signature field
Customizing signer metadata and appearance

Example code: Create and sign a new PDF

//Creates a new PDF document.
PdfDocument document = new PdfDocument();

//Adds a new page.
PdfPageBase page = document.Pages.Add();

//Create PDF graphics for the page.
PdfGraphics graphics = page.Graphics;

//Creates a certificate instance from a PFX file with a private key.
FileStream certificateStream = new FileStream("PDF.pfx", FileMode.Open, FileAccess.Read);
PdfCertificate pdfCert = new PdfCertificate(certificateStream, "password123");

//Creates a digital signature.
PdfSignature signature = new PdfSignature(document, page, pdfCert, "Signature");

//Sets an image for the signature field.
FileStream imageStream = new FileStream("signature.jpg", FileMode.Open, FileAccess.Read);

//Sets an image for the signature field.
PdfBitmap signatureImage = new PdfBitmap(imageStream);

//Sets signature information.
signature.Bounds = new RectangleF(new PointF(0, 0), signatureImage.PhysicalDimension);
signature.SignedName = "Syncfusion";
signature.ContactInfo = "johndoe@owned.us";
signature.LocationInfo = "Honolulu, Hawaii";
signature.Reason = "I am the author of this document.";

//Draws the signature image.
signature.Appearance.Normal.Graphics.DrawImage(signatureImage, 0, 0);

//Saves the PDF to the memory stream.
using MemoryStream ms = new();
document.Save(ms);

//Close the PDF document
document.Close(true);
ms.Position = 0;#

//Saves the memory stream as a file.
SaveService saveService = new();
saveService.SaveAndView("Result.pdf", "application/pdf", ms);

Step 2: Sign an existing PDF document

To sign an existing PDF:

Load the document
Access the required page and signature field
Apply a certificate-based signature

Syncfusion PDF Library makes this process smooth through APIs that handle field detection and signing.

Example Code: Sign an existing PDF

Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;
string basePath = "CreatePdfDemoSample.Resources.Data.";
Stream inputStream = assembly.GetManifestResourceStream(basePath + "PdfDocument.pdf");
Stream pfxStream = assembly.GetManifestResourceStream(basePath + "PDF.pfx");
Stream signStream = assembly.GetManifestResourceStream(basePath + "signature.png");

PdfLoadedDocument lDoc = new PdfLoadedDocument(inputStream);
PdfLoadedPage page = lDoc.Pages[0] as PdfLoadedPage;
PdfLoadedSignatureField signField = lDoc.Form.Fields[6] as PdfLoadedSignatureField;

//Creates a certificate instance from PFX file with private key.
PdfCertificate pdfCert = new PdfCertificate(pfxStream, "password123");

//Creates a digital signature.
PdfSignature signature = new PdfSignature(lDoc, page, pdfCert, "Signature", signField);

//Sets an image for the signature field. 
PdfBitmap signatureImage = new PdfBitmap(signStream);

//Sets signature information.
signature.Bounds = signField.Bounds;
signature.SignedName = "Syncfusion";
signature.ContactInfo = "johndoe@owned.us";
signature.LocationInfo = "Honolulu, Hawaii";
signature.Reason = "I am the author of this document.";

//Create appearance for the digital signature.
signature.Appearance.Normal.Graphics.DrawImage(signatureImage, new RectangleF(0, 0, 60, 35));

//Saves the PDF to the memory stream.
using MemoryStream ms = new();
lDoc.Save(ms);

//Close the PDF document
lDoc.Close(true);
ms.Position = 0;

//Saves the memory stream as a file.
SaveService saveService = new();
saveService.SaveAndView("Result.pdf", "application/pdf", ms);

This article was originally published at Syncfusion.com.

Export Once, Share Everywhere: Convert DOCX to PDF, HTML, and More in React

Calvince Moth — Tue, 14 Apr 2026 12:01:35 +0000

TL;DR: Still juggling multiple document tools just to share files in your React app? With the advanced export options in Syncfusion React DOCX Editor, you can generate DOCX, PDF, HTML, Markdown, and more from a single editor, with no broken formatting and no manual conversions. You can enable scalable document sharing, reduce conversion errors, and simplify collaboration across teams. The result is faster exports, consistent formatting, and a future-proof workflow that supports both lightweight client apps and enterprise-grade server deployments.

The real problem with document export in React apps

If you’ve ever built a document heavy React app, you already know the pain.

A document gets written once, but somehow needs to exist as a:

DOCX for editing,
PDF for approvals,
Markdown for internal docs,
HTML for publishing.

And the moment exporting isn’t built-in, everything slows down. Manual conversions might work once or twice, but they don’t scale. They introduce errors and waste time. People copy-paste content, use third-party converters, or redo the same work in multiple tools. Formatting breaks. Layouts shift. Everyone gets frustrated.

What you really need is one editor with multiple export options , all handled in a clean, predictable way.

This is exactly where the Syncfusion^® React DOCX Editor changes the game.

Advanced export options in React DOCX Editor

The Syncfusion React DOCX Editor supports a flexible, unified document export experience across teams and platforms. It uses fast, in‑browser exports for common formats and a server‑side Web API for formats that need higher accuracy.

Key features

Client‑side speed with server‑side reliability.
Export modern and legacy formats from one editor.
Consistent formatting across outputs.
Suitable for both lightweight and enterprise apps.

This hybrid approach delivers efficient exports without compromising quality.

Client-side exporting (Instant, no server)

For everyday use cases, exporting directly from the React app is often enough, with no server involved.

You can export to:

SFDT: For drafts, autosave, and round-trip editing.
DOCX: Share editable files via Microsoft Word or Google Docs.
DOTX: Use templates to maintain consistent branding and styles.
TXT: Export plain text for tickets, wikis, or simple tools.

Server-side exporting (Heavy lifting, perfect output)

Some formats need extra processing, especially when layout, pagination, or print quality matter. That’s where the server-side Web API comes in.

Using it, you can export to:

PDF: For finalized documents, printing, or e-signature.
HTML: Publish to web portals or embed in apps.
RTF: For compatibility with rich text editors.
Markdown: Ideal for developer docs and wikis.
ODT: A widely supported open format for cross-platform use.
WordML: Useful for XML-based workflows and systems that require structured document data.

Let’s build a React DOCX Editor and integrate both client-side and server-side export options. By the end, you’ll have a production-ready workflow for seamless document-sharing across formats and platforms.

Server-side export setup for React DOCX Editor

Follow these steps to set up a server-side Web API that enables exporting documents from the Syncfusion React DOCX Editor to formats like PDF, HTML, RTF, Markdown, and ODT.

Step 1: Create a new ASP.NET Core Web API project

First, create a new ASP.NET Core Web API project using your preferred development environment or the .NET CLI.

Step 2: Add the required NuGet packages

Then, install the following NuGet packages to enable document import and export functionalities:

Syncfusion.EJ2.WordEditor.AspNet.Core: Provides a server-side support for handling SFDT content from the Document Editor.
Syncfusion.DocIORenderer.Net.Core: Converts Word documents to formats like PDF, HTML, RTF, Markdown, ODT, and WordML.

Step 3: Define export endpoints in the controller

Add a controller named DocumentEditorController.cs to handle export requests. Include endpoint logic to process SFDT input and return converted documents.

Here’s how you can do it in code:

[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("Export")]
public FileStreamResult Export([FromBody] SaveParameter data)
{
    string fileName = data.FileName;
    string format = RetrieveFileType(string.IsNullOrEmpty(data.Format) ? fileName : data.Format);

    if (string.IsNullOrEmpty(fileName))
    {
        fileName = "Document1.docx";
    }

    WDocument document;
    if (format.ToLower() == ".pdf")
    {
        Stream stream = WordDocument.Save(data.Content, FormatType.Docx);
        document = new Syncfusion.DocIO.DLS.WordDocument(stream, Syncfusion.DocIO.FormatType.Docx);
    }
    else
    {
        document = WordDocument.Save(data.Content);
    }

    return SaveDocument(document, format, fileName);
}

private string RetrieveFileType(string name)
{
    int index = name.LastIndexOf('.');
    string format = index > -1 && index < name.Length - 1
        ? name.Substring(index)
        : ".doc";
    return format;
}

private FileStreamResult SaveDocument(WDocument document, string format, string fileName)
{
    Stream stream = new MemoryStream();
    string contentType = "";

    if (format.ToLower() == ".pdf")
    {
        contentType = "application/pdf";
        DocIORenderer render = new DocIORenderer();
        PdfDocument pdfDocument = render.ConvertToPDF(document);
        stream = new MemoryStream();
        pdfDocument.Save(stream);
        pdfDocument.Close();
    }
    else
    {
        WFormatType type = GetWFormatType(format);
        switch (type)
        {
            case WFormatType.Rtf:
                contentType = "application/rtf";
                break;
            case WFormatType.WordML:
                contentType = "application/xml";
                break;
            case WFormatType.Html:
                contentType = "application/html";
                break;
            case WFormatType.Dotx:
                contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.template";
                break;
            case WFormatType.Docx:
                contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
                break;
            case WFormatType.Doc:
                contentType = "application/msword";
                break;
            case WFormatType.Dot:
                contentType = "application/msword";
                break;
            case WFormatType.Odt:
                contentType = "application/vnd.oasis.opendocument.text";
                break;
            case WFormatType.Markdown:
                contentType = "text/markdown";
                break;
        }
        document.Save(stream, type);
    }

    document.Close();
    stream.Position = 0;

    return new FileStreamResult(stream, contentType)
    {
        FileDownloadName = fileName
    };
}

internal static WFormatType GetWFormatType(string format)
{
    if (string.IsNullOrEmpty(format))
        throw new NotSupportedException("EJ2 Document Editor does not support this file format.");

    switch (format.ToLower())
    {
        case ".dotx":
            return WFormatType.Dotx;
        case ".docx":
            return WFormatType.Docx;
        case ".docm":
            return WFormatType.Docm;
        case ".dotm":
            return WFormatType.Dotm;
        case ".dot":
            return WFormatType.Dot;
        case ".doc":
            return WFormatType.Doc;
        case ".rtf":
            return WFormatType.Rtf;
        case ".txt":
            return WFormatType.Txt;
        case ".xml":
            return WFormatType.WordML;
        case ".odt":
            return WFormatType.Odt;
        case ".html":
            return WFormatType.Html;
        case ".md":
            return WFormatType.Markdown;
        default:
            throw new NotSupportedException("EJ2 Document Editor does not support this file format.");
    }
}

Step 4: Run the web API

Build and run the web API locally to verify that the export endpoints are working as expected.

Client-side setup: Create a React DOCX Editor

Once your server-side export API is up and running, you can move on to building the client-side React app using the Syncfusion React Document Editor.

It allows users to view, edit, and export Word documents directly in the browser without relying on external plugins.

Step 1: Create a new React app

First, create a new React project on the local machine.

Step 2: Install the Syncfusion React Document Editor

Now, install the Syncfusion React DOCX Editor NPM package.

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

Step 3: Import the required styles

To ensure proper styling, import the necessary CSS styles in your App.css or index.css file.

Here’s the code you need:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-documenteditor/styles/material.css';

Step 4: Integrate the React DOCX Editor with advanced export options

Now, create the Exporting.js file in thesrc folder to render the DOCX Editor and configure the advanced export options using the Web API.

Code example for quick integration:

import * as React from 'react';
import { useEffect, useRef } from 'react';
import { DocumentEditorContainerComponent, Ribbon } from '@syncfusion/ej2-react-documenteditor';
import "./index.css";

DocumentEditorContainerComponent.Inject(Ribbon);

// Add the Service URL for server-dependent features
let hostUrl = "http://localhost:5257/api/documenteditor/";

const Exporting = () => {
    const container = useRef(null);
    const defaultSFDT = `{
        "sections": [{
            "blocks": [{
                "inlines": [{
                    "text": "Welcome to Syncfusion Document Editor!",
                    "characterFormat": {
                        "bold": true,
                        "fontSize": 14
                    }
                }]
            }]
        }]
    }`;

    useEffect(() => {
        if (container.current) {
            container.current.documentEditor.open(defaultSFDT);
            container.current.documentEditor.documentName = 'Getting Started';
            container.current.documentEditor.focusIn();
        }
    }, []);

    // Ribbon File tab Export menu
    const ribbonExportItems = [
        { text: 'Word Document (*.docx)', id: 'docx' },
        { text: 'Syncfusion Document Text (*.sfdt)', id: 'sfdt' },
        { text: 'Plain Text (*.txt)', id: 'text' },
        { text: 'Word Template (*.dotx)', id: 'dotx' },
        { text: 'PDF (*.pdf)', id: 'pdf' },
        { text: 'HyperText Markup Language (*.html)', id: 'html' },
        { text: 'OpenDocument Text (*.odt)', id: 'odt' },
        { text: 'Markdown (*.md)', id: 'md' },
        { text: 'Rich Text Format (*.rtf)', id: 'rtf' },
        { text: 'Word XML Document (*.xml)', id: 'wordml' },
    ];

    const fileMenuItems = [
        'New',
        'Open',
        { text: 'Export', id: 'export', iconCss: 'e-icons e-export', items: ribbonExportItems },
        ‘Print’,
    ];

    // Common export handler used by Ribbon menu
    const handleExportById = (value) => {
        switch (value) {
            case 'docx':
                container.current.documentEditor.save('Sample', 'Docx');
                break;
            case 'sfdt':
                container.current.documentEditor.save('Sample', 'Sfdt');
                break;
            case 'text':
                container.current.documentEditor.save('Sample', 'Txt');
                break;
            case 'dotx':
                container.current.documentEditor.save('Sample', 'Dotx');
                break;
            case 'pdf':
                formatSave('Pdf');
                break;
            case 'html':
                formatSave('Html');
                break;
            case 'odt':
                formatSave('Odt');
                break;
            case 'md':
                formatSave('Md');
                break;
            case 'rtf':
                formatSave('Rtf');
                break;
            case 'wordml':
                formatSave('Xml');
                break;
            default:
                break;
        }
    };

    const onFileMenuItemClick = (args) => {
        if (args && args.item && args.item.id) {
            if (args.item.id !== 'export') {
                handleExportById(args.item.id);
            }
        }
    };

    function formatSave(type) {
        let format = type;
        let url = container.current.documentEditor.serviceUrl + 'Export';
        let fileName = container.current.documentEditor.documentName;
        let http = new XMLHttpRequest();
        http.open('POST', url);
        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        http.responseType = 'blob';

        let sfdt = {
            Content: container.current.documentEditor.serialize(),
            Filename: fileName,
            Format: '.' + format
        };

        http.onload = function () {
            if (http.status === 200) {
                let responseData = http.response;
                let blobUrl = URL.createObjectURL(responseData);
                let downloadLink = document.createElement('a');
                downloadLink.href = blobUrl;
                downloadLink.download = fileName + '.' + format.toLowerCase();
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
                URL.revokeObjectURL(blobUrl);
            } else {
                console.error('Request failed with status:', http.status);
            }
        };

        http.send(JSON.stringify(sfdt));
    }

    return (
        <div className="control-pane">
            <div className="control-section">
                <div id="documenteditor_container_body">
                    <DocumentEditorContainerComponent
                        id="container"
                        ref={container}
                        style={{ display: 'block' }}
                        height={'690px'}
                        toolbarMode="Ribbon"
                        ribbonLayout="Classic"
                        serviceUrl={hostUrl}
                        enableToolbar={true}
                        locale="en-US"
                        fileMenuItems={fileMenuItems}
                        fileMenuItemClick={onFileMenuItemClick}
                    />
                </div>
            </div>
        </div>
    );
};

export default Exporting;

Step 5: Launch the application

To see the React DOCX Editor in action:

Start your Web API service.
Then, run your React app using the following command.

npm start

This article was originally published at Syncfusion.com.

Angular Material or PrimeNG? Choosing the Right UI Library in 2026

Calvince Moth — Tue, 14 Apr 2026 11:05:11 +0000

TL;DR: Choosing between Angular Material and PrimeNG in 2026 is really about where you want to pay the cost in production. Angular Material favors predictable UX, strong accessibility defaults, and seamless SSR alignment, making it a solid choice for product and SaaS applications. PrimeNG, on the other hand, accelerates the delivery of data-heavy dashboards by providing enterprise-ready data tables, charts, and hierarchical components out of the box without weeks of custom CDK work.

Every Angular team building for production eventually faces the same crossroads: Angular Material or PrimeNG?

The answer has never been about which library has more stars on GitHub or which blog post ranks higher. It is about understanding what your application actually demands, and what it will demand two years from now when your codebase has tripled in size, and your team has doubled.

If you are researching any of the following:

Angular Material vs PrimeNG
Best Angular UI library in 2026
PrimeNG vs Angular Material for enterprise apps
Which Angular component library should I choose?
Angular Material or PrimeNG for dashboards?

This guide is for production teams shipping real software, not weekend demos.

Quick decision summary (2026)

Before diving into the details, here is a straightforward recommendation table for teams that need an answer now:

If You Are Building…	Recommended Library	Why
Clean SaaS product UI	Angular Material	Predictable UI, official Angular alignment, and clean design tokens.
Government/compliance app	Angular Material	Strongest accessibility defaults and lower compliance risk.
Material Design-aligned app	Angular Material	Native implementation of Google’s Material Design spec.
Enterprise admin dashboard	PrimeNG	Advanced DataTable, charting, and tree hierarchies out of the box.
Data-heavy analytics system	PrimeNG	Virtual scrolling, lazy loading, aggregation, and export are built in.
Custom-branded UI system	PrimeNG	Flexible theming engine, not locked to Material Design aesthetic.

If your situation is more nuanced, read on. The rest of this guide exists precisely for cases where a simple table is not enough.

What changed in Angular UI architecture by 2026?

The Angular ecosystem in 2026 looks fundamentally different from the Angular of two years ago. These shifts directly affect how you should evaluate UI libraries.

Standalone components are the default

NgModules are no longer the primary unit of composition. Standalone components, directives, and pipes are now the default project scaffolding. Any UI library that still forces you to import heavyweight module bundles introduces friction in modern Angular architectures. Both Angular Material and PrimeNG have adapted, but the degree of adaptation matters when structuring a large application with fine-grained lazy-loading boundaries.

SSR is no longer optional

With Angular’s built-in hydration and improved Universal support, server-side rendering has moved from a “nice to have” to a baseline requirement for public-facing applications. UI libraries must render cleanly on the server, hydrate without layout shifts, and avoid browser-only API calls during the initial render pass. Libraries that rely heavily on window, document, or dynamic DOM measurement during initialization create SSR headaches that compound at scale.

Signal-based reactivity

Angular’s signal-based reactivity model has matured. Components built with signals benefit from fine-grained change detection, but only if the UI library’s internal change detection strategy does not fight against it. Libraries that rely on zone.js-triggered change detection or aggressive markForCheck() calls can undermine the performance gains signals provide.

Accessibility is an audit requirement

WCAG compliance is no longer a checkbox for government contracts alone. Enterprise clients, SaaS buyers, and even internal tooling teams increasingly require accessibility audit reports. A UI library accessibility defaults ARIA roles, keyboard navigation, focus management, and screen reader announcements directly reduce or increase the cost of passing those audits.

Design systems govern at scale

Large organizations no longer allow individual teams to pick colors and spacing values. Design tokens, governed design systems, and component libraries with strict visual contracts are standard practice. Your UI library must either be your design system or integrate cleanly with one.

A modern UI library must:

Support standalone components cleanly.
Work with Angular’s signal-based pattern.
Respect accessibility guidelines (WCAG 2.2+).
Avoid unnecessary bundle bloat.
Scale across large development teams.
Provide enterprise-grade data components.

This is where Angular Material and PrimeNG differ significantly.

What is Angular Material?

Angular Material is the official UI component library maintained by the Angular team at Google. It is not a third-party add-on; it ships from the same team that builds the framework itself.

What it implements

Google’s material design system: The same design language used across Google’s own products.
Accessibility-first components: ARIA roles, keyboard navigation, and focus management are built into the component architecture, not bolted on afterward.
Angular CDK (Component Dev Kit): A lower-level toolkit that provides behavioral primitives like overlays, drag-and-drop, virtual scrolling, and accessibility utilities. The CDK is arguably as valuable as the component library itself
Strict design patterns: Opinionated component APIs that enforce consistency.

Where Angular Material excels

Official Angular ecosystem alignment: When Angular introduces a new rendering strategy, a new change detection model, or a new build system, Angular Material is updated in lockstep. You never wait for a third-party maintainer to catch up with a breaking change.
Strong accessibility defaults: Every component ships with correct ARIA attributes, keyboard interaction patterns, and focus management. For teams building applications that must pass WCAG 2.2 AA audits, this reduces remediation work significantly.
Predictable UI behavior: Because Angular Material is opinionated, two different developers on the same team will produce components that look and behave the same way. This consistency compounds over time in large codebases.
Lighter footprint: Angular Material’s component set is deliberately curated rather than exhaustive. This results in a leaner dependency tree and smaller production bundles when you are only importing what you use.
Excellent documentation: API references, usage examples, and accessibility notes are thorough and consistently maintained.

Where Angular Material has limits

Angular Material focuses on consistency and usability, not feature abundance. It does not ship with advanced data grids, charting, tree tables, or rich text editors. If your application needs those capabilities on day one, Angular Material expects you to build them using the CDK or integrate third-party solutions.

This is a deliberate design choice, not an oversight. Angular Material would rather ship fewer components that meet a high bar than ship many components of varying quality.

What is PrimeNG?

PrimeNG is a comprehensive Angular UI component suite built specifically for Angular applications by PrimeTek, the same company behind PrimeFaces (JSF), PrimeReact, and PrimeVue.

What it includes

80+ UI components: From basic buttons and inputs to highly specialized components like organization charts, Gantt-style schedulers, and terminal emulators.
Advanced DataTable: Arguably PrimeNG’s flagship component, with built-in sorting, filtering, pagination, column resizing, row grouping, cell editing, virtual scrolling, lazy loading, and export.
TreeTable: Hierarchical data display with expand/collapse, selection, and filtering.
Charts: Built-in charting powered by Chart.js integration.
Rich form components: Multi-select, autocomplete, cascading dropdowns, color pickers, rating components, and editors.
Multiple themes and layout systems: Including a theme designer and pre-built application templates.

Where PrimeNG excels

PrimeNG is built for enterprise-level application complexity. When a product manager walks in and says, “I need a data grid that supports inline editing, multi-column sorting, row expansion with nested tables, CSV export, and server-side pagination by next sprint,” PrimeNG delivers that without custom engineering.

The library’s breadth means teams spend less time building infrastructure components and more time building business logic. For organizations where time-to-feature matters more than pixel-perfect design consistency, PrimeNG’s value proposition is clear.

Where PrimeNG has trade-offs

The comprehensive nature of PrimeNG comes with a larger API surface, more configuration options, and a bigger bundle footprint.

Bigger API surface: More options means more ways to create inconsistency.
Potential bundle impact: Feature-rich components can add weight if you import broadly.
Accessibility consistency varies: Generally solid, but some components may require more manual attention than Angular Material equivalents.

Core architectural difference

This is the single most important distinction to understand:

Angular Material prioritizes design consistency.
PrimeNG prioritizes feature completeness.

That philosophical difference cascades through every decision:

Dimension	Angular Material	PrimeNG
Component philosophy	Fewer components, higher consistency bar.	More components and broader coverage.
Customization model	Constrained by the design system.	Flexible, sometimes at the cost of consistency.
Advanced features	Build with CDK primitives.	Ships out of the box.
API surface	Smaller and easier to learn.	Larger, more powerful, steeper learning curve.
Design governance	Enforced by the library.	Enforced by the team.

Neither approach is better. But choosing the wrong one for your context creates friction that compounds with every feature you ship.

Real-world comparison (2026 production criteria)

Here is a detailed comparison across the criteria that matter most in production:

Criteria	Angular Material	PrimeNG
Official Angular support	Yes, maintained by the Angular team.	No, third-party (PrimeTek).
Component volume	Moderate (`~30` components + `CDK`).	Extensive (`80+` components).
Advanced DataTable	Basic (CDK-powered, extensible)	Enterprise-grade (built-in)
Built-in charts	No	Yes (`Chart.js` integration)
Tree & hierarchy components	Limited	Strong (Tree, TreeTable, OrgChart)
Theming flexibility	Constrained (Material-based)	Highly flexible (theme designer)
Accessibility defaults	Strong (`WCAG 2.2 AA`)	Good (varies by component)
Bundle size	Smaller per-component	Larger overall footprint
Learning curve	Low	Moderate
Enterprise dashboard readiness	Moderate	High
SSR compatibility	Seamless (official support)	Good (requires configuration care)
Signal-based patterns	Early adopter	Compatible
Long-term upgrade path	Tied to the Angular release cycle	Independent release cycle

Scenario-based evaluation

Abstract comparisons only go so far. Let us look at two concrete application archetypes and evaluate which library serves each one better.

Scenario 1: Clean SaaS product UI

Application profile: A subscription-based B2B platform, project management tools, CRM dashboards, or internal workflow applications.

Typical features needed:

Forms with validation
Dialogs and modals
Tabs and steppers
Side navigation and toolbars
Simple data tables with sorting and pagination
Role-based UI visibility
Responsive layout

Why Angular Material wins here

Clean, consistent UI: Every component follows Material Design’s spacing, typography, and interaction patterns. Designers and developers work from the same system, reducing design-to-code translation errors.
Official Angular support: When Angular ships with a new rendering optimization, Angular Material supports it on day one. You never block a framework upgrade waiting for a UI library update.
Predictable component behavior: Angular Material’s opinionated APIs mean there are fewer ways to misuse a component. A mat-select behaves the same way regardless of which developer implemented it. In a SaaS codebase maintained by rotating team members, this predictability is worth more than raw feature count.
Easier long-term refactoring: A smaller API surface means less configuration to migrate during upgrades. Angular Material’s schematics handle most breaking changes automatically.
Strong accessibility defaults: SaaS products increasingly need to pass accessibility audits to meet the needs of enterprise buyers. Angular Material’s built-in ARIA support reduces the cost of compliance.

For product-focused teams building subscription platforms or internal tools, Angular Material keeps the UI disciplined and lightweight.

Scenario 2: Enterprise admin dashboard

Application profile: An internal operations platform for a large organization, supply chain management, financial reporting, or analytics dashboards.

Typical features needed:

Advanced filtering across multiple data dimensions.
Lazy-loaded data grids with thousands of rows.
Multi-column sorting and grouping.
Tree hierarchies for organizational or category data.
Chart visualizations (bar, line, pie, mixed).
Complex reports with drill-down.
CSV/Excel export.

Why PrimeNG wins here

PrimeNG’s DataTable is purpose-built for this . Out of the box, it provides:

Multi-column sorting
Column resizing and reordering
Server-side and client-side pagination
Virtual scrolling for large datasets
Row grouping and expansion
Lazy loading with backend integration hooks
Built-in export to CSV and Excel

Angular Material’s table is flexible and CDK-powered, but achieving the same feature set requires significant custom development. You would need to build column resizing, row grouping, and export functionality yourself, or integrate additional third-party libraries.

For analytics-heavy dashboards, PrimeNG clearly provides more out-of-the-box power and saves weeks of custom development.

Deep-dive: Data Grid capability

Data grids are often the deciding factor in library selection. If your application revolves around tabular data, this section matters more than anything else in this article.

Angular Material table

Angular Material’s table component is built on the CDK’s table foundation. It is clean, structured, and deliberately minimal:

Declarative column definitions using matColumnDef
Sorting via matSort directive
Pagination via matPaginator component
No built-in filtering UI (you build your own)
No built-in column resizing
No built-in row grouping
No built-in export
Virtual scrolling available via CDK cdk-virtual-scroll-viewport

The Angular Material table is a toolkit, not a finished data grid. It handles basic sorting and pagination well, but advanced scenarios require custom development.

PrimeNG DataTable

PrimeNG’s DataTable is a feature-complete data grid component designed for production use:

Built-in column filtering with multiple match modes (contains, equals, starts with, custom)
Multi-column sorting with priority ordering
Column resizing (fit and expand modes)
Column reordering via drag-and-drop
Row grouping with subheaders and footers
Row expansion with nested content templates
Inline cell editing and row editing
Server-side lazy loading with event callbacks
Virtual scrolling with configurable row height
Selection (single, multiple, checkbox)
Context menus
CSV and Excel export
Column toggling and frozen columns
Aggregation footers (sum, average, count)

The PrimeNG DataTable is a finished product. Configure it, bind your data, and it works. For teams that need advanced data grid capabilities without spending sprints building them, PrimeNG’s DataTable is a strong argument for choosing the library.

The verdict on Data Grids

If grids are core to your product: PrimeNG saves significant engineering time.
If tables are simple: Angular Material stays lean and predictable.

This article was originally published at Syncfusion.com.

Build an AI Content Creation App in Blazor with AI AssistView

Calvince Moth — Mon, 13 Apr 2026 12:01:28 +0000

TL;DR: Build an AI-assisted content creation app in Blazor using Syncfusion AI AssistView as the chat surface. Add Blog/KB modes with different system instructions, suggestions, and output templates, then layer in file attachments, speech-to-text, and text-to-speech via JS interop.

If you’ve ever tried to use a single “write me content” prompt for everything, you’ve seen the problem: blog drafts turn into support docs, and KB articles start reading like marketing copy. The UI is fine, the instructions and structure are what break down.

In this walkthrough, you’ll build a small Blazor Web App (.NET 10) that uses the Syncfusion ^® Blazor AI AssistView component as the chat surface and routes requests through a mode-aware prompt builder so your output stays Blog or Knowledge Base consistently.

Before getting started with this implementation, make sure you’re familiar with the baseline setup (Syncfusion packages and AssistView rendering) described in the official documentation.

What’s new in the content creation app

Here’s what we’re adding on top of the getting-started baseline:

1. Blog vs KB modes

Blogs and KB articles have different success criteria. The mode switch lets you make those differences explicit, so the model stops guessing.

2. Mode-aware prompting

Instead of sending args.Prompt directly, we’ll build a final prompt that includes:

shared rules (markdown, accuracy, etc.)
a mode-specific output template

This is the part that typically improves consistency the most.

3. Real workflow features

Attachments: bring your own reference doc/log/draft.
Speech-to-text: capture ideas faster.
Text-to-speech: review long output hands-free.
Clear prompts: reset and start a fresh session.

How it works (architecture in one minute)

The pattern is simple and scales well:

UI (AI AssistView) collects the user prompt.
A mode selector (Blog vs KB) chooses a configuration:
- system instruction (high-level role + constraints)
- prompt suggestions (starter prompts that match the mode)
- output template (the structure you want back)
Your PromptRequested handler builds a final prompt:
- shared rules (Markdown, accuracy)
- mode template (Blog vs KB outline)
- user request
You call Gemini (or any model) and return the response via UpdateResponseAsync.

This is a practical midpoint between raw chat and a full workflow engine.

After selecting a prompt from the prompt suggestions

After scrolling through the end of the AI response output

That gives you a working AssistView UI. But if you keep one generic instruction and one mixed-suggestion list, users will get an inconsistent output structure. The rest of this post is about fixing that by making mode a first-class concept.

Prerequisites

.NET 10 SDK (or your target SDK)
A Blazor Web App with Syncfusion Blazor configured
Google.GenAI configured with an API key (Gemini)
Browser permission for microphone + speech synthesis (for voice features)

With the groundwork in place, let’s dive into the step‑by‑step implementation

Step 1: Add a Blog/KB mode model

Create a mode enum and a config object:

public enum ContentMode
{
    Blog,
    KnowledgeBase
}

public sealed class ModeConfig
{
    public required string DisplayName { get; init; }
    public required string SystemInstruction { get; init; }
    public required List<string> Suggestions { get; init; }
}

Then define your mode configs:

private ContentMode mode = ContentMode.Blog;

private readonly Dictionary<ContentMode, ModeConfig> modes = new()
{
    [ContentMode.Blog] = new ModeConfig
    {
        DisplayName = "Blog",
        SystemInstruction = @"You are an expert content creator. Generate a developer blog post with clear headings, short paragraphs, and actionable steps. End with 8 FAQs.",
        Suggestions = new List<string>
        {
            "Generate a blog post outline on sustainable energy.",
            "Create a draft blog introduction about Blazor development.",
            "Suggest SEO keywords for a tech blog on AI.",
            "Rewrite this section to be more concise."
        }
    },
    [ContentMode.KnowledgeBase] = new ModeConfig
    {
        DisplayName = "KB",
        SystemInstruction = @"You are an expert support writer. Generate a developer knowledge base article with Summary, Environment, Symptoms, Resolution steps, and Troubleshooting. End with 8 FAQs.",
        Suggestions = new List<string>
        {
            "Write a KB article on troubleshooting network issues.",
            "Draft a KB: 'App fails to start' with resolution steps.",
            "Create a troubleshooting checklist for intermittent timeouts.",
            "Summarize the likely root causes and next diagnostics."
        }
    }
};

private ModeConfig CurrentMode => modes[mode];

Step 2: Wire mode suggestions into AI AssistView

Point AssistView at the current mode’s prompt suggestion list:

<SfAIAssistView @ref="assistView"
                PromptSuggestions="CurrentMode.Suggestions"
                PromptRequested="@PromptRequest">
</SfAIAssistView>

Step 3: Add a simple mode selector (and clear chat on switch)

The key detail here: clear prompts when switching modes. Otherwise, the previous tone/structure can leak into the next request.

<div style="width:155px; padding-bottom:20px; margin-left:34px">
    <label for="contentType">Content Type</label>
    <SfDropDownList TValue="string"
                    ID="contentType"
                    TItem="ContentType"
                    Placeholder="Select a content type"
                    DataSource="@ContentTypes"
                    @bind-Index="@selectedContentTypeIndex">
        <DropDownListFieldSettings Value="ID"
                                   Text="Text">
        </DropDownListFieldSettings>
        <DropDownListEvents TValue="string"
                            TItem="ContentType"
                            ValueChange="OnValueChange">
        </DropDownListEvents>
    </SfDropDownList>
</div>

public class ContentType
{
    public string? ID { get; set; }
    public string? Text { get; set; }
}
private int? selectedContentTypeIndex{ get; set; } = 0;

List<ContentType> ContentTypes = Enum.GetValues(typeof(ContentMode))
    .Cast<ContentMode>()
    .Select(mode => new ContentType
    {
        ID = mode.ToString().ToLower(),
        Text = mode.ToString()
    })
    .ToList();

public void OnValueChange(ChangeEventArgs<string, ContentType> args)
{
    if (Enum.TryParse<ContentMode>(args.ItemData.Text, out var parsed))
    {
        mode = parsed;

        // Prevent tone/structure “leakage” across modes
        assistView?.Prompts?.Clear();
        StateHasChanged();
    }
}

Blog and KB option on the page

Step 4: Make SystemInstruction mode-aware

In your PromptRequested handler, set SystemInstruction based on the mode:

GenerateContentConfig config = new GenerateContentConfig()
{
    SystemInstruction = new Content()
    {
        Parts = new List<Part>
        {
            new Part { Text = CurrentMode.SystemInstruction }
        }
    }
};

Step 5: Add a structured prompt builder (shared rules + mode template)

This is where output consistency really improves:

private string BuildUserPrompt(string rawPrompt)
{
    var sharedRules = """
        Use Markdown.
        Use headings and bullet points where helpful.
        Be accurate and avoid making up product behaviors.
        """;

    var modeTemplate = mode switch
    {
        ContentMode.Blog => """
            Output structure:
            - # Title
            - Intro (direct answer + bullets)
            - Main sections with H2/H3 headings
            - Common mistakes
            - Conclusion
            - FAQs (3)
            """,
        ContentMode.KnowledgeBase => """
            Output structure:
            - # Title
            - Summary
            - Environment / Applies to
            - Symptoms
            - Resolution (numbered steps)
            - Troubleshooting
            - FAQs (3)
            """,
        _ => ""
    };

    return $"""
        {sharedRules}
        {modeTemplate}
        User request:
        {rawPrompt}
        """;
}

Step 6: Call Gemini with the final prompt

Then call Gemini with the final prompt and update AssistView:

private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
{
    var config = new GenerateContentConfig
    {
        SystemInstruction = new Content
        {
            Parts = new List<Part> { new Part { Text = CurrentMode.SystemInstruction } }
        }
    };

    try
    {
        var finalPrompt = BuildUserPrompt(args.Prompt);

        var content = await client.Models.GenerateContentAsync(
            "gemini-2.5-flash",
            finalPrompt,
            config);

        var responseText = content.Candidates[0].Content.Parts[0].Text;

        await assistView.UpdateResponseAsync(responseText);
        args.Response = assistView.Prompts[^1].Response;
    }
    catch (Exception ex)
    {
        args.Response = $"Error: {ex.Message}";
    }
}

Notes for reliability:

BuildUserPrompt(...) is where you centralize formatting and guardrails.
UpdateResponseAsync(…) pushes the model response back into the Syncfusion Blazor AI AssistView UI.

This article was originally published at Syncfusion.com.

Embed a Secure Inline PDF Viewer in React: No Downloads, Full Control

Calvince Moth — Mon, 13 Apr 2026 11:42:24 +0000

TL;DR: Every time a PDF opens in Acrobat, something breaks, users leave your app, analytics lose visibility, and security controls stop at the hard drive. What if PDFs never had to leave your UI at all? Embed PDF documents directly inside your app using the Syncfusion React PDF Viewer, lock down printing and downloads, tailor tools by user role, and capture real interaction data for audits and analytics, so PDFs stay part of your workflow, not an escape route.

Stop downloading to view PDFs in your React app: There’s a better way

Every time a PDF downloads and opens outside your app, you lose more than you expect:

User attention: The interface disappears.
Workflow continuity: Navigation breaks and context are lost.
Control over sensitive documents: Security rules stop applying.

Users click a document, the browser launches Acrobat or a native viewer, and your app is suddenly out of the picture. At that point, analytics go dark, and there’s no reliable way to know what the user did with the document.

For modern React applications, especially internal portals, SaaS dashboards, and enterprise tools, this experience no longer works. Users expect PDFs to load instantly, stay in line, and remain secure without forced downloads or context switches.

This guide shows how to embed a secure PDF Viewer in React using Syncfusion^®, so documents render directly inside your app. You’ll learn how to:

Disable printing and downloads.
Configure role‑based toolbars.
Track document interactions for audit and analytics purposes.

The result: PDFs become a controlled, first‑class part of your workflow, not something that pulls users out of it.

Why PDF downloads hurt your web app experience

Considering a scenario, you’ve built a polished internal web portal with quick navigation and smooth UX. Then a user clicks a use-case file, and Chrome hands the PDF to Adobe Acrobat.

Your app just lost the user.

Here’s why that single click silently damages your product metrics.

1. It instantly breaks the user flow

Switching from your app to a native desktop viewer is a hard context switch. The user is suddenly in Acrobat’s viewer UI, with different controls, and no clear path back.

For internal tools, HR portals, procurement systems, loan dashboards, and compliance apps, these broken flows don’t just frustrate users; they also undermine productivity. They create real operational drag.

2. “Just download it” isn’t actually simple

A “simple PDF download” is rarely simple:

Click -> download → wait → find file → open → read → return to app.

Each extra step reduces completion rates, especially in onboarding, review, and approval workflows.

3. Mobile users get hit the hardest

On mobile, PDF downloads often fail outright:

No default PDF reader.
Files buried in downloads.
Storage permission pop‑ups.
Broken navigation back to the app.

In a mobile‑first enterprise world, downloads become a dead end.

4. Analytics & visibility disappear

Once the PDF leaves your app, it disappears from your observability stack. You cannot reliably answer:

Did they open it?
Which pages did they read?
Where did they stop?
How long did the review take?

An embedded viewer keeps those interactions inside your product so you can instrument them.

The hidden security & compliance risks of PDF downloads

For enterprise teams, the problem with PDF downloads isn’t just bad UX; it’s a security and compliance liability waiting to happen.

1. Downloaded PDFs are beyond your control

Once a PDF is downloaded on a device:

You can’t revoke access.
You can’t prevent forwarding.
You can’t audit distribution.

For organizations handling financial data, health records, legal contracts, or intellectual property, this isn’t a theoretical risk. It’s a compliance and security failure.

2. Sensitive data exposure risk increases

Download-by-default often conflicts with internal governance and regulated requirements, including SOC 2, GDPR, HIPAA, PCI, and ISO policies. Audits tend to focus on exactly this: where data goes and who can keep it.

3. No access revocation

Role changes, vendor offboarding, and account termination do not affect files that have already been downloaded. That is a permanent data leakage risk.

4. Vulnerable browser plugins

Not every enterprise user is running an updated machine. Many are still using outdated browser PDF plugins, which are a known attack vector for maliciously crafted PDFs.

What a fast, secure, inline PDF Viewer should include

Before you pick up a solution, here’s what a production-ready embedded PDF viewer needs to deliver.

View-only mode with download/print disabled.
Role-based tools with different toolbars for viewers, reviewers, and auditors.
Responsive UX for desktops and mobile.
Progressive rendering and smooth zoom/search on large PDFs.
Event hooks for analytics and audit trails.
Straightforward and easy, framework-friendly .
Enterprise-ready controls with access enforcement, logging strategy, and maintainability.

This article was originally published at Syncfusion.com.