DEV Community: Calvince Moth

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.

Convert Markdown to PDF in C# Using .NET Word Library

Calvince Moth — Fri, 10 Apr 2026 11:42:27 +0000

TL;DR: Convert Markdown to PDF in C# using .NET Word Library with just a few lines of code. Install the NuGet package, add namespaces, and run the conversion. Customize images with events, embed diagrams, or handle base64 streams. Ideal for documentation, eBooks, reports, and compliance workflows. Fast, accurate, and scalable for developer productivity.

Markdown is loved by developers, but PDFs are trusted by everyone else

Markdown is a popular choice for developers creating documentation and technical content. But when it comes to sharing or archiving, PDF is the preferred format for its consistency and professionalism.

In this blog, you’ll learn how to convert Markdown to PDF using C# and ** ** Syncfusion^® .NET Word Library with practical code examples, real-world use cases, and advanced customization tips.

Why convert Markdown to PDF?

Markdown is ideal for:

Writing clean, readable documentation.
Creating lightweight technical content.
Collaborating in version-controlled environments.

PDF is better for:

Printing and sharing with non-technical users.
Preserving formatting across devices.
Archiving and compliance.

Bringing these formats together gives you both developer-friendly writing and professional-grade output. Next, let’s look at what you’ll need before starting the conversion process.

Prerequisites

.NET project (console app, service, or web app).
A Markdown file (for example: Input.md).
Syncfusion DocIO package.

How to convert Markdown to PDF in C# using .NET Word Library

Follow these steps to convert a Markdown file to PDF in C# using Syncfusion .NET Word Library:

Step 1: Install the Syncfusion DocIO NuGet package

First, add the Syncfusion.DocIORenderer.Net.Core NuGet package to your project, as shown below.

Installing the Syncfusion DocIO NuGet package

Step 2: Add required namespaces

Next, add the following namespaces to your file:

using Syncfusion.DocIO;
using Syncfusion.DocIO.DLS;
using Syncfusion.DocIORenderer;
using Syncfusion.Pdf;

Step 3: Convert Markdown to PDF using C

Open the Markdown stream in Word, then save it as a PDF.

Here’s the code you need:

// Open the Word document file stream.
using (FileStream inputStream = new FileStream("Template.md", FileMode.Open, FileAccess.ReadWrite))
{
    // Load an existing Word document.
    using (WordDocument wordDocument = new WordDocument(inputStream, FormatType.Markdown))
    {
        // Create an instance of DocIORenderer.
        using (DocIORenderer renderer = new DocIORenderer())
        {
            // Convert Word document into PDF document.
            using (PdfDocument pdfDocument = renderer.ConvertToPDF(wordDocument))
            {
                // Save the PDF file to the file system.
                using (FileStream outputStream = new FileStream("Output.pdf", FileMode.Create, FileAccess.ReadWrite))
                {
                    pdfDocument.Save(outputStream);
                }
            }
        }
    }
}

By executing this code example, we will get output like in the following image.

Converting a Markdown document to PDF using C# and Syncfusion .NET Word Library

Advanced image customization options

When converting Markdown to a PDF using the .NET Word Library, we have the flexibility to modify the images included in the input Markdown file.

Hook the ImageNodeVisited event

We can download images listed as URLs in the Markdown file and insert them into the resulting Word document.

You can:

Replace placeholder images with client-specific branding.
Embed diagrams from URLs or local folders.
Handle base64-encoded images.
Customize image streams using the ImageNodeVisited event.

Refer to the following code example to achieve this.

// Open a file as a stream.
using (FileStream fileStreamPath = new FileStream("Input.md", FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
{
    // Create a Word document instance.
    using (WordDocument document = new WordDocument())
    {
        // Hook the event to customize the image while importing Markdown.
        document.MdImportSettings.ImageNodeVisited += MdImportSettings_ImageNodeVisited;

        // Open an existing Markdown file.
        document.Open(fileStreamPath, FormatType.Markdown);

        // Create an instance of DocIORenderer.
        using (DocIORenderer renderer = new DocIORenderer())
        {
            // Convert Word document into PDF document.
            using (PdfDocument pdfDocument = renderer.ConvertToPDF(document))
            {
                // Save the PDF file to the file system.
                using (FileStream outputStream = new FileStream("Output.pdf", FileMode.Create, FileAccess.ReadWrite))
                {
                    pdfDocument.Save(outputStream);
                }
            }
        }
    }
}

What this changes: Now, every time DocIO encounters an image in Markdown, it calls your handler and gives you a chance to provide the actual image stream.

Implement the image handler

The following C# code illustrates the use of the event handler to customize the image based on the source path.

private static void MdImportSettings_ImageNodeVisited(
    object sender,
    Syncfusion.Office.Markdown.MdImageNodeVisitedEventArgs args)
{
    // Retrieve the image from the local machine file path and use it.
    if (args.Uri == "Road-550.png")
    {
        args.ImageStream = new FileStream(args.Uri, FileMode.Open);
    }
    // Retrieve the image from the website and use it.
    else if (args.Uri.StartsWith("https://"))
    {
        using WebClient client = new WebClient();
        // Download the image as a stream.
        byte[] image = client.DownloadData(args.Uri);
        Stream stream = new MemoryStream(image);
        // Set the retrieved image from the input Markdown.
        args.ImageStream = stream;
    }
    // Retrieve the image from the Base64 string and use it.
    else if (args.Uri.StartsWith("data:image/"))
    {
        string src = args.Uri;
        int startIndex = src.IndexOf(",");
        src = src.Substring(startIndex + 1);

        byte[] image = Convert.FromBase64String(src);
        Stream stream = new MemoryStream(image);
        // Set the retrieved image from the input Markdown.
        args.ImageStream = stream;
    }
}

This article was originally published at Syncfusion.com.

Why .NET MAUI Popups Lag and How to Fix Performance Issues

Calvince Moth — Fri, 10 Apr 2026 07:05:21 +0000

TL;DR: Heavy popup content can block the UI thread and cause lag. Improve .NET MAUI Popup performance by reusing the popup view with ContentTemplate, loading data only when needed, virtualizing long lists, and keeping animations lightweight and fast.

Your .NET MAUI app can feel fast until a popup opens with heavy UI. Then you see it: stuttering animations, slow scrolling, and a fragile feel that users notice immediately.

Syncfusion ^®.NET MAUI Popup is designed for performance; however, when integrating popups with large datasets or complex layouts, you still need optimization to ensure a consistently smooth experience.

In this blog, we will show you how to improve your app’s performance when using Syncfusion .NET MAUI Popup by applying the following proven techniques:

Lazy initialization (create/load only when needed)
Content caching (reuse the same view across opens)
Virtualization for large lists
Smooth, jank-free animations
A safe content template lifecycle strategy

With these strategies, you will achieve faster load times, reduced memory usage, and a seamless user experience across Android, iOS, Windows, and macOS.

Speed up .NET MAUI Popup: Best practices

Let’s integrate Syncfusion .NET MAUI Popup into a .NET MAUI app and apply these performance techniques.

Note: To get started with .NET MAUI Popup, check the official documentation.

Scenario: Product details popup with a large variants list.

For this example, we’ll work with a sample application that shows a list of products. When the user taps a product, a popup displays product details, along with a potentially long list of variants (we simulate 1,000 variants to stress-test performance).

The goal is to reduce:

Tap-to-visible time (how fast the popup appears).
UI thread works during open/close animations.
Memory churn caused by repeated view creation.

You can explore the complete sample implementation used in this walkthrough from the GitHub repository.

How it works (what usually makes popups slow)

Popups often feel slow for a few predictable reasons:

View creation cost: Building a complex visual tree each time you open the popup.
Data loading cost: Populating collections and binding large data at the wrong time (often right as the popup animates in).
List rendering cost: Creating UI containers for hundreds/thousands of rows without virtualization.
Animation contention: Doing heavy work on the UI thread while the popup is animating.

The patterns below directly target these bottlenecks.

Step 1: Cache and reuse the popup content via ContentTemplate

We start by ensuring that the popup’s content is created only once and then reused. This caching approach prevents the framework from rebuilding the entire visual tree each time the popup opens, reducing unnecessary CPU work and memory use.

By wrapping our _popupView inside a DataTemplate and assigning it to ProductPopup.ContentTemplate, the first time the popup is shown, the Syncfusion .NET MAUI Popup reuses that same instance on every subsequent open instead of recreating it.

Here’s how you can do it in code:

private ProductDetailsPopupView? _popupView; // This will hold our cached view
private readonly MainViewModel _viewModel;

public MainPage()
{
    InitializeComponent();
    _viewModel = new MainViewModel();
    BindingContext = _viewModel;

    _viewModel.RequestOpenPopup += async (s, product) =>
    {
        if (_popupView == null) // Create the view only on the first open
        {
            _popupView = new ProductDetailsPopupView
            {
                BindingContext = _viewModel // Keep the same ViewModel instance
            };
            // Assign the cached view using a DataTemplate
            ProductPopup.ContentTemplate = new DataTemplate(() => _popupView);
        }

        // ... (rest of the popup opening logic)
    };
    // ...
}

In the above code example, ContentTemplate returns the same cached view instance, so the UI tree is not recreated on every open. That’s a direct win for CPU and GC pressure.

Step 2: Lazy initialize popup data only when the user taps (on-demand)

Even with a cached view, you can still slow down your app by preparing data too early (for example, during page initialization). A better approach is to load popup data only when the user actually taps a product.

In our sample, the product details and variant information are populated on demand, right before the popup opens. This keeps the app lightweight at startup while ensuring the popup always displays the correct information for the selected product.

When OnProductTapped is triggered, InitializeDetails updates the popup’s data source, refreshes the variants list, and resets SelectedVariant to null. This guarantees a consistent initial state, for example, keeping Add to Cart disabled until a variant is chosen.

Code snippet to achieve this:

public void OnProductTapped(Product product)
{
    SelectedProduct = product;
    InitializeDetails(product); // Prepares popup data just before showing
    RequestOpenPopup?.Invoke(this, product); // Signals MainPage to open the popup
}

By updating the popup’s data only when it’s needed, you avoid unnecessary work during page load and ensure each product tap produces accurate, up-to-date details.

Step 3: Virtualized list for large datasets

Large lists inside a popup can seriously impact performance if the UI is forced to create a view for every row. Using a virtualized list ensures that only the visible items are rendered, while off‑screen containers are recycled as the user scrolls.

In our sample, we display a large set of variants (simulated at 1,000 items) using the Syncfusion .NET MAUI ListView. Since it’s virtualized by design, it creates UI elements only for items currently in view and reuses them as you scroll. This greatly reduces memory usage and keeps the popup responsive, even with large datasets.

Below is the code you need:

<SfListView:SfListView x:Name="VariantsList"
                       Grid.Row="1"
                       ItemsSource="{Binding Variants}"
                       SelectedItem="{Binding SelectedVariant, Mode=TwoWay}"
                       SelectionMode="Single" >

Step 4: Fluid, jank-free animations

Even small UI stalls become noticeable during animations. To keep the popup feeling fluid, let the animation run without competing for UI thread time, and fine-tune the animation settings to feel quick and natural.

To ensure the popup opens and closes smoothly without stuttering, we rely on SfPopup’s built-in animations and avoid heavy operations during these critical UI moments.

Setting AnimationDuration to a short value (e.g., 180ms) and Animation Easing to a curve like SinOut makes the Fade animation feel fast and natural, contributing significantly to a responsive user experience.

Add this to your project:

<syncfusion:SfPopup 
…
    AnimationMode="Fade" 
    AnimationDuration="180" <!-- A quick, snappy duration -->
    Easing="SinOut" <!-- Enhances fluidity -->>
…
</syncfusion:SfPopup>

This article was originally published at Syncfusion.com.

How to Protect Sheets and Workbooks in a React Spreadsheet

Calvince Moth — Thu, 09 Apr 2026 13:19:27 +0000

TL;DR: Want your React spreadsheets to feel rock‑solid without slowing your users down? Spreadsheet protection gives you the best of both worlds: you can lock down formulas, structure, and layouts while keeping key input cells open for editing. Use sheet protection + protectSettings to decide exactly what users can and can’t do, lockCells() to open just the ranges that matter, and workbook protection to stop sheet renaming, deleting, or moving.

Handling sensitive or business-critical data in the Syncfusion^® React Spreadsheet? Protecting sheets and workbooks ensures your templates, formulas, and inputs stay intact and tamper‑free.

This guide walks you through:

When to protect a sheet vs. a workbook
How to lock/unlock cells
How to configure granular permissions
How to apply read‑only mode
Practical protection patterns for real‑world use cases

Protection features in React Spreadsheet

Syncfusion includes different layers of protection, each for different use cases:

Workbook protection: Prevents structural changes like:
- Adding/removing sheets
- Renaming or hiding sheets
- Rearranging sheet order
Sheet protection: Restrict editing on the current sheet. Used when:
- You want formulas protected
- You want only certain cells to be editable
- You want users to view but not modify content
Cell locking: Lock selected cells or ranges while keeping others editable.
Password protection: Secure sheets with a password to prevent unauthorized changes.
Selective permissions: Control actions such as inserting/deleting cell data, formatting, resizing rows/columns, and inserting hyperlinks.
Read-only mode: Make cells non-editable to prevent modifications.

Ready to lock it down? Explore advanced sheet-protection methods in Syncfusion React Spreadsheet to keep your data secure.

Let’s dive in and see how you can lock sheets, secure cells, protect workbooks, and manage permissions with ease!

Protecting a sheet

The protect sheet feature makes a sheet read-only, preventing edits unless you explicitly allow them. Enable sheet protection by setting the isProtected property to true (it is false by default).

By default, these actions are disabled:

Selecting cells
Editing cells
Formatting rows, columns, or cells
Inserting links
Resizing, hiding rows/columns

Customizing permissions with protectSettings

The protectSettings option lets you enable specific actions even when a sheet is protected. All options are disabled by default; set to true to enable.

The available protectSettings options are,

Select locked cells: Allow selecting locked cells for highlighting.
Select unlocked cells: Allow selecting only unlocked cells.
Format cells: Apply cell style like font, color, borders, number format, and conditional format.
Format rows: Resize and hide Rows.
Format columns: Resize and hide Columns.
Insert link: Insert hyperlinks in unlocked cells.

For example, if formatCells: true is set in protectSettings, users can still apply styles, borders, and font or background colors even while the sheet is protected.

This article was originally published at Syncfusion.com.

Add Digital Signatures to a WPF PDF Viewer with a Click-to-Place eSign Workflow

Calvince Moth — Thu, 09 Apr 2026 11:44:02 +0000

TL;DR: Learn to implement digital signatures inside the Syncfusion WPF PDF Viewer using programmatic techniques. It covers adding a custom eSign button, capturing click positions, generating a signature image, and applying a certificate-based signature. It enables a smooth, secure in-app signing experience even though the viewer does not support signature creation through its UI.

Digital signatures are no longer optional

A digital signature is a cryptographic stamp applied to a document using a certificate containing a private key. It isn’t just about convenience; it’s about trust.

Digital signatures ensure:

Document authenticity.
Tamper protection.
Verified signer identity.

For this reason, digital signatures are standard in legal, financial, and enterprise document workflows.

The smart workaround: In‑app digital signing in WPF PDF Viewer

While Syncfusion WPF PDF Viewer currently supports viewing digital signatures, it does not allow adding or modifying them directly through the UI.

But by combining the Syncfusion WPF PDF Viewer and .NET PDF Library, we can enable programmatic digital signing. We can customize the toolbar, capture user interactions, and embed a certificate-based signature with a dynamically generated image.

Instead of relying on external tools or complex user flows, this solution enables secure, fully integrated digital signing, right inside your WPF PDF Viewer.

Requirements

1. Set up the environment

Install the following prerequisites:

Visual Studio 2022 or newer with the WPF workload enabled.
The Sycfusion.PdfViewer.WPF NuGet package, which includes both the viewer control and the PDF processing library.

2. Certificate for signing

We need a valid .pfx certificate file that contains a private key. This certificate is used to securely sign the PDF and embed metadata such as the signer’s identity, location, and signing reason.

Add a digital signature using Syncfusion WPF PDF Viewer and .NET PDF Library

This digital signing workflow is built around the following four key steps:

Step 1: Add an eSign button to the toolbar

When the WPF PDF Viewer loads, you can inject a custom eSign button into the existing toolbar.

To keep the UI consistent, we will reuse the style and icon of an existing toolbar item, as shown in the following code.

private void PDFViewer_Loaded(object sender, RoutedEventArgs e)
{
    var toolbar = PDFViewer.Template.FindName("PART_Toolbar", PDFViewer) as DocumentToolbar;
    var stackPanel = toolbar.Template.FindName("PART_ToolbarStack", toolbar) as StackPanel;
    var defaultButton = (Button)((StackPanel)stackPanel.Children[^1]).Children[0];
    var eSignButton = GetButton((Path)defaultButton.Content, defaultButton);
    stackPanel.Children.Add(eSignButton);
}

The GetButton method is responsible for:

Creating the new button,
Applying the existing style, and
Attaching the click event that activates the signing mode.

Step 2: Capture the exact spot where the user clicks

Once the eSign button is clicked, a flag is set to indicate that the next mouse click should trigger signature placement. This will convert the mouse-click coordinates to page-relative positions using the WPF PDF Viewer’s built-in method. So, the signature lands exactly where the user clicked.

This ensures:

Pixel‑perfect placement.
Support for multi‑page PDFs.
A natural “click‑to‑sign” feel users already expect.

Refer to the following code example.

private void PDFViewer_PageClicked(object sender, PageClickedEventArgs args)
{
      if (addSignature)
      {
          var pageIndex = PDFViewer.CurrentPageIndex - 1;
          var pagePoint = PDFViewer.ConvertClientPointToPagePoint(args.Position, pageIndex + 1);
          ApplySignature(pageIndex, pagePoint);
          addSignature = false;
      }
}

Step 3: Dynamically generate a signature image

Instead of a generic stamp, this solution creates a meaningful visual signature. It:

Generates a runtime image block containing:
- Signer name.
- Date and time.
Combines it with a handwritten‑style name image.
Produces a polished eSign graphic every time.

The visual result meets professional and regulatory requirements.

private void CreateCurrentDataImage()
{
     string text = $"Digitally signed by John\nDate: {DateTime.Now:yyyy.MM.dd\nHH:mm:ss zzz}";
     using var bitmap = new Bitmap(200, 100);
     using var graphics = Graphics.FromImage(bitmap);
     graphics.FillRectangle(Brushes.White, 0, 0, 200, 100);
     graphics.DrawString(text, new Font("Arial", 9), Brushes.Black, new RectangleF(10, 10, 180, 80));
     bitmap.Save(filePath + "DigitalSignatureBlock.png", ImageFormat.Png);
}

private void CombineSignatureAndDataImage()
{
      using var nameImage = Image.FromFile(filePath + "John.png");
      using var signImage = Image.FromFile(filePath + "DigitalSignatureBlock.png");
      using var combinedImage = new Bitmap(nameImage.Width + signImage.Width, Math.Max(nameImage.Height, signImage.Height));
      using var g = Graphics.FromImage(combinedImage);
      g.DrawImage(nameImage, 0, 0);
      g.DrawImage(signImage, nameImage.Width, 0);
      combinedImage.Save(filePath + "ESign.png", ImageFormat.Png);
}

Step 4: Apply a certificate‑based digital signature

Here’s where security comes in. Using the .pfx certificate:

A cryptographic digital signature is applied.
Metadata is embedded (reason, location, contact information).
The signature is rendered visually at the chosen location.

Then, the PDF is saved and reloaded, now officially signed. All of this happens programmatically and securely.

private void ApplySignature(int pageIndex, Point pagePoint)
{
      var page = PDFViewer.LoadedDocument.Pages[pageIndex] as PdfLoadedPage;
      var cert = new PdfCertificate(filePath + "PDF.pfx", "password123");
      var signature = new PdfSignature(PDFViewer.LoadedDocument, page, cert, "Signature");
      var image = new PdfBitmap(filePath + "ESign.png");
      signature.Bounds = new RectangleF((float)pagePoint.X, (float)pagePoint.Y, image.PhysicalDimension.Width, image.PhysicalDimension.Height);
      signature.ContactInfo = "johndoe@owned.us";
      signature.LocationInfo = "Honolulu, Hawaii";
      signature.Reason = "I am the author of this document.";
      signature.Appearance.Normal.Graphics.DrawImage(image, 0, 0);
      using var stream = new MemoryStream();
      PDFViewer.LoadedDocument.Save(stream);
      stream.Position = 0;
      PDFViewer.Load(stream);
}

This article was originally published at Syncfusion.com.

Best LLM APIs in 2026: Comparing OpenAI, Claude, Gemini, Azure, Bedrock, Mistral & DeepSeek

Calvince Moth — Wed, 08 Apr 2026 12:56:03 +0000

TL;DR: Choosing an LLM API in 2026 isn’t about “the best model”; it’s about the best fit for your workload. OpenAI and Claude lead in agentic workflows and developer speed, Gemini dominates multimodal long-context tasks, Azure OpenAI and AWS Bedrock excel in regulated enterprise environments, Mistral offers an EU-friendly open-weight path, and DeepSeek wins on ultra-low cost with OpenAI-compatible APIs.

The LLM API market in 2026 is no longer the “wild west”, but it still changes fast enough that last year’s comparison posts age out quickly. Most major providers now ship new model families every few months. 1M-token context is common across flagships. And agentic features (tool calling, computer use, multi-step workflows) are now expected, not “nice to have.”

So what actually separates a good architectural choice from a painful one?

Not marketing. The difference shows up in the boring-but-critical details: latency under load, pricing at scale, SDK quality, compliance posture, rate limits, and deprecation timelines.

This guide compares the top 7 LLM APIs of 2026 with production reality in mind.

The real developer pain (what hits in production)

Teams rarely fail because they picked the “wrong” model. They fail because the platform’s operational details don’t match their workload.

Common pain points:

Onboarding friction: SDK maturity and example depth decide whether “Hello, world” takes 10 minutes or half a day.
Architecture trade‑offs: Do you rely on 1M‑token prompts or build a slim RAG layer? Your choice impacts latency, token spend, and maintainability.
Latency-sensitive apps: Streaming TTFT matters more than raw TPS; caching helps TTFT, not generation speed.
Cost unpredictability: Learn the batch API and prompt caching knobs or pay 40–60% more than you need.
Vendor lock-in: Proprietary caching keys, computer‑use runtimes, quota models can become hard dependencies; abstract early.
Production reliability: Watch rate limits, region availability, and model deprecation windows; build for churn.

What’s changed in 2026

The AI API landscape shifted fast this year. Three big changes reshaped developer choices:

1M+ context windows became normal

All major vendors now support ~1M tokens. Long-context workflows (codebases, legal docs, video transcripts) are finally mainstream.
Agentic capabilities matured

Computer use, multi-step tool calls, and structured reasoning are no longer experimental. Some providers are still ahead here (notably Claude and OpenAI), while others are still catching up.
Cost spread widened dramatically

DeepSeek disrupted pricing at the bottom end. Azure and Bedrock increased their enterprise tooling. OpenAI and Anthropic improved caching and batch options, making large contexts cheaper in practice.

Net result: In 2026, teams choose based on workflow + constraints, not just raw model quality.

This article was originally published at Syncfusion.com.

How to Integrate React Gantt Chart in Framer

Calvince Moth — Wed, 08 Apr 2026 11:30:12 +0000

TL;DR: Tired of inefficient coding cycles in project management tools? Integrating a React Gantt Chart into Framer streamlines setup, delivers structured files, and enables task-driven execution, all directly on the canvas. With Framer’s developer mode and Gantt integration, you achieve an efficient workflow that keeps project timelines precise. The result is fewer errors, faster previews, neater layouts, and scalable visualizations for your team.

The Syncfusion^® React Gantt Chart is a robust tool for project planning and tracking. It provides an interactive timeline to manage tasks, dependencies, and resources with built-in editing and drag-and-drop. Using it in Framer’s design and prototyping platform allows developers and designers to build interactive, data-driven project management UIs.

This blog walks through a step-by-step approach to integrating the Syncfusion React Gantt Chart into a Framer project, including a practical, working code example to help you get started quickly.

Why integrate Syncfusion React Gantt Chart with Framer?

Framer’s developer mode supports React-based components, making it an ideal platform for embedding Syncfusion’s feature-rich Gantt Chart. This integration is perfect for prototyping complex project timelines interactively, bridging the gap between design and development.

Key benefits:

Dynamic visualizations: Display tasks, dependencies, and milestones with Syncfusion’s customizable Gantt Chart.
Interactive prototyping: Leverage Framer’s design environment to create user-friendly interfaces.
Seamless integration: Combine Syncfusion’s robust functionality with Framer’s flexible canvas.

Prerequisites

Before starting, ensure you have:

A valid Syncfusion license key.
Framer desktop application installed.
Basic knowledge of React, TypeScript, and Framer’s developer mode.

Integrating Framer and Syncfusion React Gantt Chart

The first step in integrating the Syncfusion React Gantt Chart into Framer is to set up your development environment.

Framer is built for design and prototyping, while the React Gantt Chart delivers advanced project management features. Integrating both requires a few setup steps for a smooth developer workflow.

This article was originally published at Syncfusion.com.

How to Implement Cut, Copy, and Paste Support in React Spreadsheet

Calvince Moth — Tue, 07 Apr 2026 11:46:33 +0000

TL;DR: Modern spreadsheets aren’t complete without intuitive clipboard support. This guide shows how to implement and customize cut, copy, and paste operations in a React Spreadsheet, whether through the UI or APIs. You’ll also learn how to handle data from external sources and restrict specific paste actions to preserve data integrity.

Clipboard support is one of those features users only notice when it doesn’t work. If you’re building an app with a spreadsheet-like UI, people expect Excel-style cut/copy/paste, keyboard shortcuts, and sane behavior when they paste data from outside your app.

In this post, we’ll walk through how to handle clipboard operations in the Syncfusion ^® React Spreadsheet, including:

Cut, copy, and paste.
Paste options (All / Values / Formats).
Pasting from external sources (Excel, Google Sheets, etc.).
Preventing paste entirely.
Allowing external paste but forcing values-only to keep your sheet clean.

Why clipboard handling matters (in real apps)

Developers usually run into clipboard issues in a few common scenarios:

Data-entry screens: Users paste formatted tables and blow up your styling, column formats, or validations.
Template-based sheets: You want to protect formulas and layout, but still let users paste values.
Controlled environments: You may need to disable cut/paste for compliance or to avoid accidental edits.
Interop with Excel: Users expect copy/paste from Excel to “just work,” including number formats.

This is where built-in clipboard support helps, but the key is knowing how to control it.

Clipboard operations in Syncfusion React Spreadsheet

When you’re working with Spreadsheets, cut, copy, and paste aren’t just basic actions; they’re the backbone of smooth data handling. The component offers a robust set of options for managing data:

Cut, copy, and paste: Perform standard clipboard operations on cells, ranges, and formulas.
External clipboard support: Copy data from external sources such as Excel or other applications and paste it into the Spreadsheet.
Paste options: Choose whether to paste entire cells, values only, or formats only for more control over data handling.
Rich content handling: Copy and paste charts, images, and hyperlinks within the Spreadsheet.
Keyboard shortcuts: Use familiar shortcuts such as Ctrl+C, Ctrl+X, and Ctrl+V for quick clipboard actions.

Enable clipboard operations

The Syncfusion React Spreadsheet includes built-in clipboard functionality, making these operations easy to use. If you need to enable/disable them globally, use the enableClipboard property (enabled by default).

<SpreadsheetComponent enableClipboard={true} />

Cut like a pro

Need to move data around in your Spreadsheet? That’s where the Cut operation comes in. It allows you to move data without creating duplicates. When you cut cells, rows, or columns, the content is stored in the clipboard but remains in place until you paste it. The original data is removed only after the paste action is completed.

The Syncfusion React Spreadsheet makes moving data straightforward. Here are the different ways to perform a cut:

Ribbon shortcut: Click the Cut button in the HOME tab of the Ribbon.

Cut data via the Home Tab

Context Menu: Right-click the target cell and select Cut option from the context menu.

Cut data via context menu

Keyboard shortcut: Press Ctrl + X (Windows) or Command + X on Mac for the quickest way to cut data.
API support: Use the cut() method to trigger the cut action programmatically. When called without parameters, it cuts data based on the current selection. When a range address is provided, it cuts data from the specified range. Try this in your code:

// cuts the currently selected range
spreadsheet.cut();
// cuts the given address range
spreadsheet.cut('A2:C5');

Copy made simple: Duplicate data in the Syncfusion React Spreadsheet

Sometimes you don’t need to move data; just create an extra copy. The Copy operation lets you duplicate selected cells, rows, or columns and store them in the clipboard, ready to be pasted anywhere in the Spreadsheet.

The Syncfusion React Spreadsheet offers multiple ways to copy data, allowing you to choose the most convenient approach:

Ribbon shortcut: Click the Copy button in the HOME tab.

Copy data via Ribbon Tab

Context Menu: Right-click the target cell or range and select Copy from the context menu.

Copy data via context menu

Keyboard shortcut: Press Ctrl + C (Windows) or Command + C (Mac) for quick copying.
API support: Use the cut() method when copying through code. When called without parameters, it copies data based on the current selection. When a range address is provided, it copies data from the specified range. Code snippet:

// copy the currently selected range
spreadsheet.copy();
// copy data from the specified range
spreadsheet.copy('A2:C5')

Paste in React Spreadsheet

The Paste operation allows you to insert clipboard content into cells, rows, or columns quickly and accurately. It enables you to move copied or cut data into the Spreadsheet with full control over what gets pasted.

Paste options available:

Paste All: Pastes both values and their original formatting.
Paste Values: Pastes only the values, without any formatting.
Paste Formats: Applies formatting such as font styles, colors, background colors, and number formats (date, currency, etc.) without modifying existing values.

Paste Special via Ribbon

Paste from anywhere: External clipboard made easy

The React Spreadsheet supports pasting data copied from external applications such as Excel. Supported content includes values, number formats (date, currency, percentage), text formatting (bold, italic, font color), and basic cell formatting like background color and borders. This ensures imported data retains its readability and structure.

Ways to paste data in Syncfusion React Spreadsheet:

Ribbon shortcut: Click the Paste button in the HOME tab as shown below.

Paste data via Ribbon

Context Menu: Right-click a cell and choose the Paste or Paste Special option from the context menu.

Paste data via context menu

Keyboard shortcut: Press Ctrl + V (Windows) or Command + V (Mac) for the quickest way to paste.
API support: Use the paste() method to control paste behavior programmatically. Calling paste() without parameters pastes content into the current selection. Providing a range address and an optional PasteSpecialType enumeration, lets you specify both the target location and paste behavior. Here’s how you can do it in code:

// Paste the selected cell.
spreadsheet.paste();
// Paste all the clipboard content to the specified range.
spreadsheet.paste('B2', 'All');

// Paste only the values to the specified range.
spreadsheet.paste('B3', 'Values');

// Apply only the formats to the specified range.
spreadsheet.paste('B4', 'Formats');

In the code example above, the paste() method gives you full control over where and how clipboard data is inserted, making it easy to handle simple and advanced paste scenarios.

This article was originally published at Syncfusion.com.

Tired of Multiple Viewers? Build a Universal Document Viewer in .NET MAUI

Calvince Moth — Tue, 07 Apr 2026 11:36:58 +0000

TL;DR: Multi‑format document handling in apps doesn’t need separate viewers. By converting Word, Excel, PowerPoint, Images, and XPS into PDF, the .NET MAUI PDF Viewer becomes a universal document hub. Developers get one streamlined interface for previewing, annotating, and collaborating across formats. The result: simpler workflows, consistent user experience, reduced complexity, and scalable cross‑platform document management.

The big idea: PDF as the universal document viewer layer

Modern cross-platform apps rarely deal with “ just PDFs.” Users open Word docs, Excel sheets, PowerPoint decks, images, and even XPS files, often inside the same workflow. The problem: building and maintaining a separate viewer per format is costly, inconsistent across platforms, and hard to scale.

To create a smoother workflow, adopt a simpler approach: standardize PDF as the universal document viewer format. By converting incoming files to PDF, you enable seamless rendering through a single PDF Viewer component.

With this strategy in mind, this blog will guide you through setting up a unified document viewing workflow for your .NET MAUI apps.

Why convert everything to PDF?

PDF is a stable, layout-preserving format that works well for preview and review scenarios:

Consistent UI rendering across mobile and desktop apps.
One viewer instead of multiple format-specific viewers.
Safe review workflows (annotations instead of editing the original).
Easier enterprise controls (stream-based loading, reduced file persistence).

The star of the show: Syncfusion .NET MAUI PDF Viewer

The Syncfusion^® .NET MAUI PDF Viewer natively supports PDF files and offers a rich interaction model. When combined with Syncfusion Document Processing Libraries, it becomes a complete, universal document viewing engine.

Once all documents are converted to PDF, the .NET MAUI PDF Viewer presents a single, consistent UI across all formats.

What you can preview: Supported document types

The Syncfusion .NET MAUI PDF Viewer supports converting and previewing the following five commonly used file types into PDF format:

Word documents
Excel workbooks
PowerPoint presentations
Images
XPS files

Behind the scenes: Document conversion engine stack

To convert various file formats into PDF, Syncfusion offers a range of document processing libraries. Depending on the file type and your specific requirements, one or more of these libraries can be used:

Word to PDF: Syncfusion.DocIORenderer.NET
Excel to PDF: Syncfusion.XlsIORenderer.Net
PowerPoint to PDF: Syncfusion.PresentationRenderer.NET
Images to PDF: Syncfusion.Pdf.Imaging.NET
XPS to PDF: Syncfusion.XpsToPdfConverter.NET

Each library handles format‑specific conversion, producing a PdfDocument object that can be passed to the viewer. Using this approach maintains high fidelity and preserves layouts.

Essential setup and configuration

First, we need to establish the foundation by creating a new .NET MAUI app. Then, install the required packages for the .NET MAUI PDF Viewer and document processing libraries. Here’s the code you need:

<PackageReference Include="Syncfusion.DocIORenderer.NET" Version="*" />
<PackageReference Include="Syncfusion.Maui.PdfViewer" Version="*" />
<PackageReference Include="Syncfusion.Maui.TabView" Version="*" />
<PackageReference Include="Syncfusion.Pdf.Imaging.NET" Version="*" />
<PackageReference Include="Syncfusion.Presentation.NET" Version="*" />
<PackageReference Include="Syncfusion.PresentationRenderer.NET" Version="*" />

\<PackageReference Include="Syncfusion.XlsIORenderer.NET" Version="*" />8
<PackageReference Include="Syncfusion.XpsToPdfConverter.NET" Version="*" />

Next, configure the handlers in the MauiProgram.cs file as shown in the code below:

using Syncfusion.Maui.Core.Hosting;

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureSyncfusionCore();

    return builder.Build();
}

Building a universal document viewer in .NET MAUI

Let’s see the steps to build a seamless universal document viewing experience using the Syncfusion .NET MAUI PDF Viewer:

Step 1: Handle format-specific PDF conversions

Once the required Syncfusion libraries are configured, implement the logic to convert each supported file type into a PDF.

Below is a breakdown of the conversion logic for each supported format:

Word to PDF

To convert a Word document, use the DocIORenderer.ConvertToPDF(WordDocument) method, which converts a loaded WordDocument into a PdfDocument.

Refer to the example below.

// Loading an existing Word document
Assembly assembly = typeof(App).GetTypeInfo().Assembly;

using (WordDocument document = new WordDocument(
    assembly.GetManifestResourceStream("SampleName.Assets.InputDocument.docx"),
    FormatType.Docx))
{
    // Convert to PDF using DocIO's rendering engine
    using (DocIORenderer renderer = new DocIORenderer())
    {
        PdfDocument pdfDocument = renderer.ConvertToPDF(document);
        // Proceed to save as stream
    }
}

Note: You can check out more options and examples in the Word to PDF conversion guide.

Excel to PDF

Excel workbooks can be converted using the XlsIORenderer.ConvertToPDF(IWorkbook) method, which converts an IWorkbook (Excel document) into a PdfDocument.

Here’s the code example for quick conversion:

// Initialize Excel engine and open workbook
using (ExcelEngine excelEngine = new ExcelEngine())
{
    IApplication application = excelEngine.Excel;
    IWorkbook workbook = application.Workbooks.Open(
        assembly.GetManifestResourceStream("SampleName.Assets.InputDocument.xlsx"));

    // Convert workbook to PDF
    XlsIORenderer renderer = new XlsIORenderer();
    PdfDocument pdfDocument = renderer.ConvertToPDF(workbook);

    // Proceed to save as stream
}

Note: You can check out more options and examples in the Excel to PDF conversion guide.

PowerPoint to PDF

For PowerPoint presentations, the PresentationToPdfConverter.Convert(IPresentation) method handles the conversion of an IPresentation (PowerPoint presentation) object into a PdfDocument.

Please refer to the complete code block:

// Open PowerPoint presentation
using (IPresentation presentation = Presentation.Open(
    assembly.GetManifestResourceStream("SampleName.Assets.InputDocument.pptx")))
{
    // Convert slides to PDF pages
    PdfDocument pdfDocument = PresentationToPdfConverter.Convert(presentation);
    // Proceed to save as stream
}

Note: You can check out more options and examples in the PowerPoint to PDF conversion documentation.

Image to PDF

For image conversion, the PdfGraphics.DrawImage() method facilitates the conversion of images to PDF by drawing a PdfBitmap onto a PDF page. You can load images from various sources using the PdfBitmap class.

// Create a new PDF and add a page
PdfDocument document = new PdfDocument();

// Add a page to the document
PdfPage page = document.Pages.Add();
PdfGraphics graphics = page.Graphics;

// Load the image from the disk
FileStream imageStream = new FileStream("Autumn Leaves.jpg", FileMode.Open, FileAccess.Read);
PdfBitmap image = new PdfBitmap(imageStream);

// Draw the image
graphics.DrawImage(image, 0, 0);

Note: For more details, refer to the Image to PDF Conversion guide.

XPS to PDF

XPS documents can be converted using the XPSToPdfConverter.Convert(Stream) method, which converts an XPS file stream into a PdfDocument, preserving the document layout and the visual appearance of each page.

Code snippet to achieve this:

// Load XPS file and convert to PDF
XPSToPdfConverter converter = new XPSToPdfConverter();

using (FileStream xpsStream = new FileStream("sample.xps", FileMode.Open, FileAccess.ReadWrite))
{
    PdfDocument pdfDocument = converter.Convert(xpsStream);
    // Proceed to save as stream
}

Note: For detailed information, refer to the XPS to PDF conversion documentation.

This article was originally published at Syncfusion.com.

What’s New in .NET 11 Preview 1 & 2: Runtime Async, Zstandard, Blazor TempData, and Vector Search

Calvince Moth — Tue, 07 Apr 2026 06:43:57 +0000

TL;DR:.NET 11 Preview 1 brings Zstandard compression, AI/ML types, async runtime upgrades, and UI/tooling improvements. Preview 2 extends this with Blazor TempData, OpenTelemetry, EF Core vector search, smaller SDK images, MAUI enhancements, and further performance gains.

.NET 11 Preview 1 and Preview 2 are out, and they’re worth a look if you build high-throughput services, modern web apps with Blazor, or you’re starting to bring AI-ish workloads (embeddings, semantic search, model inference) into “normal” line-of-business systems.

This post focuses on four updates that materially change what you can do (or how easy it is to do it):

Runtime Async (Preview 1, refined in Preview 2).
Native Zstandard (zstd) compression (Preview 1).
Blazor TempData for SSR (Preview 2).
EF Core vector search for SQL Server (Preview 2).

I’ll also call out a few smaller but meaningful tooling/platform changes at the end.

What shipped in Preview 1 vs Preview 2 (quick map)

Preview 1 highlights

Native Zstandard (zstd) compression APIs.
Runtime Async foundation (enabled for experimentation via preview features).
BFloat16 type for AI/ML and numerics scenarios.
C# preview improvements like collection expression arguments.

Preview 2 highlights

Blazor TempData support for static SSR scenarios.
Native OpenTelemetry tracing support in ASP.NET Core (baseline enablement).
EF Core vector search support for SQL Server (vector distance + indexing support).
Runtime Async V2 refinements.
Smaller SDK/container images and a bunch of runtime/SDK polish.

Libraries: Powerful new APIs and performance wins

The Base Class Library (BCL) gains several production-ready additions that solve real-world pain points.

Zstandard compression support

Need to shrink files or speed up data transfer? .NET now natively supports Zstandard (zstd), a modern algorithm that’s often faster than GZip or Brotli while keeping excellent compression ratios.

In web servers, logging pipelines, or big-data scenarios, Zstandard delivers 2–7x faster compression and up to 14x faster decompression (per official benchmarks). Lower latency and storage costs in production.

Example implementation:

using System.IO.Compression;
// Compress data
{
    using var inputStream = File.OpenRead("largefile.txt");
    using var outputStream = File.Create("compressed.zst");
    using var compressStream = new ZstandardStream(outputStream, CompressionMode.Compress);
    await inputStream.CopyToAsync(compressStream);
}

// Decompress
{
    using var decompressInput = File.OpenRead("compressed.zst");
    using var decompressOutput = File.Create("restored.txt");
    using var decompressStream = new ZstandardStream(decompressInput, CompressionMode.Decompress);
    await decompressStream.CopyToAsync(decompressOutput);
}

Files Compressed Using Zstandard

Pro tip: Pair it with HttpClientHandler.AutomaticDecompression for automatic zstd handling in APIs that helps you transmit significantly less data during HTTP data transfers if the payload is compressible.

Here’s the code example in C#:

var handler = new HttpClientHandler
{
    AutomaticDecompression = DecompressionMethods.GZip | DecompressionMethods.Zstandard
};

using var client = new HttpClient(handler);
// Automatically decompresses zstd-encoded responses
var response = await client.GetAsync("https://example.com");

BFloat16 floating-point type

Machine-learning models need numbers that balance range and memory. BFloat16 (16-bit “Brain Float”) gives you the wide range of a regular float while using half the memory.

Ideal for tensor operations in ML.NET, ONNX Runtime, or custom AI pipelines. Reduced memory footprint = larger models or batches on the same hardware.

Here’s the example C# code:

BFloat16 value = (BFloat16)3.14f;
float regularFloat = (float)value; // Lossless upcast to float

// ML-style computation
BFloat16 a = (BFloat16)1.5f;
BFloat16 b = (BFloat16)2.0f;
BFloat16 result = a * b; // 3.0

C# collection expression arguments

Collection expressions ([]) just got smarter. You can now pass constructor arguments like capacity or a custom comparer directly inside the brackets. Pre-allocate capacity to avoid reallocations on hot paths; use an immutable FrozenDictionary or case-insensitive set with zero extra code.

Example implementation:

string[] values = ["apple", "banana", "cherry"];

// Set initial capacity as twice the capacity for better performance
List<string> names = [with(capacity: values.Length * 2), .. values];

Case-insensitive HashSet

HashSet<string> uniqueNames = 
[
    with(StringComparer.OrdinalIgnoreCase),
    "Apple",
    "apple",
    "BANANA"
];

foreach (var name in uniqueNames)
{
    Console.WriteLine(name);
    // Outputs "Apple" and "BANANA" only once each
}

Note: To enable preview features, you need to set the LangVersion property to preview in your project.

<PropertyGroup>
    <LangVersion>preview</LangVersion>
</PropertyGroup>

Beyond collection expression arguments, extended layout support improves interop scenarios (great for performance-critical libraries). The language team continues making C# more concise and expressive, exactly what both new and veteran developers love.

Entity Framework Core improvements

Entity Framework Core continues to evolve in .NET 11 Preview 1 & 2 with several developer-friendly enhancements that make data access more expressive and productive.

The most notable addition is full support for complex types and JSON columns on entity types that use TPT (Table-Per-Type) or TPC (Table-Per-Concrete-Type) inheritance mappings. A long-requested capability that lets beginners model real-world hierarchical business objects (like an Animal base class with nested Details stored as JSON) without workarounds, while experienced architects gain powerful flexibility for rich domain-driven designs:

Here’s the code example in C#:

using Microsoft.EntityFrameworkCore;
using System.ComponentModel.DataAnnotations.Schema;

Main(args).GetAwaiter().GetResult();

public abstract class Animal
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public required AnimalDetails Details { get; set; }
}

public class Dog : Animal
{
    public string? Breed { get; set; }
}

public class Cat : Animal
{
    public bool IsIndoor { get; set; }
}

[ComplexType]
public class AnimalDetails
{
    public DateTime BirthDate { get; set; }
    public string? Veterinarian { get; set; }
}

public class ApplicationDbContext : DbContext
{
    public DbSet<Animal> Animals { get; set; }

    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options) { }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        // New in .NET 11 / EF Core 11:
        // Complex types can now be stored as JSON columns with TPT/TPC inheritance
        modelBuilder.Entity<Animal>()
            .UseTptMappingStrategy()
            .ComplexProperty(a => a.Details, b => b.ToJson());

        modelBuilder.Entity<Dog>();
        modelBuilder.Entity<Cat>();
    }
}

partial class Program
{
    static async Task Main(string[] args)
    {
        var connectionString = "Data Source=SYNCLAPN-44605;Initial Catalog=AnimalDbTest;Integrated Security=True;Encrypt=False";

        var options = new DbContextOptionsBuilder<ApplicationDbContext>()
            .UseSqlServer(connectionString)
            .Options;

        await using var context = new ApplicationDbContext(options);

        // Create database + tables (perfect for quick testing)
        await context.Database.EnsureCreatedAsync();
        Console.WriteLine("Database created successfully!\n");

        // === INSERT TEST DATA ===
        var dog = new Dog
        {
            Name = "Buddy",
            Breed = "Labrador",
            Details = new AnimalDetails
            {
                BirthDate = new DateTime(2022, 5, 15),
                Veterinarian = "Dr. Smith"
            }
        };

        var cat = new Cat
        {
            Name = "Luna",
            IsIndoor = true,
            Details = new AnimalDetails
            {
                BirthDate = new DateTime(2023, 1, 10),
                Veterinarian = "Dr. John"
            }
        };

        context.Animals.AddRange(dog, cat);
        await context.SaveChangesAsync();
        Console.WriteLine("Inserted Dog and Cat successfully!\n");

        // === QUERY & DISPLAY ===
        Console.WriteLine("Dogs:");
        var dogs = await context.Animals.OfType<Dog>().ToListAsync();
        foreach (var d in dogs)
        {
            Console.WriteLine($" • {d.Name} ({d.Breed}) - Born: {d.Details.BirthDate:yyyy-MM-dd}, Vet: {d.Details.Veterinarian}");
        }

        Console.WriteLine("\nCats:");
        var cats = await context.Animals.OfType<Cat>().ToListAsync();
        foreach (var c in cats)
        {
            Console.WriteLine($" • {c.Name} (Indoor: {c.IsIndoor}) - Born: {c.Details.BirthDate:yyyy-MM-dd}, Vet: {c.Details.Veterinarian}");
        }

        // See the actual JSON stored in the database
        Console.WriteLine("\Raw JSON column example (Details column from SQL):");
        var raw = await context.Database
            .SqlQueryRaw<string>("SELECT Details FROM Animals WHERE Id = 1")
            .ToListAsync();

        Console.WriteLine(raw.FirstOrDefault() ?? "No data");
    }
}

This will create a JSON column (e.g., Details) in the base Animal table while still using separate tables for Dog and Cat (TPT).

This article was originally published at Syncfusion.com.

Your Syncfusion License Just Got More Powerful: Code Studio Is Now Included

Calvince Moth — Mon, 06 Apr 2026 10:05:49 +0000

TL;DR: Code Studio is now included for Syncfusion license holders, offering AI-assisted development with 5,000 starter credits (for paid users), flexible credit usage, and team support. Activate your access and start building faster with intelligent code generation.

What if your existing Syncfusion^® license could do more than just give you UI components?

What if it could also help you generate code, accelerate development, and reduce repetitive work, without any additional cost?

That’s exactly what’s changing.

Code Studio is now free for Syncfusion license holders, bringing AI-assisted development directly into your workflow. Whether you’re building enterprise applications or experimenting with new ideas, you can now move faster with tools designed to support modern development.

In this blog, we’ll walk through what Code Studio offers, what’s included in the free plans, and how you can start using it today.

What is Code Studio?

Code Studio is Syncfusion’s AI-powered development environment that helps developers move from idea to implementation faster.

It is designed to:

Accelerate UI development.
Generate production-ready code.
Reduce repetitive development tasks.
Work seamlessly with Syncfusion components.

Instead of switching between tools or manually configuring components, Code Studio helps you generate, refine, and build, all in one place.

Free access for Syncfusion users

Code Studio is now available at no cost under two plans, depending on your Syncfusion license.

Syncfusion paid license plan

If your organization has an active Syncfusion license, you can now unlock Code Studio for your entire team.

What’s included

Free access for up to 100 developers.
5,000 starter credits (first month only).
Standard SLA support.
Full integration with your Syncfusion ecosystem.

A flexible credit system

Code Studio introduces a usage-based model that gives you flexibility without pressure:

Start with free credits Eligible customers receive 5,000 starter credits to begin exploring immediately.
Use credits with confidence Unused credits roll over, allowing you to use them over time as long as your account remains active.
Scale when needed You can top up credits at any time based on your project requirements.
Built for teams Add up to 100 developers and collaborate within a shared AI-assisted environment.

Why this matters

This plan enables teams to:

Prototype and build applications faster.
Reduce manual effort through AI-assisted code generation.
Scale usage without upfront investment.

Start here by signing in to your Code Studio account.

Syncfusion community license plan

For individual developers and small teams, Code Studio is also available under the Community License.

What’s included

Free access for up to 5 developers.
Full access to Code Studio features.
Standard SLA support.

Things to note

Starter credits are not included.
Additional usage follows standard pricing.

Why this matters

This plan is ideal for:

Exploring AI-assisted development.
Learning Syncfusion components more efficiently.
Building prototypes and MVPs.

Activate the Community License and build faster with Code Studio.

Comparing the plans

Feature	Paid License	Community License
Developer Limit	Up to 100	Up to 5
Cost	Free	Free
Starter Credits	5,000 (first month)	Not included
Credit Rollover	Yes	—
SLA	Standard	Standard

Why developers will benefit

Code Studio is not just another tool; it’s designed to improve how teams build applications.

Faster development Generate UI and logic quickly using AI-assisted workflows.
Built for Syncfusion components Code follows best practices with correct APIs and configurations.
Flexible usage model Credits roll over, can be topped up at any time, and you only pay when scaling.
Team-ready environment Supports collaboration across up to 100 developers.
Improved productivity Reduce iteration cycles and focus on delivering features.

How to activate your Code Studio access

Getting started with Code Studio is straightforward:

Sign in to Code Studio.
Navigate to Settings → Billing.
Activate your eligible plan.
Start building with AI-assisted development.

You can also get direct access to Code Studio through the billing page.

Making the most of your access

To maximize the value of Code Studio:

Use starter credits to explore advanced capabilities.
Generate Syncfusion UI components efficiently.
Prototype dashboards and real-world applications.
Build reusable templates for your team.
Scale usage with credit top-ups as your needs grow.

Because unused credits roll over, you can explore features without time pressure.

Final thoughts

With this update, Syncfusion extends its ecosystem beyond components, bringing AI-assisted development directly into your workflow.

Whether you’re part of a large organization or a small team, Syncfusion Code Studio enables you to build faster, reduce manual effort, and scale efficiently, without disrupting the way you already work.

Get started today

Getting started with Code Studio is simple:

Activate your free access in Code Studio.
Begin using your 5,000 starter credits (if eligible).
Invite your team and begin collaborating.
Scale your usage with flexible credit top-ups as needed.

If you’re already using Syncfusion, this is a natural next step to enhance your development workflow.

Need help? Reach us through the support forum, support portal, or feedback portal.

Start building smarter with Syncfusion Code Studio today!

This article was originally published at Syncfusion.com.