Forem: Phinter Atieno

How to Stream Live Data into .NET MAUI DataGrid Using Firebase

Phinter Atieno — Mon, 02 Mar 2026 05:42:36 +0000

TL;DR: Use Firebase Realtime Database and .NET MAUI DataGrid to build live dashboards that auto‑refresh. Stream updates with Server-Sent Events (SSE), bind to an ObservableCollection, and optionally poll for redundancy. Add templates, converters, and responsive styling for visuals, ideal for stock dashboards and trading-style UIs.

Building real-time dashboards in .NET MAUI often comes with a key challenge: ensuring backend data changes instantly reflect in the UI. Static snapshots or delayed updates leave users with outdated views.

In this guide, you’ll implement real-time updates in Syncfusion^® .NET MAUI DataGrid by combining:

Firebase Realtime Database (RTDB) for live data.
Firebase REST streaming (Server-Sent Events / SSE) for near real-time change delivery.
ObservableCollection + INotifyPropertyChanged so the Syncfusion .NET MAUI DataGrid refreshes automatically.
Polling fallback to recover if the stream drops.
Optional styling via converters/templates (arrows, color coding, numeric formatting).

This pattern works well for dashboards and trading-style UIs across iOS, Android, Windows, and macOS (Mac Catalyst).

Why choose the Syncfusion .NET MAUI DataGrid for live dashboards?

When building real-time dashboards, the choice of grid control directly impacts performance, responsiveness, and user experience. Syncfusion .NET MAUI DataGrid stands out because it’s designed to handle continuous updates while keeping the UI smooth and professional. Its key advantages include:

Smooth, cell-level updates: Responds instantly to INotifyPropertyChanged, so cells refresh without re-rendering the entire grid.
Rich UX: Sorting, selection, responsive columns, and templating let you build data-heavy UIs that still feel snappy.
Built for performance: Virtualization and lightweight rendering keep scrolling fast even with frequent updates.
Flexible styling: Template columns, triggers, and styles let you emphasize what matters like rising prices, thresholds, or alerts.
Enterprise-ready: Backed by dedicated support, extensive documents, and production-grade reliability.

Implementing .NET MAUI DataGrid real-time updates (Firebase + SSE)

Learn how to build a dynamic stock dashboard in .NET MAUI using Syncfusion DataGrid with live data updates, custom templates, and converters for a visually rich experience.

Step 1: Create and configure Firebase Realtime Database

To enable real-time data updates, we need a data source that supports live synchronization. For this demo, we’ll use Firebase Realtime Database (RTDB), which provides continuous, instant updates across all connected devices.

Creating a Firebase project

First, go to the Firebase console.
Click Create a Project, enter the project name, and click Continue.
After the project is created, open the left navigation panel, expand Build, and select Realtime Database.
In the Realtime Database section, click Create Database, choose a database location, and set the initial security rules.
Click Next to configure the security rules for your database.
Select Start in test mode and click Enable at the bottom. Your database will now be created successfully.

Configure Database rules

To manage access and security in your Firebase Realtime Database, you need to configure database rules.

Navigate to the Realtime Database page in Firebase Console and click on the Rules tab at the top.
For development, you can allow read/write access without authentication and publish the rules.

{
    "rules": {
        ".read": true,
        ".write": true
    }
}

For production, always apply stricter security by enabling Firebase Authentication to protect your data.
Get your Database URL: Copy the RTDB URL from the Firebase console (e.g. https://your-project-id-default-rtdb.firebaseio.com).
Connects to Firebase: Uses the project’s base URL to access the Firebase Realtime Database.
Loads initial Snapshot: Fetches the latest stock data and updates headers and rows for the grid.
Starts background loops:
- Listens to real-time updates via Server-Sent Events (SSE) from Firebase.
- Periodically refreshes data every few seconds for redundancy.
- Randomly updates stock values locally to simulate live changes.
- Pushes simulated stock records to Firebase at a fixed interval.
Processes incoming data: Converts JSON tokens into dynamic objects and updates the observable collections.
Notifies UI: Updates headers and rows on the main thread, triggering the Syncfusion DataGrid to refresh automatically.

Step 2: Add a Firebase streaming service (SSE)

Firebase RTDB supports REST streaming using text/event-stream. The service below opens a stream you can read continuously.

public sealed class StocksService
{
    private const string DbBase = "https://your-project-id-default-rtdb.firebaseio.com";
    private const string PathStocks = "/stocks.json";
    private readonly string _authToken;
    private readonly HttpClient _http;

    // Build Firebase URL with auth token
    private string StocksUrl => string.IsNullOrWhiteSpace(_authToken)
        ? $"{DbBase}{PathStocks}"
        : $"{DbBase}{PathStocks}?auth={_authToken}";

    // Open SSE stream for real-time stock updates
    public async Task<Stream?> TryOpenSseAsync(CancellationToken ct)
    {
        var request = new HttpRequestMessage(HttpMethod.Get, StocksUrl);
        request.Headers.Add("Accept", "text/event-stream");

        var response = await _http.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, ct);
        if (!response.IsSuccessStatusCode)
        {
            response.Dispose();
            return null;
        }

        return await response.Content.ReadAsStreamAsync(ct);
    }
}

Register the service

This ensures a single instance of StocksServicestreams data, and the ViewModelupdates data in real time.

builder.Services.AddSingleton<StocksService>(); // Service for Firebase operations
builder.Services.AddSingleton<StockViewModel>(); // ViewModel for binding to UI

Why this matters: A singleton service prevents accidental multiple SSE connections and keeps resource usage predictable.

Step 3: Building the ViewModel for real-time updates

The StockViewModel is responsible for managing the observable collections bound to the Syncfusion .NET MAUI DataGrid (headers and rows) to display live stock data. It acts as the bridge between the UI and the data source by:

Connecting to StocksService: Handles Firebase operations such as retrieving and pushing data.
Loading snapshots: Fetches the latest stock data and initializes the grid with headers and rows.
Listening to Server‑Sent Events (SSE): Subscribes to Firebase’s real‑time stream to capture live updates.
Updating observable collections: Ensures that changes in stock data automatically refresh the DataGrid.

This ViewModel pattern keeps the UI responsive and ensures that stock dashboards reflect the latest data without manual refreshes.

Code snippet to achieve this:

public class StockViewModel
{
    public async Task InitializeAsync()
    {
        // Fetch and load the latest data from the database
        await LoadSnapshotAsync();

        // Start real-time data streaming from Firebase using SSE
        Task.Run(() => StreamLoopAsync(_streamCts.Token));

        // Start periodic polling as a fallback to ensure data consistency
        Task.Run(() => PollLoopAsync(TimeSpan.FromSeconds(3), _pollCts.Token));

        // Apply local demo changes to simulate live updates
        Task.Run(() => DemoChangeLoopAsync(TimeSpan.FromSeconds(1.5), _demoCts.Token));

        // Push records to Firebase
        if (EnableRemoteSimulation)
        {
            Task.Run(() => RemoteSimLoopAsync(RemoteSimulationPeriod, _remoteSimCts.Token));
        }
    }
}

Note: Check the StockViewModel class on GitHub for more details.

Step 4: Designing the XAML layout for real-time updates

In this step, you need to bind the DataGrid to the Stocks collection in the ViewModel, ensuring that any changes in the data source are instantly reflected in the UI. We also integrate TextForegroundConverterto apply conditional formatting for stock changes.

Here’s how you can do it in code:

<ContentPage.Resources>
    <local:SignToColorConverter x:Key="SignToColor"/>
    <local:SignToArrowConverter x:Key="SignToArrow"/>
    <Style TargetType="syncfusion:DataGridHeaderCell"/>
        <Setter Property="TextColor" Value="Black"/>
        <Setter Property="FontAttributes" Value="Bold"/>
    </Style>
</ContentPage.Resources>

<Grid RowDefinitions="*" Padding="12">
    <syncfusion:SfDataGrid x:Name="grid"
                           ItemsSource="{Binding Rows}"                
                           ColumnWidthMode="Auto"/>
</Grid>

By following these steps, you’ve built a responsive, real-time stock data grid in .NET MAUI using the Syncfusion DataGrid. It streams live updates, applies dynamic styling instantly, and runs smoothly on iOS, Android, macOS, and Windows, perfect for stock dashboards, trading apps, or any scenario that needs up-to-the-second data.

Live stock data update in .NET MAUI Syncfusion DataGrid

Enterprise considerations for long-running live dashboards

Resilience: Add reconnect logic for SSE drops and keep polling as a controlled fallback (with backoff).
UI thread safety: Always update collections on the main thread (Dispatcher / MainThread).
Performance at scale: Prefer updating properties on existing rows over rebuilding the entire ItemsSource.
Memory safety: Dispose streams, cancel tokens, and unsubscribe handlers when pages close.
Security: Never ship “test mode” rules; use Auth + strict RTDB rules and avoid embedding long-lived secrets in mobile apps.

Build vs buy (practical take)

Build your own grid only if you need a very narrow UI with minimal features and can accept long-term maintenance.
Use a mature DataGrid when you need virtualization, templating, sorting/selection, and reliable UI performance under frequent updates, especially for enterprise dashboards.

Frequently Asked Questions

Is Firebase “test mode” safe to use in production?

No. Test mode allows open read/write access. For production, enable Firebase authentication and enforce strict, least-privilege realtime Database security rules.

How does the DataGrid handle frequent updates at scale?

Syncfusion DataGrid supports virtualization and cell-level refresh. If your row models implement INotifyPropertyChanged and you update properties (instead of replacing the whole item/ItemsSource), the grid can refresh changed cells with minimal redraw.

How do I ensure UI thread safety when updating collections?

Always marshal collection and bound-property updates to the UI thread (for example via MainThread.BeginInvokeOnMainThread / Dispatcher). Updating ObservableCollection from background tasks can cause exceptions or inconsistent rendering.

What should I do if the data stream drops?

Add reconnection logic (with backoff) and keep periodic polling/state rehydration as a fallback. This restores local correctness if SSE disconnects or misses events.

GitHub reference

For more details, refer to the complete real-time data update project for .NET MAUI DataGrid in the GitHub demo.

Conclusion

Thanks for reading! In this blog, we explored how to implement live data updates in .NET MAUI DataGrid. With real‑time synchronization powered by Firebase, your dashboards stay accurate and responsive. The Syncfusion DataGrid enhances this further with dynamic styling, adaptive layouts, and seamless cross‑platform support. Using these techniques, you can build stock dashboards, trading platforms, or any app that requires instant and reliable data updates, making your applications more professional, engaging, and efficient.

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

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

Related Blogs

This article was originally published at Syncfusion.com.

React 19 Suspense for Data Fetching: A New Model for Async UI

Phinter Atieno — Thu, 26 Feb 2026 14:30:17 +0000

TL;DR: React Suspense for data fetching allows components to render automatically as soon as their data is ready without manually wiring useEffect(), useState(), loading states, or re‑render logic. With React 19’s new use() API and Suspense boundaries, you can run nested or parallel data loading, handle failures with error boundaries, keep interactions responsive using useTransition(), and even stream server-rendered content progressively.

Users don’t care how your app fetches data; they care that the UI feels fast and stable. React 18 took the first step toward this with Suspense and lazy loading, allowing React apps to defer non‑critical code and avoid blocking the main UI thread.

React 19 builds on that foundation by turning Suspense into a more capable async rendering system. With the new use() API and transitions, React can coordinate loading, fallbacks, and server‑streamed content in a much more predictable way.

This guide explores what’s new in React 19 Suspense, where it fits in modern rendering, and how it changes traditional data‑fetching patterns.

Why Suspense exists (and where it fits in rendering)

React’s push toward better performance started with a simple idea used heavily at Meta: load as little as possible, as early as possible. To give users a fast UI, we want small bundles that render quickly, but we also want data and code available the moment the user needs them.

Techniques like tree‑shaking, code‑splitting, preloading, and predictive loading helped reduce bundle size and load assets earlier, but something was still missing. React needed a way to coordinate what’s being fetched and what’s being rendered.

That gap is exactly where Suspense fits. It sits between your loading code and your UI, deciding what to show while data, components, or scripts are still on the way. Modern apps often struggle to render quickly because of:

Slow server responses.
Data dependencies (one request needs another).
Third-party scripts blocking rendering.
Components that can’t render until data exists.

Suspense provides a structured way to handle all of these:

If something is still loading, React can show a fallback.
When it’s ready, React renders the UI.
If it fails, React throws the error (you handle it with an error boundary).

This makes Suspense a core part of the “load early, render progressively” approach. With React 19’s new use() and useTransition() hooks, Suspense evolves from a simple fallback mechanism into a full async rendering tool.

React 18 recap: Suspense for code-splitting

Route‑level lazy loading is one of the simplest and most effective uses of Suspense. It splits your bundle and shows a fallback while the route chunk loads, no manual loading state needed.

Implementation example:

jsx

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Lazy load different pages
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

// Custom loading component
const LoadingSpinner = () => (
  <div style={{ textAlign: 'center', padding: '50px' }}>
    <div>Loading...</div>
  </div>
);

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

Before diving into how Suspense speeds up loading, let’s revisit how React traditionally fetched and rendered data.

Traditional data-fetching and why it feels clunky

Most React apps use one of two familiar patterns for fetching and rendering data. They work, but both require extra state management and force React to render the UI more than once.

Fetch on render

In this approach, the component mounts first. Only after the initial render does it start fetching data. While the request is in progress, you show a loading state; once the data arrives, the component renders again with real content.

Here’s how you can do it in code:

jsx

import { useState, useEffect } from "react";

const PostDetails = () => {
  const [postDetails, setPostDetails] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1/")
      .then((response) => response.json())
      .then((data) => setPostDetails(data));
  }, []);

  if (!postDetails) return <p>Loading post...</p>;

  return (
    <div>
      <h1>{postDetails.title}</h1>
      <p>{postDetails.body}</p>
    </div>
  );
};

Fetch then render

Here, data is requested immediately, but the component still can’t render meaningful UI until the fetch completes. You still end up managing loading states and triggering a second render when the data arrives.

Try this in your code:

jsx

const fetchPostDetails = () => {
  return fetch("https://jsonplaceholder.typicode.com/posts/1/").then(
    (response) => response.json()
  );
};

const Example = () => {
  const [postDetails, setPostDetails] = useState(null);

  useEffect(() => {
    fetchPostDetails().then((data) => setPostDetails(data));
  }, []);

  if (!postDetails) return <p>Loading post...</p>;

  return (
    <div>
      <PostDetails post={postDetails} />
    </div>
  );
};

const PostDetails = ({ post }) => (
  <div>
    <h1>{post.title}</h1>
    <p>{post.body}</p>
  </div>
);

Both approaches rely on two different hooks:

useEffect() to trigger the fetch.
useState() to store the result, plus loading and error states.

Because the component must render first and then fetch, React ends up rendering twice, once for the placeholder UI, then again for the real content. As your app grows, managing these states across multiple components becomes repetitive and error‑prone.

What if we can streamline everything, removing the need for the useEffect() and useState() hooks altogether, while still being able to efficiently handle the loading and error state?

That is what Suspense is here for.

React Suspense for data fetching

How does Suspense work?

When React is rendering the component, and it discovers the Suspense in its DOM tree, it checks:

If any child of Suspense is waiting for asynchronous operations like promises, to complete.
React suspends the rendering of the children and shows the fallback UI.
When the async work completes, then React renders the UI.
If the async work fails, then Suspense will throw errors, and it has to be handled through an error boundary or explicitly.

This gives the user the most optimal experience, and you can separate or club different components in their own Suspense as you wish.

Fallback UI shown while child components await async operations

Basic Suspense with data fetching

You can pass a promise (async task) directly to the use() hook within a component and wrap the component inside the Suspense with a fallback UI.

The component renders only after the promise inside the use() hook has resolved. Below is the code you need:

jsx

import React, { Suspense, use } from "react";

// Simulated API calls that return promises
function fetchUser(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id, name: `User ${id}`, email: `user${id}@example.com` });
    }, 2000);
  });
}

function fetchPosts(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, title: "First Post", content: "Content 1" },
        { id: 2, title: "Second Post", content: "Content 2" },
      ]);
    }, 1500);
  });
}

// Component using React 19's `use` hook
function UserProfile({ userId }) {
  const user = use(fetchUser(userId));

  return (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}

function UserPosts({ userId }) {
  const posts = use(fetchPosts(userId));

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h4>{post.title}</h4>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

React 19 treats the use() hook as a first‑class, framework‑agnostic primitive for reading asynchronous values. You can pass a plain promise directly to use(), and React will automatically suspend the component until that promise resolves. Suspense handles the waiting logic, so you don’t need effects, state variables, or manual loading flags.

The use() hook works in both client and server components, but server components should prefer async/await instead of use() for two reasons:

Async by default: React 19 supports fully asynchronous server components. Because the server waits for the data before sending HTML to the client, there’s no need for a Suspense fallback.
No boundary required: Passing a promise to use() triggers Suspense and requires a boundary in the component tree. With async/await on the server, you can wait for the data directly without introducing a Suspense wrapper.

Since use() always activates a Suspense boundary, it must only be called within a Suspense‑wrapped subtree. Calling use() outside a boundary causes React to throw because there’s nowhere to display the fallback.

Nested Suspense

You can nest Suspense boundaries when different parts of the UI depend on separate asynchronous operations. In a nested setup, the parent component must finish rendering before the child begins its own data‑fetching logic. Each boundary controls its own loading state and resolves independently.

Implementation example:

jsx

function NestedSuspenseExample() {
  const [userId] = useState(1);

  return (
    <div>
      <h2>Nested Suspense</h2>

      {/* Outer Suspense for user profile */}
      <Suspense fallback={<LoadingSkeleton text="Loading profile..." />}>
        <UserProfile userId={userId} />

        {/* Inner Suspense for posts - loads independently */}
        <Suspense fallback={<LoadingSkeleton text="Loading posts..." />}>
          <UserPosts userId={userId} />
        </Suspense>
      </Suspense>
    </div>
  );
}

Nested boundaries are useful when parts of the UI depend on each other, but you still want the child sections to load independently once the parent has completed its async work.

Parallel data-fetching in Suspense

If the UI sections do not depend on each other, you can place separate Suspense boundaries side by side. Each boundary begins loading as soon as its component renders, allowing React to fetch multiple async resources in parallel.

Here’s how you can do it in code:

jsx

function ParallelSuspenseExample() {
  const [userId] = useState(1);

  return (
    <div>
      <h2>Parallel Suspense</h2>

      {/* First Suspense for user profile */}
      <Suspense fallback={<LoadingSkeleton text="Loading profile..." />}>
        <UserProfile userId={userId} />
      </Suspense>

      {/* Second Suspense for posts - loads independently */}
      <Suspense fallback={<LoadingSkeleton text="Loading posts..." />}>
        <UserPosts userId={userId} />
      </Suspense>
    </div>
  );
}

Multiple parallel async calls inside a single boundary

Sometimes you need multiple async operations, such as fetching both a user and their posts, to run at the same time. With the use() hook, you can initiate them together inside one component, and Suspense will wait until all async work has completed before rendering the UI.

Implementation example:

jsx

function MultipleAsyncCallsExample({ userId }) {
  const user = use(fetchUser(userId));
  const posts = use(fetchPosts(userId));

  return (
    <div>
      <UserPosts posts={posts} />
      <UserProfile user={user} />
    </div>
  );
}

function Example(){
  return (
    <div>
      <h2>Multiple parallel async calls within suspense</h2>

      {/* Outer Suspense for user profile */}
      <Suspense fallback={<LoadingSkeleton text="Loading data..." />}>
        <MultipleAsyncCallsExample userId={1} />
      </Suspense>
    </div>
  );
}

Both requests run in parallel, and the fallback remains visible until every async task resolves. This eliminates the boilerplate useEffect() and useState() patterns and lets React handle async coordination automatically.

Coordinated reveal with SuspenseList (experimental)

For more control over how multiple Suspense boundaries appear on the screen, React provides SuspenseList. It lets you specify reveal order, useful when rendering long lists or progressively loaded sections that should appear top‑to‑bottom.

Here’s how you can do it in code:

jsx

function SuspenseListExample() {
  return (
    <SuspenseList revealOrder="forwards">
      {/* First Suspense for user profile */}
      <Suspense fallback={<LoadingSkeleton text="Loading profile..." />}>
        <UserProfile userId={userId} />
      </Suspense>

      {/* Second Suspense for posts - loads independently */}
      <Suspense fallback={<LoadingSkeleton text="Loading posts..." />}>
        <UserPosts userId={userId} />
      </Suspense>
    </SuspenseList>
  );
}

This approach works well when you have a large list, and you want to do the step-by-step reveal with the reading flow.

Note: SuspenseList is still experimental; avoid using it in production or use it with care until stabilized.

State refreshing

React’s useTransition() hook lets you mark certain state updates as non‑urgent, keeping the UI responsive while new data loads. When you wrap an update with startTransition(), React delays the visual update, triggers the async work, and Suspense handles the loading fallback, all without blocking the current UI.

Below is the code you need:

jsx

function TransitionExample() {
  const [userId, setUserId] = useState(1);
  const [isPending, startTransition] = useTransition();

  const switchUser = (newId) => {
    startTransition(() => {
      setUserId(newId);
    });
  };

  return (
    <div>
      <h2>Suspense with Transitions</h2>

      <div>
        {[1, 2, 3].map((id) => (
          <button
            key={id}
            onClick={() => switchUser(id)}
            disabled={isPending}
            className={`${
              userId === id
                ? "bg-blue-600 text-white"
                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
            } ${isPending ? "opacity-50 cursor-not-allowed" : ""}`}>
            User {id}
          </button>
        ))}
      </div>

      {isPending && <div>Transitioning...</div>}

      <Suspense fallback={<LoadingSkeleton text="Loading user..." />}>
        <UserProfile userId={userId} />
      </Suspense>
    </div>
  );
}

Transitions ensure the UI stays interactive. The current screen remains visible while React fetches the next user, and Suspense swaps in the fallback only for the sections that need new data.

Handling error

Suspense manages loading, but it doesn’t catch async errors. For that, React relies on Error Boundaries. By wrapping Suspense inside an error boundary, you can show a clear error message and provide a retry mechanism when async work fails.

Here’s how you can do it in code:

jsx

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Error caught:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
          <h3 className="text-red-800 font-semibold mb-2">Error Occurred</h3>
          <p className="text-red-600 text-sm">{this.state.error?.message}</p>
          <button
            onClick={() => this.setState({ hasError: false, error: null })}
            className="mt-3 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
            Retry
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

function fetchWithError(shouldFail) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) {
        reject(new Error("Failed to fetch data"));
      } else {
        resolve({ data: "Success!" });
      }
    }, 1000);
  });
}

function DataWithError({ shouldFail }) {
  const result = use(fetchWithError(shouldFail));
  return <div className="text-green-600 font-medium">{result.data}</div>;
}

function ErrorBoundaryExample() {
  const [shouldFail, setShouldFail] = useState(false);
  const [key, setKey] = useState(0);

  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold text-gray-800">
        Suspense with Error Boundaries
      </h2>

      <div className="flex gap-2">
        <button
          onClick={() => {
            setShouldFail(false);
            setKey((k) => k + 1);
          }}
          className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
          Fetch Success
        </button>
        <button
          onClick={() => {
            setShouldFail(true);
            setKey((k) => k + 1);
          }}
          className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
          Fetch Error
        </button>
      </div>

      <ErrorBoundary key={key}>
        <Suspense fallback={<LoadingSkeleton text="Fetching data..." />}>
          <DataWithError shouldFail={shouldFail} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

The retry simply forces a re-render, re‑executing the async work inside Suspense.

You can wrap individual Suspense boundaries, nested boundaries, or entire SuspenseLists inside an error boundary, React handles each boundary independently.

Streaming server-side rendered content

With Suspense, we can highly optimize the rendering of the server-side content. The server can stream the partial content, and the browser will render it in parts.

This is how it works:

React starts constructing the content on the server.
Once it encounters the Suspense, it streams the constructed content to the browser.
The browser starts rendering the received content.
Once the async operation is completed, React sends the remaining content.

This works properly because the fallback UI is added to the main bundle, which helps React to render it on the browser while waiting for the server to stream the remaining content.

Implementation example:

jsx

import { renderToPipeableStream } from "react-dom/server";

const App = () => (
  <Suspense fallback={<p>Loading...</p>}>
    <MainComponent />
  </Suspense>
);

// Server-side rendering logic
const { pipe } = renderToPipeableStream(<App />);

This is really helpful as:

The server starts streaming partial content, and browsers start rendering it, resulting in faster first paint.
User sees progressive rendering over a blank screen.

To make the most out of Suspense, rather than using traditional loading, you can use skeleton loading to minimize the layout shifting.

jsx

<Suspense fallback={<LoadingSkeleton text="Loading posts..." />}>
    <UserPosts userId={userId} />
</Suspense>

Conclusion

Thank you for reading! Suspense is a great addition in React 19 that really solves some of the core rendering problems on the browser, providing the best optimal experience. But make sure you are not overdoing it by wrapping the components that do not require fallbacks.

Having an audit check could be helpful:

UI fallbacks should match the layout of the component to minimize layout jumps.
Only necessary components should be isolated with their suspense boundary.
Are the crucial components of error handled properly?
Test everything on a throttled, slower network before shipping.

Your perspective can help others, leave a comment with what worked or what you’re still exploring.

Related Blogs

This article was originally published at Syncfusion.com.

How to Add Email and Toast Reminders to a .NET MAUI Scheduler

Phinter Atieno — Thu, 26 Feb 2026 12:31:44 +0000

TL;DR: Learn how to implement reliable event reminders in a .NET MAUI Scheduler using SMTP-based email notifications and cross-platform toast alerts. This guide shows how to design reminder workflows that improve user experience, ensure timely notifications, and work consistently across devices, ideal for calendar, booking, and productivity apps.

Ever missed a critical meeting because your calendar didn’t remind you? It happens to all of us, especially when we’re juggling multiple tasks in a packed schedule. Adding an appointment is simple, but remembering at the right time is the real challenge.

That’s where event reminders and email notifications make all the difference. They deliver timely alerts and follow-ups, helping you stay organized, productive, and stress-free.

In this blog, we’ll walk through the essential steps to integrate appointment scheduling with system notifications and email reminders using the Syncfusion^® .NET MAUI Scheduler. This approach ensures your users stay informed, organized, and never miss an important event.

Now that we understand the value of reminders, let’s initialize the Scheduler and start adding reminders.

Step 1: Initializing Syncfusion .NET MAUI Scheduler

To begin, add the Scheduler control to your XAML page and bind its AppointmentsSource property to an ObservableCollection<SchedulerAppointment> in your ViewModel. This collection stores all your events and keeps the UI in sync with your data.

Here’s how you can do it in code:

<?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:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"
             x:Class="Event_Reminder.MainPage">
<scheduler:SfScheduler x:Name="Scheduler"
                       View="Week"
                       AllowedViews="Day, Week, WorkWeek, Month"
                       EnableReminder="True"
                       AppointmentsSource="{Binding Appointments}">
</scheduler:SfScheduler>
</ContentPage>

Note: For more details, check out the Getting Started with the .NET MAUI Scheduler documentation.

Step 2: Adding appointments to the Scheduler via popup

You can collect event details through a popup that includes fields for Subject, Start Time, End Time, Recurrence Rule, and Save/Cancel buttons. When a user taps a Scheduler cell, the popup opens, allowing them to enter event information.

When the Save button is clicked, the appointment details are collected and added to the appointment list in the .NET MAUI Scheduler.

Here’s the XAML code example for the appointment popup UI:

<ContentView x:Name="AddPopup"
             IsVisible="{Binding IsAddPopupVisible}"
             BackgroundColor="#80000000">
  <Grid VerticalOptions="Center" HorizontalOptions="Center" Padding="16">
    <Border BackgroundColor="White" Stroke="LightGray" StrokeThickness="1.5"
            StrokeShape="RoundRectangle 12" Padding="16" WidthRequest="300">
      <Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,*" RowSpacing="8" ColumnSpacing="12">

        <!-- Title -->
        <Label Text="Add Event" Grid.ColumnSpan="2" FontAttributes="Bold" FontSize="18"/>

        <!-- Subject -->
        <Label Grid.Row="1" Text="Subject"/>
        <Entry Grid.Row="1" Grid.Column="1" Text="{Binding NewSubject}"/>

        <!-- Start Date & Time -->
        <Label Grid.Row="2" Text="Start"/>
        <Grid Grid.Row="2" Grid.Column="1" ColumnDefinitions="*,Auto">
          <DatePicker Date="{Binding NewStartDate}"/>
          <TimePicker Grid.Column="1" Time="{Binding NewStartTime}"/>
        </Grid>

        <!-- End Date & Time -->
        <Label Grid.Row="3" Text="End"/>
        <Grid Grid.Row="3" Grid.Column="1" ColumnDefinitions="*,Auto">
          <DatePicker Date="{Binding NewEndDate}"/>
          <TimePicker Grid.Column="1" Time="{Binding NewEndTime}"/>
        </Grid>

        <!-- Buttons -->
        <Grid Grid.Row="4" Grid.ColumnSpan="2" ColumnDefinitions="*,Auto,Auto" ColumnSpacing="8" Margin="0,8,0,0">
          <Label Grid.Column="0"/>
          <Button Grid.Column="1" Text="Cancel" Command="{Binding CancelAddCommand}"/>
          <Button Grid.Column="<Button Grid.Column="2" Text="Save" Command="{Binding SaveAddCommand}"/>
        </Grid>
      </Grid>
    </Border>
  </Grid>

When a Scheduler cell is tapped, you can capture the date and time, pre‑populate the fields, and display the popup using the code example below:

private void OnSchedulerTapped(object sender, SchedulerTappedEventArgs e)
{
    if (e.Element == SchedulerElement.SchedulerCell && e.Date.HasValue)
    {
        VM.NewStartDate = e.Date.Value.Date;
        VM.NewStartTime = e.Date.Value.TimeOfDay;
        VM.NewEndDate = e.Date.Value.Date;
        VM.NewEndTime = e.Date.Value.TimeOfDay.Add(TimeSpan.FromMinutes(30));
        VM.NewSubject = string.Empty;
        VM.SelectedRecurrence = RecurrenceType.None;
        VM.IsAddPopupVisible = true;
    }
}

Now, we save the new appointment to the existing appointment list:

private void SaveAppointment()
{
    var start = NewStartDate.Date + NewStartTime;
    var end = NewEndDate.Date + NewEndTime;
    var appt = new SchedulerAppointment
    {
        Subject = string.IsNullOrWhiteSpace(NewSubject) ? "New Event" : NewSubject,
        StartTime = start,
        EndTime = end,
    };

    // 
    appt.Reminders = new ObservableCollection<SchedulerReminder>
    {
        new SchedulerReminder { TimeBeforeStart = TimeSpan.FromMinutes(5) }
    };

    Appointments.Add(appt);
    IsAddPopupVisible = false;
}

Step 3: Set appointment reminders in the .NET MAUI Scheduler

To trigger a reminder before an event starts, set the SchedulerReminder.TimeBeforeStart property when saving the appointment.

For example, setting it to 15 minutes ensures the ReminderAlertOpening event fires exactly 15 minutes before the scheduled start time, as shown below.

// Add a 5-minute reminder (will trigger ReminderAlertOpening)

appt.Reminders = new ObservableCollection<SchedulerReminder>
{
    new SchedulerReminder { TimeBeforeStart = TimeSpan.FromMinutes(15) }
};

Appointments.Add(appt);

Step 4: Send an event reminder email using Gmail SMTP

You can deliver reminder emails by configuring Gmail’s SMTP server. This requires enabling Gmail’s security features, generating an app password, and authenticating securely before sending the message.

Step 4.1: Enable two-step verification in Gmail

Sign in to your Gmail account.
Go to Google account settings → security.
Turn on 2-step verification and complete the verification steps.

Refer to the following image.

Enabling 2-step verification in Gmail

Step 4.2: Generate an app password

After enabling 2-step verification, return to Security.
Under Signing in to Google, click App Passwords.
Select the app type (e.g., Mail) and device (e.g., Windows Computer).
Click Generate.

Generating a Gmail app password for SMTP authentication

Copy the 16-character app password shown in the popup. This password replaces your regular Gmail password for SMTP authentication.

Replacing a Gmail app password for SMTP authentication

Step 4.3: Add SMTP credentials and send the email

Define your Gmail address as SmtpUser and use the generated app password for authentication. Then implement the SendEmail method to:

Connect securely to Gmail’s SMTP server (smtp.gmail.com on port 587) with TLS enabled.
Authenticate using the Gmail address and app password.
Create a MailMessage with From, To, Subject, and Body.
Attempt to send the email and catche any exceptions to log an error message if sending fails.

Here’s how you can do it in code.

using System.Net;
using System.Net.Mail;

// Replace with your Gmail and app password
const string SmtpUser = "your_address@gmail.com";
const string SmtpAppPassword = "your_app_password";

void SendEmail(string to, string subject, string body)
{
    using var smtp = new SmtpClient("smtp.gmail.com", 587)
    { 
       EnableSsl = true, 
       Credentials = new NetworkCredential(SmtpUser, SmtpAppPassword) 
    };
    using var msg = new MailMessage(SmtpUser, to, subject, body) 
    { 
       IsBodyHtml = false
    };
    try
        {
            smtp.Send(msg);
            Console.WriteLine("Email sent successfully!");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error sending email: {ex.Message}");
        }
}

Step 4.4: Send the email when the reminder is triggered

Invoke the SendEmail method when the reminder event is triggered. Pass the recipient’s email address, the event subject, and a message that includes the event’s start time as shown in the code example below.

// Send email notification
private async void OnReminderAlertOpening(object? sender, ReminderAlertOpeningEventArgs e)
    {
        var appt = e.Reminders[0].Appointment;

        SendEmail("recipient@example.com", $"Reminder: {appt.Subject}", $"Your event starts at {appt.StartTime:t}");
    }

Show reminders with toast notifications

When an event reminder becomes due, you can display a native toast notification on the user’s device. This is handled by listening to the Scheduler’s ReminderAlertOpening event and invoking a cross-platform notification service (INotificationService) that abstracts platform-specific logic. The interface keeps your UI code clean, and platform-specific implementations handle their own toast notification using native APIs.

Step 1: Listen to the reminder event

When the reminder event triggers, retrieve the appointment details from the event arguments, create a notification message with the subject and start time, and call the notification service.

Try this in your code:

private async void OnReminderAlertOpening(object? sender, ReminderAlertOpeningEventArgs e)
    {
        var appt = e.Reminders[0].Appointment;

        _notifier.ShowNotification("Reminder", $"Upcoming: {appt.Subject}\nStarts at {appt.StartTime:t}");
    }

Step 2: Define a cross-platform notification interface

Next, create an interface that allows your pages to call a single method, while each platform provides its own implementation for showing notifications.

namespace Event_Reminder.Services
{
    public interface INotificationService
    {
        void ShowNotification(string title, string message);
    }
}

Step 2.1: Windows toast notification implementation

On Windows, the notification service (WindowsNotificationService) converts the interface call into a native Windows toast notification. It uses AppNotificationBuilder to build the notification and AppNotificationManagerto display it. Your page simply calls ShowNotification while the service creates the banner and places it in the Action Center using the Windows notification APIs.

Implementation example:

#if WINDOWS
using Microsoft.Windows.AppNotifications;
using Microsoft.Windows.AppNotifications.Builder;

namespace Event_Reminder.Services;

public class WindowsNotificationService : INotificationService
{
    public void ShowNotification(string title, string message)
    {
        var builder = new AppNotificationBuilder()
            .AddText(title)
            .AddText(message)
            .SetDuration(AppNotificationDuration.Short);

        AppNotificationManager.Default.Show(builder.Build());
    }
}
#endif

Then, register the Windows notification service in MauiProgram.cs using Dependency Injection:

MauiProgram.cs

#if WINDOWS
builder.Services.AddSingleton<INotificationService, WindowsNotificationService>();
#endif

Step 2.2: Android toast notification implementation

TheAndroidNotificationService displays native Android notifications by:

Ensuring a notification channel is available on Android 8+ (Oreo).
Building the notification with a title and expanded message text.
Setting priority and enabling sound/vibration defaults.
Wiring a PendingIntent to open your MainActivity when the user taps the banner.
Finally, displaying the notification using NotificationManagerCompat.

Here’s the complete code block:

using Android.App;
using Android.Content;
using AndroidX.Core.App;

namespace Scheduler_Event_Reminder.Services;

public class AndroidNotificationService : INotificationService
{
    public void ShowNotification(string title, string message)
    {
        var context = Android.App.Application.Context;
        var channelId = "reminder_channel";

        // Ensure channel exists
        if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.O)
        {
            var manager = (NotificationManager)context.GetSystemService(Context.NotificationService);
            var channel = manager.GetNotificationChannel(channelId);
            if (channel == null)
            {
                channel = new NotificationChannel(channelId, "Reminders", NotificationImportance.High)
                {
                    Description = "Reminder notifications"
                };
                manager.CreateNotificationChannel(channel);
            }
        }

        // Intent for actions
        var intent = new Intent(context, typeof(MainActivity));
        intent.AddFlags(ActivityFlags.ClearTop | ActivityFlags.SingleTop);
        var pendingIntent = PendingIntent.GetActivity(context, 0, intent, PendingIntentFlags.Immutable);

        // Action buttons
        var replyIntent = new Intent(context, typeof(MainActivity)); // Replace with actual reply handling
        var replyPendingIntent = PendingIntent.GetActivity(context, 1, replyIntent, PendingIntentFlags.Immutable);
        var archiveIntent = new Intent(context, typeof(MainActivity)); // Replace with actual archive handling
        var archivePendingIntent = PendingIntent.GetActivity(context, 2, archiveIntent, PendingIntentFlags.Immutable);

        // Build notification with MessagingStyle
        var builder = new NotificationCompat.Builder(context, channelId)
            .SetSmallIcon(Android.Resource.Drawable.IcDialogInfo)
            .SetContentTitle(title)
            .SetContentText(message)
            .SetStyle(new NotificationCompat.BigTextStyle().BigText(message)) // Expanded text
            .SetPriority(NotificationCompat.PriorityHigh)
            .SetDefaults((int)NotificationDefaults.All)
            .SetCategory(NotificationCompat.CategoryMessage)
            .SetAutoCancel(true)
            .SetContentIntent(pendingIntent);

        NotificationManagerCompat.From(context).Notify(1001, builder.Build());
    }
}

Note: Android 13+ requires POST_NOTIFICATIONS permission while Android 8+ requires a notification channel.

Then register the Android notification service in MauiProgram.csthrough Dependency Injection:

MauiProgram.cs

#if ANDROID
builder.Services.AddSingleton<INotificationService, AndroidNotificationService>();
#endif

AndroidManifest.xml: Request notifications permission (Android 13+)

Add the following permission to your AndroidManifest.xml file:

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

MainActivity.cs: Request permission and create the channel

Android 8+ requires a notification channel, and setting its importance to High enables heads-up banners. In MainActivity.cs, request the POST_NOTIFICATIONS permission for Android 13+ and create the notification channel for Android 8+, as shown in the code snippet below:

MainActivity.cs

using Android;
using Android.App;
using Android.Content.PM;
using Android.OS;

namespace Scheduler_Event_Reminder;

[Activity(
    Theme = "@style/Maui.SplashTheme",
    MainLauncher = true,
    LaunchMode = LaunchMode.SingleTop,
    ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode |
                           ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle? savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        // Request POST_NOTIFICATIONS permission for Android 13+
        if (Build.VERSION.SdkInt >= BuildVersionCodes.Tiramisu)
        {
            if (CheckSelfPermission(Manifest.Permission.PostNotifications) != Permission.Granted)
            {
                RequestPermissions(new[] { Manifest.Permission.PostNotifications }, 0);
            }
        }

        // Create notification channel for heads-up notifications (Android 8+)
        if (Build.VERSION.SdkInt >= BuildVersionCodes.O)
        {
            var channelId = "reminder_channel";
            var channelName = "Reminders";

            var channel = new NotificationChannel(channelId, channelName, NotificationImportance.High)
            {
                Description = "Reminder notifications"
            };

            var manager = (NotificationManager)GetSystemService(NotificationService);
            manager.CreateNotificationChannel(channel);
        }
    }
}

Step 2.3: IOS local notification implementation

You can schedule a local notification by:

Building UNMutableNotificationContent (title, body, sound).
Creating a one-second UNTimeIntervalNotificationTrigger (Apple requires triggers > 0).
Wrapping it in a UNNotificationRequest.
Lastly, adding it via UNUserNotificationCenter.

Note: You must request notification authorization once at app startup.

Add this to your project:

using System;
using UserNotifications;

namespace Scheduler_Event_Reminder.Services
{
    public sealed class iOSNotificationService : INotificationService
    {
        public void ShowNotification(string title, string message)
        {
            var content = new UNMutableNotificationContent
            {
                Title = title ?? string.Empty,
                Body = message ?? string.Empty,
                Sound = UNNotificationSound.Default,
            };

           var trigger = UNTimeIntervalNotificationTrigger.CreateTrigger(1, false);

            var request = UNNotificationRequest.FromIdentifier(
                Guid.NewGuid().ToString(),
                content,
                trigger);

            UNUserNotificationCenter.Current.AddNotificationRequest(request, (err) =>
            {
                if (err != null)
                    System.Diagnostics.Debug.WriteLine($"[iOS] Notification error: {err}");
                else
                    System.Diagnostics.Debug.WriteLine("[iOS] Notification scheduled.");
            });
        }
    }
}

Also, register the iOS notification service in MauiProgram.cs via dependency injection, shown in the code snippet below.

MauiProgram.cs

#if IOS
builder.Services.AddSingleton<INotificationService, iOSNotificationService>();
#endif

Step 2.4: Mac Catalyst local notification implementation

On Mac Catalyst, local notifications follow the same pattern as iOS. Schedule a local notification on Mac Catalyst by creating UNMutableNotificationContent using a one-second UNTimeIntervalNotificationTrigger, then wrapping it in a UNUserNotificationCenter.

Code example for quick integration:

using UserNotifications;

namespace Scheduler_Event_Reminder.Services
{
    public sealed class MacNotificationService : INotificationService
    {
        public void ShowNotification(string title, string message)
        {
            var content = new UNMutableNotificationContent
            {
                Title = title ?? string.Empty,
                Body = message ?? string.Empty,
                Sound = UNNotificationSound.Default
            };

            var trigger = UNTimeIntervalNotificationTrigger.CreateTrigger(1, false);

            var request = UNNotificationRequest.FromIdentifier(
                Guid.NewGuid().ToString(),
                content,
                trigger);

            UNUserNotificationCenter.Current.AddNotificationRequest(request, err =>
            {
                if (err != null)
                    System.Diagnostics.Debug.WriteLine($"[Mac Catalyst] Notification error: {err}");
            });
        }
    }
}

Then register the Mac Catalyst notification service in MauiProgram.cs via Dependency Injection:

MauiProgram.cs

#if MACCATALYST
builder.Services.AddSingleton<INotificationService, MacNotificationService>();
#endif

Below is a quick preview of the event reminder feature in action.

Toast notification triggered by an event reminder in the .NET MAUI Scheduler

GitHub reference

For more details on implementing event reminders with the .NET MAUI Scheduler, refer to the GitHub demo.

Frequently Asked Questions

Why use Syncfusion .NET MAUI Scheduler for reminders

It supports built-in reminders (EnableReminder=True) and fires ReminderAlertOpening so you can trigger emails/toast notifications cross-platform.

How do I bind and display appointments?

Bind the SfScheduler.AppointmentsSource to an ObservableCollection in your ViewModel and set the AllowedViews and View properties as needed.

Can I send reminder emails (SMTP) when alerts fire?

Yes, in ReminderAlertOpening, call SendEmail using SmtpClient to smtp.gmail.com:587 with TLS and Gmail app password authentication.

How do I display native notifications when a reminder fires?

To do this, handle the ReminderAlertOpening event and call an INotificationService. Implement platform-specific services using AppNotificationManager for Windows, NotificationCompat for Android, and UNUserNotificationCenter for iOS and macOS via Dependency Injection.

What permissions/config are needed for notifications

For Android 13 and above, the POST_NOTIFICATIONS permission is needed; for Android 8 and above, create a high-importance notification channel. For iOS and macOS, request user notification authorization once. For Windows, no extra permission is required, just register the service.

How do I prevent missed reminders when the app is backgrounded?

Use native notifications per platform, they display even if the app is not foregrounded.

How do I handle recurrence and multiple reminders?

Capture recurrence input in your UI and store with the appointment; for multiple alerts, add multiple SchedulerReminder entries to the appointment’s Reminders collection.

How do I navigate the user when they tap an Android notification?

Create an Intent to MainActivity with ActivityFlags.ClearTop | ActivityFlags.SingleTop, wrap it using PendingIntent.GetActivity(..., PendingIntentFlags.Immutable), then set it on NotificationCompat.Builder via SetContentIntent(pendingIntent) so tapping the notification opens your app.

How do I manage time zones and all‑day events?

Normalize appointment start and end to the user’s local time zone; for all‑day items, choose a consistent local start (e.g., 9 AM) for reminders to avoid midnight alerts.

Conclusion

Thank you for reading! Building an event reminder calendar with Syncfusion .NET MAUI Scheduler is a powerful way to combine simple event creation with reliable alerts. By adding events through a clean popup, setting reminder lead times, and triggering both native toast notifications and optional SMTP emails, you deliver a smooth, responsive experience across Android, iOS, Windows, and macOS.

And it doesn’t stop at personal reminders; this same approach works for team calendars, task tracking, and resource planning with custom templates and recurrence. With .NET MAUI’s flexibility and the Scheduler’s rich features, scaling your solution is straightforward.

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

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

Related Blogs

This article was originally published at Syncfusion.com.

Why Microsoft Office Automation Is Unsafe on Servers (and the Right .NET Alternative)

Phinter Atieno — Tue, 24 Feb 2026 15:30:49 +0000

TL;DR: Many teams still rely on Microsoft Office Automation to generate documents on servers, but it quickly becomes unstable in modern server and cloud environments. Server-safe document generation uses headless, thread-safe libraries that run reliably in web apps, Docker, Linux, and cloud. Learn the risks of Office Automation, what “server-safe” actually means, and how Syncfusion Document SDK can replace Interop with managed .NET APIs.

Automated document generation powers invoices, statements, reports, dashboards, and customer communications. For years, many teams used Microsoft Office Automation to create Word, Excel, and PowerPoint files programmatically. But as businesses move toward modern web, cloud, and container environments, Office Automation simply can’t keep up. It’s slow, unstable on servers, difficult to scale, and introduces serious security and compatibility issues.

That’s why developers are shifting to server-safe, cloud-ready document processing frameworks built for today’s architecture. The Syncfusion^® Document SDK is one of the most reliable alternatives, delivering fast, scalable, and fully automated generation of PDF, Word, Excel, and PowerPoint files without requiring Microsoft Office.

If you’re still using Office Automation in 2026, this is the perfect time to explore a modern, secure, and scalable way to generate documents at enterprise scale.

Why Microsoft Office Automation breaks at scale

Microsoft Office applications were not designed for automated or large-scale processing; they often fail to deliver the stability and scalability required for enterprise document generation. Let’s look at the major limitations:

Requires a real user profile: Office relies on user-specific settings (registry, fonts, printers, add-ins). Server accounts often don’t have these. Result: initialization failures and “it works on my machine” incidents.
Needs an interactive desktop: Office displays modal dialogs when issues occur. On servers, these dialogs can’t be dismissed, causing automation to freeze indefinitely and blocking all processing.
Not designed for high‑volume or parallel workloads: Microsoft Office is fundamentally single‑threaded and non‑reentrant, meaning it cannot safely run multiple instances or handle parallel operations.
Installation and self-repair features break automation: Office may trigger configuration wizards or “install on first use” screens that block background processes, something servers cannot handle.
Creates security risks: Office can unintentionally run macros with elevated privileges, expose shared credentials, and increase overall attack surface on backend systems.
Licensing restrictions: Using Office on a server for multiple users may violate licensing terms unless every consuming user is individually licensed, making it impractical for shared services.

What modern, server-safe document generation actually means

Modern, server-safe document generation goes far beyond simple libraries. It refers to server-friendly, cloud-ready technologies, including SDKs, APIs, services, and CLI tools, that can reliably create and manipulate Word, Excel, PowerPoint, and PDF files without requiring Microsoft Office. These solutions are purpose-built for today’s web, microservice, and distributed environments, offering the reliability and performance that Office Automation cannot match. A true modern document‑generation platform includes the following characteristics:

Headless execution: No Office installed. No COM. No GUI dependencies.
Thread-safe for high-volume workloads: Handle multiple concurrent requests, ideal for REST APIs, background workers, and microservices that process documents at scale.
Cross-platform compatibility: Works on Windows, Linux, and macOS (including Docker/Kubernetes).
High performance and low memory footprint: Optimized for speed, stability, and batch operations.
Secure by design: No macro execution, privileged operations, and uncontrolled dialogs.
Feature-rich API surface: Supports advanced document manipulation, including styling, tables, formulas, charts, images, shapes, sections, and more.

By adopting a modern, server‑safe document generation framework, organizations gain reliable, scalable, and secure document automation that meets the needs of cloud‑native and enterprise‑scale applications.

A practical alternative: Syncfusion Document SDK (No Microsoft Office required)

The Syncfusion Document SDK is a complete, enterprise-grade suite of .NET libraries designed to replace Microsoft Office Automation entirely. With fully managed APIs for creating, editing, and converting, PDF, Word (DOCX), Excel (XLSX), and PowerPoint (PPTX) files, it serves as a true end-to-end solution for report generation, data processing, and document automation.

Syncfusion’s Document SDK works seamlessly across the entire .NET ecosystem (.NET Core, Blazor, JavaScript, Flutter, WPF, WinForms). It fits naturally into web APIs, serverless functions, microservices, background jobs, desktop utilities, mobile apps, and large-scale cloud deployments.

Use it when you need consistent output without installing Microsoft Office on servers or containers.

Syncfusion PDF Library: Generate and process PDFs in code

The Syncfusion PDF Library is a server-safe .NET library for creating, editing, converting, and processing PDFs without Adobe Acrobat or Microsoft Office. It includes APIs for generating PDFs, filling forms, adding annotations, applying security, and optimizing files for web, cloud, and enterprise apps.

Generate PDFs from scratch

You can generate complete PDFs entirely in code, adding text, titles, tables, images, lines, and shapes, to automate fully customized documents that suit everyday business workflows like receipts, operational reports, executive summaries, and approval documents.

The following code example illustrates how to create a PDF from scratch.

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

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

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

//Set the standard font.
PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 20);

//Draw the text.
graphics.DrawString("Hello World!!!", font, PdfBrushes.Black, new PointF(0, 0));

//Save the document.
document.Save("Output.pdf");

//Close the document.
document.Close(true);

Note: For more advanced document‑generation patterns, refer to our official documentation.

Generate PDFs from templates + data (AcroForms)

Template-based PDF generation is common for invoices, certificates, HR forms, and contracts. With AcroForms, you fill fields programmatically and optionally flatten the form so values become permanent and non-editable. This pattern is useful when you need a consistent layout + data-driven output at high volume.

Note: If you’d like to see this workflow in action, try the AcroForm live demo.

Merge PDFs

You can assemble complex deliverables by merging multiple source PDFs into a single file, streamlining long documents by splitting them into logical parts, and enabling collaborative review by adding notes, highlights, stamps, and other annotations.

The following code example shows the process of merging multiple PDF documents.

//Creates a PDF document. 
using (PdfDocument finalDoc = new PdfDocument()) 
{ 
    //Creates a string array of source files to be merged. 
    string[] source = { "file1.pdf", "file2.pdf" }; 

    //Merges PDFDocument. 
    PdfDocumentBase.Merge(finalDoc, source); 

    //Save the document 
    finalDoc.Save("Output.pdf"); 
}

Convert Word, Excel, or PowerPoint to PDF

You can produce consistent, server-safe PDFs by converting DOCX, XLSX, and PPTX files directly to PDF, ensuring repeatable output for office documents without relying on Office Automation.

Note: Want to convert a Word, Excel, or PowerPoint file to PDF instantly? Use our free Online PDF Tools to upload your file and get a high-quality PDF in seconds.

Generate PDFs from images

You can convert one or more images into a neatly paginated PDF so that scanned paperwork, medical imagery, site‑inspection photos, field evidence, or onboarding document scans can be archived and shared as a single, portable file.

Here’s how you can do it in code:

//Create Document 
using (PdfDocument doc = new PdfDocument()) 
{ 
    //Add new page 
    PdfPage page = doc.Pages.Add(); 

    //Load a bitmap 
    using FileStream imageStream = new FileStream("Autumn Leaves.jpg", FileMode.Open, FileAccess.Read); 
    PdfBitmap image = new PdfBitmap(imageStream); 

    //Draw image 
    image.Draw(page, 20, 400); 

    //Save the PDF 
    doc.Save("output.pdf"); 
}

Note: Looking for a simple guide to turn images into clean, multi-page PDFs? Check out our image‑to‑PDF user guide.

Generate PDFs from HTML

Syncfusion’s HTML‑to‑PDF converter transforms any HTML-based interface into a pixel-perfect PDF, while preserving your original layouts, styles, fonts, images, and even JavaScript-rendered content.

Implementation example:

//Initialize HTML-to-PDF converter. 
HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(); 

//Convert URL to PDF 
PdfDocument document = htmlConverter.Convert("https://www.syncfusion.com"); 

//Save and close the PDF document. 
document.Save("Output.pdf"); 
document.Close(true);

This converts an HTML page into a PDF, useful for invoices, dashboards, and “print-ready” versions of web views.

The following image shows the PDF converted from HTML.

HTML converted to PDF

Note: Want to quickly check how your web page looks as a PDF? Try the HTML-to-PDF converter live demo.

Syncfusion Word Library: Modern DOCX automation made simple

The Syncfusion Word Library (DocIO) makes it simple to create, read, edit, and convert Word documents entirely in code without installing Microsoft Word on your machine or server.

Create DOCX from scratch

Syncfusion allows users to create Word documents programmatically without using any template. Use the Syncfusion .NET Word Library to build documents step‑by‑step by adding text, headings, tables, or images through code.

Note: For more information about creating a Word document from scratch, refer to our official documentation.

Template-based document creation

Create Word documents easily with a template that you design in Microsoft Word. The layout remains the same, while only the content changes, saving time and avoiding manual editing.

Mail merge with data

Mail merge helps you design a DOCX template in Word, add placeholders, and then merge data to generate personalized documents in bulk (letters, invoices, certificates).

Designing a DOCX template in Word using mail merge

Note: Want to give it a try? Check our mail merge live demo.

Advanced document elements

Syncfusion .NET Word Library supports more than plain text: tables, images, fields, bookmarks and tracked changes, useful when your “document generation” is really “document assembly.”

Note: Explore the complete Syncfusion Word Library user guide to dive deeper into working with tables, images, fields, bookmarks, and tracked changes, all in one place.

Syncfusion’s .NET Word Library supports conversions from HTML, Markdown (MD), plain text, and RTF to Word documents, and vice versa. The conversion engine preserves structure, formatting, and styles, ensuring clean DOCX output without requiring Microsoft Word.

Note: Want to learn how to convert Word documents into different formats? Check out the full documentation for examples and detailed steps.

Syncfusion Excel Library: Server-safe Spreadsheet generation

The Syncfusion Excel Library (XlsIO) is a .NET library for creating, editing, and converting Excel files (XLS, XLSX) without requiring Microsoft Office. It is fully headless, built using 100% managed code, and optimized for modern workloads, including web APIs, background services, microservices, and cloud deployments.

Generate Excel files with formulas

You can automate the spreadsheet creation with dynamic formulas that calculate values in real time. This is ideal for generating monthly sales reports, financial summaries, KPI sheets, performance dashboards, and any scenario where totals, margins, or business metrics must be computed automatically.

Below is the code you need:

using (ExcelEngine excelEngine = new ExcelEngine())
{
    IApplication application = excelEngine.Excel;
    application.DefaultVersion = ExcelVersion.Xlsx;
    IWorkbook workbook = application.Workbooks.Create(1);
    IWorksheet sheet = workbook.Worksheets[0];

    //Setting values to the cells
    sheet.Range["A1"].Number = 10;
    sheet.Range["B1"].Number = 10;

    #region Set Formula
    //Setting formula in the cell
    sheet.Range["C1"].Formula = "=SUM(A1,B1)";
    #endregion

    #region Save
    //Saving the workbook
    workbook.SaveAs(Path.GetFullPath("Output/Formula.xlsx"));
    #endregion
}

After running the code, you’ll see this:

Sample Excel file generated using Syncfusion Excel Library

XlsIO also supports charts, pivot tables, and conversions (Excel to PDF/images), which are common “Interop-only” reasons teams get stuck.

Import and export data (CSV, JSON)

Import large datasets from CSV (or other delimited files) and convert them into structured Excel workbooks. Export entire workbooks or specific ranges to CSV or JSON for APIs, downstream systems, and archiving. You can also read from and write to databases directly to reduce manual transfers and improve reporting accuracy.

The following code example converts an Excel workbook to CSV for downstream systems or integrations.

// Export Excel as CSV 

using (ExcelEngine excelEngine = new ExcelEngine()) 
{ 
IApplication application = excelEngine.Excel; 
application.DefaultVersion = ExcelVersion.Xlsx; 
IWorkbook workbook= application.Workbooks.Open(Path.GetFullPath(@"Data/InputTemplate.xlsx")); 

//Saving the workbook  
workbook.SaveAs(Path.GetFullPath("Output/Sample.csv"), ","); 
}

Note: Explore the user guide and run the live demos to see how easily you can build server-friendly Excel workflows.

Syncfusion PowerPoint Library: Generate PPTX (and export) without PowerPoint

The Syncfusion PowerPoint Library makes it easy to generate, edit, and convert PowerPoint presentations entirely in code without installing Microsoft PowerPoint. If your workflow creates slide decks from data (weekly updates, executive summaries, customer reports), PowerPoint automation via Interop is especially brittle on servers.

A server-safe approach lets you:

Create PPTX from scratch or from templates.
Populate slides with text, tables, charts, and images.
Clone/reorder slides programmatically.
Export PPTX to PDF or images for sharing and archiving.

This is useful when presentations are part of an automated reporting pipeline.

Create PowerPoint presentations (PPTX) programmatically

You can build a presentation from scratch or open an existing file and add slides, text, shapes, tables, and charts. You can also fill slides with real-time data and keep formatting consistent across every presentation.

Creating a simple PowerPoint presentation

Note: For more information about creating a simple presentation from scratch, refer to this documentation.

If you need SmartArtstyle diagrams, you can create them using grouped shapes and connectors. This helps you generate clean, structured slide layouts for reports, dashboards, or summaries with consistent formatting. For more information about SmartArt, refer to this documentation.

Populate template-based slide decks with business data

Use PowerPoint templates that already contain your slide layout and placeholders, then, using .NET PowerPoint Library, fill those placeholders with real business data. Text boxes, tables, numbers, and charts can be updated automatically, making it easy to generate fresh sales reports or monthly review decks without editing slides by hand. For more information, refer to our official documentation.

Insert images, media, branding assets

Use the Syncfusion .NET PowerPoint Library to insert images, logos, and other branding assets into slides, and then control their size and placement programmatically to keep presentations visually consistent. For more information, refer to this documentation.

Clone, reorder, or modify slide layouts

Syncfusion .NET PowerPoint Library lets you manage slides easily through code. You can clone existing slides to reuse their layout, reorder slides to adjust the flow of your presentation, or change the slide’s layout when you need a different structure. For more information, refer to this documentation.

Export PPTX into PDF, images, or handout style output

Syncfusion .NET PowerPoint Library makes it easy to export your presentations to different formats. You can convert a PPTX to a PDF or convert each slide into an image for use in reports, dashboards, or web applications.

Take a moment to peruse the documentation, where you’ll find other options and features, all with accompanying code examples.

Migration from Office Automation: How to transition smoothly

Organizations are moving away from Office Interop because it relies on desktop applications and UI components, making automation unstable and difficult to scale on servers or in the cloud. The Syncfusion Document SDK offers a modern, cross-platform, and reliable alternative.

You can map your existing VBA or Interop workflows directly to Syncfusion APIs, Word tasks to DocIO, Excel tasks to XlsIO, PowerPoint tasks to the Presentation library, and PDF tasks to the PDF Library. Macro-based workflows can be replaced with clean .NET code that runs safely in any environment.

Looking for the simplest way to move your Office Automation workflows to a modern, server-safe solution? Read the Office Automation migration guide.

Looking for a simpler, ready‑to‑deploy option for document processing?

The Syncfusion Document Processing Web API is also available as a ready-to-deploy Docker image, providing a fully preconfigured, portable, and easily scalable environment for document conversion and PDF processing with minimal setup. It’s a cost-effective option because it reduces setup time, minimizes maintenance effort, and eliminates the need for complex infrastructure. And since you host the Web API in your own environment, you can apply your own security standards, authentication rules, and network controls, making your deployment even more secure.

Note: Ready to set it up quickly? View the hosting guide for complete setup instructions.

Frequently Asked Questions

Does a single Syncfusion license include PDF, Word, Excel, and PowerPoint libraries?

Yes. A Syncfusion Document SDK license includes the full document processing suite, PDF, Word (DOCX), Excel (XLSX), and PowerPoint (PPTX), without requiring separate add-ons or additional purchases.

Can I set up the Document Processing Web API quickly without complex configuration?

Yes. Syncfusion provides a ready-to-deploy Docker image for its Document Processing Web APIs, allowing you to start processing PDF, Word, Excel, and PowerPoint files in minutes with minimal setup or manual configuration.

Do I need to pay extra to use the Document Processing API Docker image?

No. There is no additional cost for using the Docker image. It uses the same libraries included in your existing Syncfusion Document SDK license, so you can deploy the Web API container without any extra fees.

Will the output look the same when switching from Office Automation to the Document SDK?

The Document SDK delivers stable, high-fidelity output by preserving layout, fonts, and formatting consistently across operating systems and deployment environments.

Does the Document SDK require external dependencies like Adobe Acrobat or Microsoft Office?

No. The Document SDK is a fully headless, standalone engine and does not require Adobe Acrobat, Microsoft Office, or any other external application to create, convert, or process documents.

Conclusion: Future-proof document generation

Thank you for reading! Office automation relies on desktop apps, making it unreliable on servers and difficult to scale. This is why modern applications need a safer, faster, and more stable way to generate documents.

Syncfusion Document SDK provides a future-proof solution with fully headless, cross-platform libraries for PDF, Word, Excel, and PowerPoint. It works the same on Windows, Linux, and in the cloud and helps you build reliable document workflows without Office Interop.

If you want to take your document generation to the next level! Try our Syncfusion Document SDK.

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

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

Related Blogs

This article was originally published at Syncfusion.com.

ASP.NET Core Security Explained: Modern Authentication, Authorization, and JWT

Phinter Atieno — Mon, 09 Feb 2026 03:28:57 +0000

TL;DR: Most ASP.NET Core apps aren’t insecure because Fdevelopers ignore security, but due to subtle, unnoticed issues. This guide shows where things go wrong and how to fix them.

Why security in ASP.NET Core matters more than ever

Security in ASP.NET has come a long way, from basic authentication in classic ASP.NET to the robust, flexible systems available in ASP.NET Core today. With the .NET 10 release, the core principles remain solid, though it’s always worth checking for updates.

That’s why locking down your app is non-negotiable. It’s the only way to shield your users, your data, and your reputation from threats that can escalate fast.

The two questions that decide your app’s security

Every secure ASP.NET Core app must answer exactly two questions correctly, every time:

Who is the user? (Authentication)
What are they allowed to do? (Authorization)

If you confuse these concepts or blur the distinctions, security holes appear quickly. We’ll walk through both using a realistic scenario, a Blog API with different user roles and permissions:

Anyone can read posts.
Logged‑in users can comment.
Admins can create or delete posts.

Simple rules. Powerful lessons. Ready to secure your ASP.NET Core app? Let’s dive in and put these principles to work.

The basics: Authentication and authorization

Authentication verifies who a user is, like logging in with credentials. Authorization determines what the user can do. ASP.NET Core supports both via middleware and schemes configured in Program.cs.

The authentication middleware (UseAuthentication()) runs early in the pipeline to establish the user’s identity as a ClaimsPrincipal, which authorization then uses to make decisions.

Building a solid foundation early makes everything smoother. With that groundwork in mind, let’s explore how ASP.NET Core processes requests and the different authentication and authorization types you’ll encounter.

Step-by-step flow of involving requests in ASP.NET Core

The following are the steps for authentication and authorization to obtain a protected resource.

First request (Unauthenticated access attempt):
- The client sends a request to a protected endpoint (e.g., GET /protected-resource).
- The request contains no valid authentication information (e.g., no cookies, tokens, or headers).
- The server’s authentication middleware (AuthenticateCoreAsync()) runs:
- Calls the handler’s AuthenticateAsync() method for the scheme(s).
- No valid identity is found, so no ClaimsPrincipal is created.
- The authorization middleware then checks and fails.
- Since the resource requires authentication, authorization fails.
- Handler then issues a challenge, depending on the scheme:
- For APIs/SPAs: Often a 401 unauthorized response with WWW-Authenticate header (e.g., “Bearer” for JWT).
- For web apps: Redirect (302) to a login page (e.g., /login).
- At this point, no ClaimsPrincipal exists yet, because the user has not been authenticated.
Second request (login/authentication):
- The client responds to the earlier challenge by attempting to authenticate:
- Prompts the user for credentials (username/password, etc.).
- Sends a new request, e.g., POST /login or POST /token with those credentials.
- The server’s authentication middleware runs again:
- Handler’s AuthenticateAsync() validates credentials (e.g., by checking against a database or an external provider).
- If the credentials are valid, the server creates a AuthenticationTicket containing the user’s claims.
- The handler then calls the SignInAsync() method to persist the identity (e.g., sets a cookie or issues a JWT token).
- ASP.NET Core sets HttpContext.User to the newly created ClaimsPrincipal.
- The server returns a success status (200 OK) and an authentication artifact (a cookie/token) for the client to use in future requests.
- Now, the ClaimsPrincipal is established on the server for this session.
Subsequent requests (With auth):
- The client now includes authentication information (e.g., an authorization header with a token or a cookie).
- The authentication middleware authenticates successfully.
- A valid ClaimsPrincipal is populated immediately.
- Authorization checks pass, then the resource is served.
- No additional login requests needed until the session expires.

The following sequence diagram illustrates the client and server-side flows:

Complete ASP.NET Core authentication and authorization request flow

Types of authentication and when to use them

ASP.NET Core supports a variety of authentication policy schemes via middleware. Here’s a grouped overview:

ASP.NET Core identity: It provides a complete, integrated system for managing users, roles, and claims with seamless persistence via Entity Framework Core. It supports modern authentication capabilities, including passkeys for passwordless login, two-factor authentication, and external logins. Use it when you need a full-featured identity system for web apps.
Azure authentication: It allows you to federate identities with Microsoft Entra ID (formerly Azure AD) using OpenID Connect (OIDC). This approach provides a single sign-on (SSO) and delivers enterprise-grade security for cloud and hybrid apps. It’s the ideal choice when your app needs to support organizational accounts or integrate with Microsoft 365.
Cookie authentication: It provides a stateful session authentication mechanism for web apps. The server issues an encrypted authentication cookie that stores the user’s identity, and the browser automatically sends it with each request. This allows the server to rebuild the user’s identity across the session. This method works well for traditional MVC apps where session continuity is important.
OIDC web authentication: OpenID Connect (OIDC) is used when your web app needs to authenticate users through external identity providers such as Google and Microsoft. The OIDC middleware handles the full flow for you, including redirects, token exchange, and user profile retrieval. It’s the standard for modern federated authentication in web apps.
JWT Bearer authentication: It is designed for stateless APIs. The client sends a JSON Web Token in the authorization header, and the server validates it without maintaining session state. This method is lightweight and ideal for microservices and SPA backends.
Certificate authentication: Use client certificates to establish identity via mutual TLS authentication. The server validates the client’s certificate, ensuring strong identity verification. This approach is common in high-security environments like banking or government systems.
Windows authentication: It is used for intranet apps in which users are a part of an Active Directory domain. It relies on protocols such as Kerberos or NTLM to automatically authenticate users. This method is perfect for internal enterprise apps.
WS-federation authentication: It enables integration with ADFS or Microsoft Entra ID for federated identity. Although it predates modern protocols like OIDC, it remains widely used in legacy enterprise systems. It supports single sign-on (SSO) across multiple apps.
Social authentication: It uses OAuth for providers like Google, Facebook, or GitHub. This allows users to log in with their existing social accounts, improving convenience and reducing password fatigue.

Authentication considerations

Let’s explore the key considerations below:

Policy schemes: They allow us to combine multiple authentication methods within the same app. For example, we might use Google OAuth to handle sign‑in challenges while using cookie authentication to maintain the session afterward. This approach gives us the flexibility to blend external identity providers with local session management, resulting in a smooth, consistent experience across hybrid authentication flows.
Mapping, customizing, and transforming claims: Standardize user identity information by adjusting or transforming claims within middleware or authorization handlers. This includes mapping external provider claims, such as email or role, into the format your app expects, or adding custom claims required for business logic. These transformations ensure consistent identity data and make it easier to evaluate authorization policies across different identity sources.
Community OSS options: Use open‑source frameworks to handle advanced identity, multi‑tenancy, and authentication needs without building everything yourself. For multi‑tenancy, we can rely on tools like Orchard Core, ABP Framework, or Finbuckle.MultiTenant. For identity and authentication, popular open‑source providers include Duende IdentityServer, OpenIddict, the FIDO2 .NET Library, and WebAuthn. These solutions help us implement standards such as OAuth2, OpenID Connect, and passwordless authentication efficiently and consistently.
Multi-Factor authentication (MFA): We can enhance account security by verifying a user’s identity with multiple factors (2FA). Common options include authenticator apps (such as Microsoft Authenticator), passkeys/FIDO2 for passwordless login, or SMS-based codes for an additional verification step. MFA greatly reduces the likelihood of account compromise and is an essential layer in modern authentication strategies.

Types of authorization (Where most apps quietly fail)

Authorization in ASP.NET Core builds on the ClaimsPrincipal established during authentication. Each authorization decision relies on the claims contained within that principal, allowing for flexible, fine‑grained access control.

The following are the primary authorization approaches that leverage the ClaimsPrincipal model.

Role-based authorization (RBAC): Checks whether the authenticated user belongs to a specific role before granting access. Roles represent pre-defined sets of permissions, such as Admin, Manager, or User, making this approach simple and effective when your app has a clear role hierarch y.
Claims-based authorization: This method evaluates specific claims attached to a user’s identity to decide what they can access. Claims are simple key-value attributes representing user details (e.g., “CanComment = true” in our Blog API, enabling commenting privileges). This approach provides more precise and flexible control than basic roles, allowing permissions to be tailored to specific attributes and scenarios.
Policy-based authorization: This approach allows us to define custom authorization policies that combine specific requirements and handlers to enforce complex business rules. For example, in a Blog API, we might enforce a policy requiring a “CanComment = true” claim plus a minimum age check via a custom handler for commenting eligibility. It offers high flexibility, making it ideal for advanced scenarios such as external validations, multi‑step checks, or conditional access logic.
Resource-based authorization: This method performs authorization checks directly against a specific resource, usually within controllers or services. For example, in a Blog API, you can use IAuthorizationService to confirm that the authenticated user owns a post before allowing it to be deleted. This approach is especially effective when permissions depend on resource attributes, such as ownership, rather than general roles or claims.
View-based authorization: This approach applies authorization rules directly in the UI layer, allowing Razor or Blazor views to show or hide components based on the user’s permissions. For example, in a Blog API’s Blazor frontend, you could use the AuthorizeView component to display a “Delete Post” button only to admins. This improves usability by tailoring the interface to each user and preventing sensitive actions from appearing to unauthorized users.

Authorization considerations

The following considerations strengthen our overall authorization model and prepare the foundation for more advanced scenarios:

Authorization policy providers: Dynamic policy loading. Use this when a large range of policies is needed.
Limit identity by scheme: Use scheme-specific identities when multiple authentication schemes are configured. This provides secure isolation for each scheme and improves code readability and maintainability by clearly indicating which scheme applies to each resource.
Customize the behavior of AuthorizationMiddleware: Override the default behavior of ASP.NET Core’s AuthorizationMiddleware to handle authorization failures in a custom way. Instead of simply returning a 403 or redirecting to a login page, we can return custom responses (e.g., JSON error messages for APIs), log additional details, or trigger specific workflows. This flexibility is useful for tailoring the user experience and meeting app-specific requirements.
Dependency injection in requirement handlers: ASP.NET Core lets us inject services directly into custom authorization requirement handlers. This allows us to access app services, such as databases, logging, and external APIs, while evaluating authorization logic. Using dependency injection creates modular, testable, and maintainable handlers without hardcoding dependencies.

Deep dive: JWT Bearer authentication with policy-based authorization in ASP.NET Core Web API

Let’s build a Blog API with anonymous reads, authenticated comments, and admin posts. The API uses JWT for stateless authentication and policy-based authorization for flexible rules (e.g., age checks or custom logic). This approach scales well for modern APIs.

If you’re new to creating a minimal API with ASP.NET Core, review the basics in the guide.

Setup (Program.cs)

Install the following packages:

Microsoft.AspNetCore.Authentication.JwtBearer.
Microsoft.AspNetCore.Identity.EntityFrameworkCore.
Microsoft.EntityFrameworkCore.SqlServer.

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
using System.Text.Json.Serialization;

var builder = WebApplication.CreateBuilder(args);

builder.Services.Configure<Microsoft.AspNetCore.Http.Json.JsonOptions>(options =>
    options.SerializerOptions.PropertyNameCaseInsensitive = true
);

builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"))
);

builder.Services.AddIdentity<IdentityUser, IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>()
    .AddDefaultTokenProviders();

// JWT Authentication
var jwtSettings = builder.Configuration.GetSection("JwtSettings");
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidIssuer = jwtSettings["Issuer"],
            ValidateAudience = true,
            ValidAudience = jwtSettings["Audience"],
            ValidateLifetime = true,
            ClockSkew = TimeSpan.Zero, // stricter expiration
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(jwtSettings["Key"]))
        };
    });

// Policy-Based Authorization
builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("AdminPolicy",
        policy => policy.RequireRole("Admin")
    );
    options.AddPolicy("CommentPolicy", policy =>
    {
        policy.RequireClaim("CanComment", "true");
        policy.Requirements.Add(new MinimumAgeRequirement(18)); // Custom requirement
    });
});
builder.Services.AddSingleton<IAuthorizationHandler, MinimumAgeHandler>();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.MapOpenApi();
}

app.UseAuthentication();
app.UseAuthorization();
app.UseHttpsRedirection();
//Add Endpoints here
app.Run();

Custom requirement/handler

In a scenario where only users above the age of 18 are eligible to comment on the blog, you can implement a custom authorization requirement and handler to enforce this rule:

public class MinimumAgeRequirement: IAuthorizationRequirement
{
    public int MinimumAge { get; }
    public MinimumAgeRequirement(int minimumAge) => MinimumAge = minimumAge;
}

public class MinimumAgeHandler: AuthorizationHandler<MinimumAgeRequirement>
{
    protected override Task HandleRequirementAsync(AuthorizationHandlerContext context, MinimumAgeRequirement requirement)
    {
        var dateOfBirthClaim = context.User.FindFirst(c => c.Type == "DateOfBirth");
        if (dateOfBirthClaim == null) return Task.CompletedTask;

        var dateOfBirth = Convert.ToDateTime(dateOfBirthClaim.Value);
        var age = DateTime.Today.Year - dateOfBirth.Year;
        if (age >= requirement.MinimumAge) context.Succeed(requirement);

        return Task.CompletedTask;
    }
}

Now, create a test user and login Endpoint (Generate JWT) as shown below.

app.MapPost("/create-test-user", async (UserManager<IdentityUser> userManager) =>
{
    var user = new IdentityUser
    {
        UserName = "test@example.com",
        Email = "test@example.com",
        EmailConfirmed = true
    };

    var result = await userManager.CreateAsync(user, "YourStrongPassword123!");
    if (result.Succeeded)
    {
        await userManager.AddToRoleAsync(user, "Admin"); 
        await userManager.AddClaimAsync(user, new Claim("CanComment", "true"));
        await userManager.AddClaimAsync(user, new Claim("DateOfBirth", "2000-01-01"));
        return Results.Ok("Test user created");
    }

    return Results.BadRequest(result.Errors);
});

// Endpoint for login with JWT generation
app.MapPost("/login", async (LoginModel model, SignInManager<IdentityUser> signInManager, UserManager<IdentityUser> userManager) =>
{
    var user = await userManager.FindByEmailAsync(model.Email);
    var signInResult = await signInManager.CheckPasswordSignInAsync(user, model.Password, false);
    if (user == null || !signInResult.Succeeded)
        return Results.Unauthorized();

    var claims = new List<Claim> { new Claim("sub", user.Id.ToString()), new Claim("CanComment", "true") };
    claims.AddRange((await userManager.GetRolesAsync(user)).Select(r => new Claim(ClaimTypes.Role, r)));

    var dobClaims = await userManager.GetClaimsAsync(user);
    claims.AddRange(dobClaims);

    var token = new JwtSecurityToken(
        issuer: jwtSettings["Issuer"],
        audience: jwtSettings["Audience"],
        claims: claims,
        expires: DateTime.UtcNow.AddMinutes(30),
        signingCredentials: new SigningCredentials(new SymmetricSecurityKey(Encoding.UTF8.GetBytes(jwtSettings["Key"])), SecurityAlgorithms.HmacSha256)
    );

    return Results.Ok(new { Token = new JwtSecurityTokenHandler().WriteToken(token) });
});

Refer to the following image.

Successful login to the Blog API using JWT

Protected endpoints

Refer to the following code example to configure protected endpoints.

app.MapGet("/posts", () => "Public posts"); // Anonymous

app.MapPost("/comments", () => "Add comment")
    .RequireAuthorization("CommentPolicy"); // Policy-Based

app.MapPost("/posts", () => "Create post")
    .RequireAuthorization("AdminPolicy"); // RBAC via Policy

Setting the appsettings.json file

The following appsettings.json configuration centralizes two critical concerns for the application: JWT authentication settings and database connectivity.

JSON

{
    "JwtSettings": {
        "Key": "A-Very-Long-Secret-Key-Here-AtLeast-32-Bytes-For-Security",
        "Issuer": "Syncfusion",
        "Audience": "Syncfusion"
    },
    "ConnectionStrings": {
        "DefaultConnection": "Data Source=YourServerName;Initial Catalog=BlogDb;Integrated Security=True;Encrypt=False"
    }
}

Now, the client logs in, receives a JWT with claims, and sends it in the Bearer header. ASP.NET Core validates the token, builds the user principal, and evaluates authorization policies for each request.

JWT Bearer authentication flow in ASP.NET Core Web APIs

When to use which authentication and authorization approach?

The table below outlines which authentication and authorization methods are most appropriate for different application scenarios.

Category	Type/Consideration	Scenarios	When to Use/Combine
Authentication	ASP.NET Core Identity	User management with DB	With JWT/Cookie for full stack
Authentication	Azure/OIDC/Social	External providers	Federated logins; combine with Identity
Authentication	Cookie	Stateful web apps	With policies for sessions
Authentication	JWT Bearer	Stateless APIs	With policy-based for scalability
Authentication	Certificate/Windows/WS-Fed	Secure/enterprise	Intranets; limited combos
Authentication Consideration	Policy Schemes/MFA	Multi-scheme/Multi-factor	Enhance security; OSS for tenants
Authorization	Role/Claims-Based	Simple/dynamic access	Base; combine with policy
Authorization	Policy/Resource-Based	Complex/ownership	Advanced; with DI/handlers
Authorization	View-Based	UI control	Razor; pair with action auth
Authorization Consideration	Providers/Scheme Limits	Dynamic/custom	Enterprise; middleware tweaks

Security best practices you should never skip

The following are recommended best practices for building a secure ASP.NET Core application.

Enforce HTTPS: Prevents token/credential theft by mitigating man-in-the-middle (MITM) attacks.
Use least privilege: Limits damage if a token is compromised. Use specific roles or claims instead of “Admin” for everything. Create granular policies (e.g., CanCreatePost, CanDeleteOwnComment). Never protect sensitive operations with [Authorize] only.
Validate tokens strictly: Prevents forged, expired, or replayed tokens. Use short-lived tokens with a refresh mechanism. Avoid placing sensitive data in claims.
Implement MFA: Passwords alone are not sufficient for secure authentication.
Store secrets securely (Key Vault): No hardcoded keys in source code. In production, use a secure store such as Azure Key Vault, AWS Secrets Manager, etc.
Enable audit logging: Helps detect breaches and fulfill compliance requirements.
Keep packages and SDK up to date: This will patch known vulnerabilities faster.
Secure cross-origin in Blazor/API hybrids: Never store JWT in localStorage (XSS risk). Prefer an HttpOnly cookie with the BFF pattern. If you must use Bearer tokens, use short-lived with the refresh tokens. Always specify allowed origins, and never AllowAnyOrigin().
Optimize performance by caching roles or claims: For large apps, cache user roles or claims using IMemoryCache or similar to reduce database load.
Extend identity models when needed: When using identity, extend IdentityUser or IdentityRole to add custom properties (e.g., add public string Department {get; set;} to the user).
Test authentication thoroughly: Use tools like Postman to test registration or login with roles. Inspect database tables to confirm proper storage and relationships.

Costly ASP.NET Core security mistakes

Avoid these, and you’re already ahead of most apps:

Trusting JWTs without validation.
Using roles for complex business rules.
Storing too many claims in tokens.
Skipping authorization on background APIs.
Treating frontend auth as backend security.

Conclusion: Build secure ASP.NET Core apps with confidence

Thanks for reading! Securing ASP.NET Core apps today goes far beyond basic login forms or simple role checks. It offers a comprehensive, layered approach, ranging from robust authentication schemes and federated identity to granular policy‑based authorization, custom requirement handlers, and runtime best practices like strict token validation and MFA enforcement. By leveraging features such as ASP.NET Core Identity, JWT Bearer with policy schemes, claims transformation, resource‑based checks, and tools like OpenIddict or Duende, you can build apps that remain resilient against modern threats while staying flexible and scalable.

Ready to take this further? Whether you’re securing a public‑facing Blazor app, a high‑traffic Web API, or an enterprise microservices environment, start by establishing identity early, layering defenses carefully, and validating relentlessly. Apply these practices incrementally, test with real‑world attack scenarios, and your apps will not only be secure, but they’ll also set the standard for trust in a zero‑trust world.

Let us know in the comments section which authentication and authorization features you would like explained in the next blog post.

Once your ASP.NET Core app is secure, building a polished UI shouldn’t slow you down. Syncfusion ASP.NET Core components help you create secure, role‑aware dashboards and admin screens quickly, so you can focus on logic, not UI boilerplate.

Try them free to accelerate your next secure app.

You can also reach us via our support forum, support portal, or feedback portal. We’d love to hear from you!

Related Blogs

This article was originally published at Syncfusion.com.

How to Style Summary Rows in a WPF DataGrid for Clearer UI

Phinter Atieno — Fri, 06 Feb 2026 11:28:24 +0000

TL;DR: Default summary rows in the WPF DataGrid often look generic and make key metrics easy to overlook. This guide shows how to transform table, group, and caption summary rows into visually distinct, readable, and consistent UI elements. You’ll learn when to use implicit versus explicit styles, how to highlight important aggregates, and how to create a maintainable styling strategy that scales across your application.

Effective data visualization is no longer optional, it’s foundational to modern application design. As datasets grow in size and complexity, users rely on visual cues to quickly interpret totals, averages, and grouped metrics. When these cues are missing, even accurate data can feel overwhelming or hard to trust.

The Syncfusion^® WPF DataGrid offers a powerful data-handling foundation, but its default summary row styles are intentionally neutral. Without customization, critical insights, such as grand totals or group averages, can blend into the grid, reducing clarity and usability.

By thoughtfully styling summary rows, you can elevate the entire DataGrid experience. Well-designed summary rows guide the user’s eye, reinforce hierarchy, and make important numbers instantly recognizable. In this guide, you’ll learn how to use built-in styling properties, such as background color, typography, and spacing, to create a summary UI that looks intentional, professional, and easy to read.

We will walk through customization patterns for the following DataGrid elements:

Table summary rows and cells.
Group summary rows and cells.
Caption summary rows and cells.

Best practice: Use implicit styles for consistent, app-wide design, and explicit styles when a specific DataGrid requires a unique appearance.

Customize table summary rows

Table summary rows appear at the top or bottom of the grid and display high-level metrics such as grand totals. Because these values often influence decisions, they should be visually distinguished from regular data rows.

Method 1: Style summary rows

Implicit style for app-wide consistency

By setting the Style.TargetType property to the TableSummaryRowControl class, you can define a default appearance for all table summary rows in your application. This allows you to align the grid’s look and feel with your overall design language.

For the best result, store this style in a shared ResourceDictionary. Doing so ensures consistent styling across the app and reduces repetition when multipe grids use summary rows.

This approach improves the user experience by making summary rows visually distinct, predictable, and polished.

Here’s how you can do it in code:

<Style TargetType="syncfusion:TableSummaryRowControl">
    <Setter Property="Background" Value="Bisque"/>
    <Setter Property="FontStyle" Value="Italic"/>
    <Setter Property="Foreground" Value="Red"/>
</Style>

Explicit styling for a single grid

When you want only a single DataGrid to use a custom table summary row style, define an explicit style and assign it using the TableSummaryRowStyle property.

This approach is ideal when a particular grid requires unique branding, visual emphasis, or layout differentiation without affecting other grids in the application.

For this, refer to this code:

<Style TargetType="syncfusion:TableSummaryRowControl"
       x:Key="tableSummaryRowStyle">
    <Setter Property="Background" Value="Bisque"/>
</Style>

<syncfusion:SfDataGrid x:Name="dataGrid"  
                       ItemsSource="{Binding Orders}"
                       ShowGroupDropArea="True"
                       TableSummaryRowStyle="{StaticResource tableSummaryRowStyle}"> 
</syncfusion:SfDataGrid>

Here’s what the summary row looks like:

Styled table summary row

Method 2: Style summary cells

Summary cells typically display key metrics such as totals, averages, or counts. Applying custom styles to these cells improves readability and helps users quickly identify important values.

Implicit styling

You can define implicit styles in XAML to ensure summary cells visually align with your application’s design language.

Common styling enhancements include:

Set a background color to visually separate summary cells from regular data rows.
Apply bold text to emphasize important figures.
Use a custom font to reflect branding or improve aesthetics.
Increase the font size to make key data easier to read.
Change the text color to draw attention.

Below is the code you need:

<Style TargetType="syncfusion:GridTableSummaryCell">
    <Setter Property="Background" Value="Beige"/>
    <Setter Property="Foreground" Value="Red" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontFamily" Value="Congenial Black"/>
    <Setter Property="FontWeight" Value="Bold" />
</Style>

Explicit styling

To apply the style to a specific DataGrid only, define it with a key and assign it using the TableSummaryCellStyle property.

Add the following to your project:

<Style TargetType="syncfusion:GridTableSummaryCell"
       x:Key="tableSummaryCellStyle">
    <Setter Property="Background" Value="Beige"/>
    <Setter Property="Foreground" Value="Red" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontFamily" Value="Congenial Black"/>
    <Setter Property="FontWeight" Value="Bold" />
</Style>

<syncfusion:SfDataGrid x:Name="dataGrid"  
                       ItemsSource="{Binding Orders}"
                       ShowGroupDropArea="True"
                       TableSummaryCellStyle="{StaticResource tableSummaryCellStyle}"> 
</syncfusion:SfDataGrid>

After running the code, you’ll see this:

Styled table summary cell

Customize group summary rows

Group summary rows display aggregated data, such as totals, counts, or averages, for each group of records within the DataGrid. Making these rows visually distinct helps users quickly recognize and interpret important group-level data.

Method 1: Style the group summary row

You can customize the appearance of group summary rows by applying a style to the GroupSummaryRowControl class, which is responsible for rendering group summary sections within the DataGrid.

By adjusting properties such as Background, you introduce a clear visual distinction between group summary rows and regular data rows. As a result, group‑level summaries become easier to identify and interpret at a glance.

The following example demonstrates how to apply this styling in XAML:

<Style TargetType="syncfusion:GroupSummaryRowControl">
    <Setter Property="Background" Value="Bisque"/>
</Style>

Explicit styling

If you want to customize the group summary row for a specific DataGrid only, define the style with an x:Key and apply it using the GroupSummaryRowStyle property of the DataGrid. This ensures that the customization affects only the intended grid and does not impact others in your application.

Try this in your code:

<Style TargetType="syncfusion:GroupSummaryRowControl"
       x:Key="groupSummaryRowStyle">
    <Setter Property="Background" Value="Bisque"/>
</Style>

<syncfusion:SfDataGrid x:Name="dataGrid"  
                       ItemsSource="{Binding Orders}"
                       ShowGroupDropArea="True"
                       GroupSummaryRowStyle="{StaticResource groupSummaryRowStyle}"> 
</syncfusion:SfDataGrid>

After running the code, you’ll see this:

Customized group summary row

Method 2: Style group summary cells

While styling the group summary row improves visibility at a high level, styling the group summary cells allows you to further emphasize individual aggregate values, such as totals, counts, or averages.

Group summary cells are rendered by the GridGroupSummaryCell class. By customizing this class, you can enhance readability and ensure visual consistency with your application’s design language.

You can adjust the following properties:

Background: Differentiates summary cells from standard data cells
FontFamily: Maintains branding or typographic consistency
FontSize: Improves text readability
Foreground: Enhances contrast and visual clarity
FontWeight / FontStyle: Adds emphasis to key metrics

Below is the code you need:

<Style TargetType="syncfusion:GridGroupSummaryCell">
    <Setter Property="Background" Value="Beige"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="FontStyle" Value="Oblique"/>
    <Setter Property="FontFamily" Value="Congenial Black"/>
    <Setter Property="FontSize" Value="14"/>
</Style>

Explicit styling

To apply the group summary cell style to only one DataGrid, define the style with a key and assign it using the GroupSummaryCellStyle property.

<Style TargetType="syncfusion:GridGroupSummaryCell"
       x:Key="groupSummaryCellStyle">
    <Setter Property="Background" Value="Beige"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="FontStyle" Value="Oblique"/>
    <Setter Property="FontFamily" Value="Congenial Black"/>
    <Setter Property="FontSize" Value="14"/>
</Style>

<syncfusion:SfDataGrid x:Name="dataGrid"  
                       ItemsSource="{Binding Orders}"
                       ShowGroupDropArea="True"
                       GroupSummaryCellStyle="{StaticResource groupSummaryCellStyle}"> 
</syncfusion:SfDataGrid>

Customized group summary cell

Caption summary row customization

In modern UI development, consistent and intentional styling plays a crucial role in delivering a polished user experience. Within a DataGrid, the caption summary row displays summary or group‑level information above grouped data, serving as an important visual anchor.

Method 1: Applying styles to the summary row

You can customize the appearance of caption summary rows by targeting the CaptionSummaryRowControl class.

TargetType: Specifies that the style should be applied to caption summary row views in the grid.
Background property: Sets a custom background color for the row, which helps distinguish it from other data rows and improves overall readability.

<Style TargetType="syncfusion:CaptionSummaryRowControl">
    <Setter Property="Background" Value="Bisque"/>
</Style>

Explicit styling

To limit the caption summary row customization to a specific DataGrid, define the style with a key and assign it using the CaptionSummaryRowStyle property.

<Style TargetType="syncfusion:CaptionSummaryRowControl"
       x:Key="captionRowStyle">
    <Setter Property="Background" Value="Bisque"/>
</Style>

<syncfusion:SfDataGrid x:Name="dataGrid"  
                       ItemsSource="{Binding Orders}"
                       ShowGroupDropArea="True"
                       CaptionSummaryRowStyle="{StaticResource captionRowStyle}"> 
</syncfusion:SfDataGrid>

Here’s the expected output:

Styled caption summary row

Method 2: Style group summary cells

The GridGroupSummaryCell class controls how individual summary cells are rendered within grouped rows. You can easily customize their appearance, including background, font family, font size, and foreground color, by defining a style.

As shown in the code example below.

<Style TargetType="syncfusion:GridCaptionSummaryCell">
    <Setter Property="Background" Value="Beige"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="FontStyle" Value="Italic"/>
    <Setter Property="FontFamily" Value="Congenial Black"/>
    <Setter Property="FontSize" Value="14"/>
</Style>

Explicit styling

To apply the style definition of the GridCaptionSummaryCell class to a particular DataGrid, you can achieve this by setting the CaptionSummaryCellStyle property of the DataGrid, as shown below.

<Style TargetType="syncfusion:GridCaptionSummaryCell"
       x:Key="captionSummaryCellStyle">
    <Setter Property="Background" Value="Beige"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="FontStyle" Value="Italic"/>
    <Setter Property="FontFamily" Value="Congenial Black"/>
    <Setter Property="FontSize" Value="14"/>
</Style>

<syncfusion:SfDataGrid x:Name="dataGrid"  
                       ItemsSource="{Binding Orders}"
                       ShowGroupDropArea="True"
                       CaptionSummaryCellStyle="{StaticResource captionSummaryCellStyle}"> 
</syncfusion:SfDataGrid>

Customized group summary cell in WPF DataGrid

GitHub reference

You can explore the complete code example for styling summary rows on the GitHub repository.

Frequently Asked Questions

How can I customize the appearance of summary rows in a WPF DataGrid?

You can customize the appearance of summary rows by applying a Style with the appropriate target type. Using Style tags allows you to control colors, fonts, borders, and other visual properties of the summary rows.

What properties are available for customizing summary rows and cells in a WPF DataGrid?

In a WPF DataGrid, you can customize summary rows and cells using several styling properties, including Background, which sets the background color of the row or cell; Foreground, which defines the color of the summary text; FontFamily, used to specify the font type, such as Congenial Black; FontSize, which controls the size of the summary text; FontWeight, enabling styles such as Bold, Light, Medium, or ExtraBold; and BorderBrush, which determines the border color of the summary rows and cells.

How can I customize individual caption summary cells in a WPF DataGrid?

To customize individual caption summary cells, define a Style that targets the GridCaptionSummaryCell element. This allows you to control the appearance of each cell in the caption summary row, including background color, font settings, and text color.

Conclusion

Thank you for reading! Customizing the UI style of summary rows in the WPF DataGrid is a straightforward yet powerful way to improve the professionalism and usability of your applications. By using the implicit and explicit styling techniques outlined in this guide, you can ensure your aggregate data is visually appealing and easy to read.

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

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

Related Blogs

This article was originally published at Syncfusion.com.

Loading Dynamic Data into a .NET MAUI ComboBox with JSON and REST APIs

Phinter Atieno — Thu, 05 Feb 2026 11:46:06 +0000

TL;DR: Dynamic item loading in a .NET MAUI ComboBox is explored through MVVM and async patterns, covering how JSON files and REST APIs supply data to shared binding structures. The discussion includes ObservableCollection updates, XAML bindings, and how the approach adapts as data or API requirements grow.

Filling a mobile ComboBox with real data can be tricky, JSON shapes can vary, the UI may freeze during loading, and it’s easy to mix up search vs. display fields. Without a solid MVVM setup, bindings can break, and selections can get out of sync.

In this blog, we’ll show how Syncfusion^® .NET MAUI SfComboBox fixes these issues with clean MVVM data binding and fully async workflows. You’ll get a responsive UI, smooth loading, accurate search and display, and a polished user experience.

What you will build

In this guide, you’ll implement the following:

A ComboBox loading data from a local JSON file.
A ComboBox loading data from a remote REST API.
Fully async loading flows that keep your UI buttery-smooth.
MVVM -driven bindings that stay simple, predictable, and testable.

Bind a local JSON file to a .NET MAUI ComboBox

JSON is a lightweight, developer-friendly format widely used for configuration and API data. It stores information using simple key–value pairs and arrays. The MIME type is application/json.

Below is the sample dataset we’ll use.

countries.json

[
    { "Name": "United States", "Code": "US" },
    { "Name": "Canada", "Code": "CA" },
    { "Name": "Germany", "Code": "DE" },
    { "Name": "France", "Code": "FR" },
    { "Name": "United Kingdom", "Code": "GB" },
    { "Name": "India", "Code": "IN" },
    { "Name": "Japan", "Code": "JP" },
    { "Name": "Australia", "Code": "AU" },
    { "Name": "Brazil", "Code": "BR" },
    { "Name": "South Africa", "Code": "ZA" }
]

We load the countries.json file directly from the app package, deserialize it into a collection of Country objects, and populate an ObservableCollection so the ComboBox updates instantly. After loading, the ComboBox displays the country names, and selecting one updates the Selected property and label immediately.

Model & ViewModel (MVVM)

The MVVM pattern keeps your UI logic clean, testable, and easy to maintain. In this example, the Country model represents each JSON record, while JsonViewModel loads the countries.json file asynchronously and exposes the data through an ObservableCollection.

When LoadAsync runs, it opens the bundled JSON file, reads it as text, deserializes it into a list of Country objects (with case-insensitive property mapping), clears any previous items, and repopulates the observable collection. The ComboBox updates automatically as the collection changes.

Here’s the complete code block:

public class Country
{
    public string Name { get; set; }
    public string Code { get; set; }
}

public class JsonViewModel
{
    public ObservableCollection<Country> Countries { get; } = new();
    public async Task LoadAsync()
    {
        using var stream = await FileSystem.OpenAppPackageFileAsync("countries.json");
        using var reader = new StreamReader(stream);
        var json = await reader.ReadToEndAsync();

        var data = JsonSerializer.Deserialize<List<Country>>(json,
            new JsonSerializerOptions { PropertyNameCaseInsensitive = true }) ?? new();

        Countries.Clear();
        foreach (var c in data)
            Countries.Add(c);
    }
}

In the code example below, we include a button to load data, a combo box bound to the Countries list that displays country names and updates the selected item, and a label that shows the selected country’s name.

<ContentPage.Content>
    <VerticalStackLayout Padding="50" Spacing="12">
        <Button Text="Load JSON" WidthRequest="320" Clicked="OnLoadClicked" />
        <inputs:SfComboBox WidthRequest="320" ItemsSource="{Binding Countries}" DisplayMemberPath="Name" TextMemberPath="Name" SelectedItem="{Binding Selected, Mode=TwoWay}" />
        <Label Text="{Binding Selected.Name, StringFormat='Selected country: {0}'}" />
    </VerticalStackLayout>
</ContentPage.Content>

Here’s a preview of this implementation in action:

.NET MAUI ComboBox populated with local JSON data

Populate the .NET MAUI ComboBox with REST API data

REST APIs let your app interact with remote services over HTTP using standard methods like GET, POST, PUT/PATCH, and DELETE. Responses are usually returned as JSON, making them ideal for ComboBox data.

You’ll implement two features:

Load users from a REST API
Create a new user (POST) and insert it into the ComboBox

REST API ViewModel

It retrieves users from a REST endpoint, sorts them by name, and updates the ComboBox through the LoadAsync method. It also supports creating a new user. CreateAsync sends a POST request, receives the created user, and inserts it at the top of the list so the UI refreshes immediately.

Code snippet to achieve this:

public class RestViewModel
{
    public ObservableCollection<UserDto> Users { get; } = new();

    private readonly HttpClient http = new HttpClient { Timeout = TimeSpan.FromSeconds(20) };
    private const string BaseUrl = "https://jsonplaceholder.typicode.com/users";

    public async Task LoadAsync(CancellationToken ct = default)
    {
        Users.Clear();
        using var req = new HttpRequestMessage(HttpMethod.Get, BaseUrl);
        using var resp = await http.SendAsync(req, HttpCompletionOption.ResponseHeadersRead, ct);
        resp.EnsureSuccessStatusCode();
        var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
        await using var stream = await resp.Content.ReadAsStreamAsync(ct);
        var data = await JsonSerializer.DeserializeAsync<List<UserDto>>(stream, options, ct);

        if (data is null || data.Count == 0)
        {
            // Nothing returned; leave Users empty
            return;
        }
        foreach (var u in data
            .Where(u => u is not null)
            .OrderBy(u => u.Name ?? string.Empty))
        {
            u.Name ??= string.Empty; // avoid null in bindings
            Users.Add(u);
        }       
    }

    public async Task CreateAsync(string name)
    {
        var newUser = new UserDto { Name = name };
        var resp = await http.PostAsJsonAsync(BaseUrl, newUser);
        resp.EnsureSuccessStatusCode();

        // JSONPlaceholder returns the created resource with an id
        var created = await resp.Content.ReadFromJsonAsync<UserDto>();

        if (created != null)
        {
        Users.Insert(0, created);
        }
    }
}

<ScrollView>
    <Grid Padding="0"
          RowSpacing="12"
          ColumnSpacing="12"
          RowDefinitions="Auto,Auto"
          ColumnDefinitions="*,*">

        <Button Text="Load from API"
                Grid.Row="0"
                Grid.Column="0"
                HeightRequest="{OnPlatform Android=56, iOS=52, WinUI=48}"
                MinimumHeightRequest="48"
                MaximumWidthRequest="320"
                HorizontalOptions="Fill"
                Clicked="OnLoadClicked" />

        <Button Text="Create user (POST)"
                Grid.Row="0"
                Grid.Column="1"
                HeightRequest="{OnPlatform Android=56, iOS=52, WinUI=48}"
                MinimumHeightRequest="48"
                HorizontalOptions="Fill"
                MaximumWidthRequest="320"
                Clicked="OnCreateClicked" />

        <inputs:SfComboBox Grid.Row="1"
                           Grid.Column="0"
                           HeightRequest="{OnPlatform Android=56, iOS=52, WinUI=48}"
                           MinimumHeightRequest="48"
                           HorizontalOptions="Fill"
                           MaximumWidthRequest="320"
                           ItemsSource="{Binding Users}"
                           DisplayMemberPath="Name"
                           TextMemberPath="Name"
                           Placeholder="Select a user"
                           Margin="0,0,0,0" />

        <Entry x:Name="NameEntry"
               Grid.Row="1"
               Grid.Column="1"
               HeightRequest="{OnPlatform Android=56, iOS=52, WinUI=48}"
               MinimumHeightRequest="48"
               HorizontalOptions="Fill"
               MaximumWidthRequest="320"
               Keyboard="Text"
               ReturnType="Done"
               ClearButtonVisibility="WhileEditing"
               Placeholder="Enter new user name to POST" />
    </Grid>
</ScrollView>

The sample UI provides a Load from API button to fetch users, a ComboBox that lists the results by name, an Entry for adding a new user, and a Create user (POST) button to send the new name to the API and update the list instantly.

See the implementation in action below:

.NET MAUI ComboBox with REST APIs

GitHub reference

For more details on data binding in .NET MAUI ComboBox, refer to the GitHub demo.

Conclusion

Thanks for reading! You’ve now wired the Syncfusion .NET MAUI ComboBox to both local JSON files and live REST APIs using clean MVVM architecture and fully asynchronous workflows. This approach keeps your UI responsive, your bindings predictable, and your codebase maintainable.

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

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

Related Blogs

This article was originally published at Syncfusion.com.

Why Hyperlinks Break in JavaScript PDF Viewers and How to Fix Them

Phinter Atieno — Thu, 05 Feb 2026 11:04:59 +0000

TL;DR: Learn how JavaScript PDF viewers often struggle with hyperlink reliability due to annotation handling, canvas rendering, browser differences, accessibility layers, and complex PDF structures, along with the considerations involved in rectifying these issues in real-world applications.

Hyperlinks play a vital role in making PDF documents more user-friendly, accessible, and interactive. Whether you’re jumping to a specific section within a file, opening a webpage, or linking to another document, hyperlinks help users navigate content efficiently, especially in lengthy PDFs like manuals, reports, or eBooks.

But in many web applications, JavaScript-based PDF viewers often fall short when it comes to handling hyperlinks smoothly. Users may encounter broken links, unresponsive clicks, or unexpected behaviour, which can be frustrating and reduce the overall usefulness of the document. This is especially problematic in environments where seamless navigation is expected.

In this guide, we’ll take a closer look at why hyperlink navigation tends to fail in JavaScript PDF viewers and how Syncfusion^® PDF Viewer offers a reliable solution to overcome these challenges.

Common hyperlink issues in JavaScript PDF Viewers

Although hyperlinks are crucial in PDFs, many JavaScript-based viewers are unable to handle them consistently. The most frequent problems that developers and users encounter are listed below:

1. Non-functional links

Links appear clickable but don’t respond due to missing event listeners or incorrect annotation rendering. This issue is commonly discussed in developer forums such as PDF.js Viewer and Pdfvuer.
Overlapping visual elements may block pointer events, making links unresponsive.

2. Incorrect navigation

Links may lead to wrong destinations because of parsing errors or poor annotation support. This is a known issue discussed in the PDF.js GitHub repository.
Relative URLs and broken internal references often fail, especially in iframes or multi-source setups.

3. Canvas rendering limitations

HTML5 rendering can omit hyperlinks, making them invisible or non-clickable.
Canvas-based viewers lack accessibility support, preventing screen readers from detecting links.
For more details and potential workarounds, refer to this Stack Overflow discussion on hyperlinks in canvas using PDF.js.

4. Lack of support for internal and external links

Some viewers support only one type of link (internal or external), limiting interactivity.
Poor visual cues (e.g., missing underlines or hover effects) make links hard to identify and use.

5. Inconsistent behaviour across browsers and devices

Link functionality varies across browsers due to differences in rendering engines and event handling.
On mobile devices, touch gestures may misfire, causing missed or unintended link activations.

How Syncfusion JavaScript PDF Viewer handles hyperlink issues

Hyperlinks in PDFs should just work, but in many JavaScript viewers, they don’t. Syncfusion’s JavaScript PDF Viewer changes the game by making link navigation seamless, reliable, and accessible. Here’s how:

Smart link detection

Whether it’s a page reference, a web URL, or an email address, Syncfusion automatically detects and renders both internal and external links; no extra setup needed.

Detected internal and external hyperlinks within a PDF

Instant and interactive navigation

Click a link and go; no delays, no misfires. Internal links jump to the right page, and external ones open in a new tab, keeping the reading flow smooth and engaging.

Instant navigation triggered by hyperlink interaction

No canvas, no compromise

If you’re seeing “PDF hyperlink is not working” in canvas-based viewers, Syncfusion’s DOM-based rendering preserves clickable links and accessibility.

Accurate link interpretation in layered & annotated PDFs

Got nested bookmarks, encoded annotations, or layered content? No problem. Syncfusion accurately interprets and renders hyperlinks, even in the most intricate documents.

Consistent across browsers & devices

Chrome, Firefox, Safari, Edge—Syncfusion’s viewer is tested across all major platforms to ensure hyperlinks behave consistently, even on mobile.

Advanced hyperlink customization in Syncfusion JavaScript PDF Viewer

Syncfusion JavaScript PDF Viewer enables developers to customize how hyperlinks behave and function precisely. This is especially helpful for online programs where context and user flow are important.

1. Customizing hyperlink behaviour

Using the hyperlinkOpenState API, you can precisely control how hyperlinks behave within embedded PDFs. This feature allows you to define whether links should:

Open in the same tab for seamless navigation,
Launch in a new tab to preserve the current context, or
Be disabled entirely to prevent external navigation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>

let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.hyperlinkOpenState = 'NewTab';
    viewer.appendTo("#pdfViewer");

This level of control is particularly valuable in web applications where maintaining user flow and context is critical.

2. Intercepting hyperlink clicks

To implement custom logic when a hyperlink is clicked, use the hyperLinkClick event. This event gives you complete control over the navigation flow. By setting args.cancel = true, you can intercept and override the default behaviour. This gives you the flexibility to:

Log link clicks for analytics.
Show confirmation dialogs before navigation.
Prevent navigation based on user roles or permissions.

You may refer to the official API documentation for detailed information.

Best practices for developers

To ensure reliable hyperlink functionality in JavaScript PDF viewers, developers should follow these universal best practices:

1. Enable hyperlink features in the PDF Viewer

Most PDF viewers offer configuration options to enable or enhance hyperlink support. Check the documentation for flags like:

enableHyperlink
linkAnnotationEnabled
openExternalLinksInNewTab

These settings help control how links behave within the viewer.

2. Use clear and accessible link design

Design hyperlinks to be:

Visually distinct (e.g., underlined or colored).
Descriptive (e.g., “Download Report” instead of “Click here”).
Keyboard and screen-reader friendly, improving accessibility for all users.

3. Validate external URLs

When linking to external resources:

Ensure URLs are valid and secure (use HTTPS).
Avoid hardcoding links that may break over time.
Consider opening links in a new tab to preserve the user’s session.

Frequently Asked Questions

Does Syncfusion JavaScript PDF Viewer support both internal and external links?

Yes. Syncfusion PDF Viewer supports both internal and external hyperlinks without extra configuration.

Is email and web links supported?

Yes. Syncfusion PDF Viewer automatically detects web URLs and email links without additional configuration.

Can I control how links open in Syncfusion PDF Viewer?

Yes. You can control whether links open in the same tab, new tab, or are disabled using the hyperlinkOpenState setting.

Can developers customize hyperlink click behavior?

Yes. The hyperLinkClick event lets developers track, intercept, or prevent navigation.

What types of navigation are supported in Syncfusion JavaScript PDF Viewer?

The Syncfusion PDF Viewer supports Page, Bookmark, Thumbnail, Table of content and Hyperlink navigations for seamless document interaction.

Conclusion

Thank you for reading! Hyperlinks are essential for creating interactive and accessible PDF documents, especially in web-based applications. However, many JavaScript PDF viewers struggle to render hyperlinks consistently due to limitations in canvas-based rendering, browser inconsistencies, and a lack of support for complex PDF structures.

By following best practices during PDF creation and viewer setup, developers can significantly improve the reliability and usability of PDF hyperlink navigation. For those looking for a dependable and feature-rich solution, Syncfusion JavaScript PDF Viewer offers accurate link detection, smooth navigation, and consistent performance across browsers—all without the limitations of canvas rendering. If your application depends on reliable hyperlink navigation in PDFs, Syncfusion is a smart, scalable choice.

Explore our JavaScript PDF Viewer documentation to dive deeper into its technical capabilities and see how it can streamline document rendering and interaction in your web apps.

Try it live:  JavaScript PDF Viewer Demo

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

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

Related Blogs

This article was originally published at Syncfusion.com.

How to Secure Multi-User PDF Signing in a React PDF Viewer

Phinter Atieno — Wed, 04 Feb 2026 17:12:56 +0000

TL;DR: Struggling to build a secure multi‑party document‑signing workflow? You can enable user‑based e‑signatures in a React PDF Viewer by authenticating recipients, assigning signature fields, validating roles, and locking down PDF workflows to create a compliance‑ready signing experience.

Building a reliable e‑signature workflow is rarely straightforward. In today’s remote‑first environment, businesses expect fast, secure, and legally compliant signing tools that eliminate printing and manual processes. Developers, however, face challenges, especially when supporting multiple signers, enforcing signing order, validating fields, and securing completed documents.

This guide walks you through implementing a structured, recipient‑aware e‑signature workflow using Syncfusion^® React PDF Viewer. Throughout this tutorial, you’ll learn how to:

Authenticate recipients before enabling signing.
Assign signature fields dynamically with clear visual cues.
Validate user inputs in real time for accuracy and compliance.
Finalize and lock documents securely through field flattening.

By the end, you’ll have an interactive signing workflow that transforms static PDFs into smart, dynamic documents suitable for modern digital processes.

Setting up a React project with Syncfusion PDF Viewer

Before you can build the signing workflow, you’ll need to set up your React environment and configure the Syncfusion PDF Viewer. The steps below guide you through initializing your project, installing dependencies, importing styles, and enabling the Form Designer.

Step 1: Initialize your React project

Start by creating a new React application using Create React App command:

npx create-react-app esigningagreement
cd esigningagreement

This scaffolds a clean React workspace to host your PDF signing workflow.

Step 2: Install Syncfusion React PDF Viewer

Next, install the required Syncfusion React PDF Viewer package:

npm install @syncfusion/ej2-react-pdfviewer

This package provides the components and APIs needed to load, edit, and design interactive PDFs in React.

Step 3: Import required styles

To ensure consistent styling across viewer components, import the required CSS files into index.css:

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

These style sheets ensure that every toolbar element, dialog, and form field renders with the correct theme and layout.

Step 4: Load and configure the PDF Viewer with form designer

With the setup complete and the PDF Viewer installed, you’re ready to load a PDF document and enable the Form Designer tools. These tools allow you to create and edit interactive form fields directly within the viewer, making them ideal for building secure and flexible e‑signature workflows.

To proceed, navigate to the index.tsx TypeScript file and add the following code to load the document and configure the PDF Viewer with form designer capabilities.

{/* PDF Viewer with form designer and other tools enabled */}
<PdfViewerComponent
    id="pdfViewer"
    ref={pdfViewer}
    resourceUrl="https://cdn.syncfusion.com/ej2/31.2.10/dist/ej2-pdfviewer-lib"
    style={{ height: "calc(100vh - 70px)"}}
    enableToolbar={true}
    documentPath={window.location.origin + "/assets/SoftwareLicenseAgreement.pdf"}
    formFieldAdd={formFieldAdd}
    isFormDesignerToolbarVisible={true}
    documentLoad={documentLoaded}
    showNotificationDialog={false}
    formFieldPropertiesChange={fieldChange}
    enableDownload = {false}>

    {/* Inject required PDF viewer services and features */}
    <Inject services={[
                    Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner
    ]} />
</PdfViewerComponent>

Creating and editing interactive form fields inside the React PDF Viewer

This configuration enables the Form Designer toolbar and supporting services, allowing you to create, assign, and manage interactive form fields directly inside the React PDF Viewer.

Recipient authentication: The first step to secure the signing flow

Before you design or assign any form fields, you need to ensure that only authorized recipients can sign the document. This is where the Recipient Authentication Setup page becomes essential. It forms the foundation of a secure, user‑based e‑signature workflow by allowing you to define, manage, and validate every signer before moving into document preparation.

Getting this step right prevents misassigned fields, accidental signer mix-ups, and workflow disruptions, creating a smoother experience for both developers and recipients.

Let’s walk through the setup:

Step 1: Create a recipient form

Begin by creating a new TypeScript JSX file named RecipientSetup.tsx. This component enables users to add, edit, and remove recipients before the PDF Viewer is loaded.

The form collects essential signer information such as Name and Email, and uses modern UI components to keep the interface clean and intuitive. The page starts with one recipient by default, and the + Add Recipient button lets users dynamically add more, making it flexible enough for everything from simple two‑party signatures to complex, multi‑signer agreements.

Once recipients are confirmed, users can move on to adding handwritten signatures and mapping fields to the proper signers.

{/* Form for entering recipient details */}
<form id="userForm" ref={formRef} onSubmit={formSubmit}>
    {recipients.map((recipient, idx) => (
        <div
            key={idx}
            style={{
                display: 'flex',
                justifyContent: 'center',
                marginBottom: '40px'
            }}>
            <div
                style={{
                    display: 'flex',
                    gap: '30px',
                    alignItems: 'center',
                    width: '80%'
                }}>

                {/* Recipient Name Field */}
                <div style={{ flex: 1 }}>
                    <label
                        style={{
                            display: 'block',
                            marginBottom: '5px',
                            fontWeight: 500,
                        }}>
                        Recipient Name
                    </label>
                    <TextBoxComponent
                        placeholder="Enter recipient name"
                        floatLabelType="Auto"
                        cssClass="e-outline"
                        value={recipient.userName}
                        name={`name_${idx}`}
                        input={(e) => recipientChange(idx, 'userName', e.value)}/>
                </div>

                {/* Recipient Email Field */}
                <div style={{ flex: 1 }}>
                    <label
                        style={{
                            display: 'block',
                            marginBottom: '5px',
                            fontWeight: 500,
                        }}>
                        Recipient Email
                    </label>
                    <TextBoxComponent
                        placeholder="Enter recipient email"
                        floatLabelType="Auto"
                        cssClass="e-outline"
                        value={recipient.userEmail}
                        name={`email_${idx}`}
                        input={(e) => recipientChange(idx, 'userEmail', e.value)/>
                </div>

                {/* Remove recipient button */}
                <ButtonComponent
                    cssClass="e-flat e-danger"
                    iconCss="e-icons e-trash"
                    style={{ marginTop: '22px', height: '40px', width: '40px' }}
                    onClick={() => removeRecipient(idx)}/>
            </div>
        </div>
    ))}

    {/* Submit button */}
    <div
        style={{
            display: 'flex',
            justifyContent: 'center',
            marginTop: '40px'
        }}>
        <ButtonComponent
            ref={formBtnRef}
            isPrimary={true}
            cssClass="e-success"
            type="submit"
            style={{ width: '40%', height: '40px' }}>
            Continue to Form Creation
        </ButtonComponent>
    </div>
</form>

Step: 2 Real-time input validation

Accurate signer information is essential for a secure workflow. Missing names, invalid emails, or malformed inputs can break the signing process later. Using FormValidator, you can validate fields dynamically as recipients are added or removed.

Validation enforces:

Required fields for both name and email.
A minimum name length for clarity and professionalism.
A valid email format to prevent delivery issues and maintain trust.

The best part? Validation rules automatically update whenever the recipient list changes, ensuring a seamless user experience.

useEffect(() => {
        if(formRef.current) {
            const dynamicRules: Record<string, any> = {};

            recipients.forEach((_, idx) => {
                dynamicRules[`name_${idx}`] = {
                    required: [true, '* Name is required'],
                    minLength: [3, '* Name must be at least 3 characters']
                };
                dynamicRules[`email_${idx}`] = {
                    required: [true, '* Email is required'],
                    email: [true, '* Please enter a valid email']
                };
            });

            if (validatorRef.current) {

                // Update existing validator rules without destroying them
                validatorRef.current.rules = dynamicRules;
            } else {

                // Create new validator only if it doesn't exist
                validatorRef.current = new FormValidator(formRef.current, {
                    rules: dynamicRules
                });
            }
        }
    }, [recipients]);

Step 3: Navigation and data persistence

Once all inputs pass validation, the recipient list is stored safely in localStorage. This allows the PDF Viewer to access signer information when generating and assigning form fields.

After the details are saved, the user can click Continue to Form Creation to move directly into the PDF Viewer interface, where the interactive document design begins.

// Handles form submission, validates input, stores data, and navigates to the PDF viewer
    const formSubmit = (event: React.FormEvent) => {       
        event.preventDefault();
        if (validatorRef.current && validatorRef.current.validate()) {
            const validRecipients = recipients.filter(
                r => r.userName.trim() !== '' && r.userEmail.trim() !== ''
            );
            localStorage.setItem('recipients', JSON.stringify(validRecipients));
            navigate('/pdf-viewer');
        }
    };

Form creation in React PDF Viewer

Interactive PDF designer: Add and assign signature fields easily

With authentication complete, the next step is converting a static PDF into a structured, signable form where multiple recipients can fill and sign fields in the correct order.

Step 1: Import recipients from local storage

Begin by loading the recipient information saved during the authentication step. Retrieve the stored data from localStorage, convert it into the internal UserDetails structure, and merge it with any existing user list, automatically filtering out duplicates.

This step ensures:

A secure, structured workflow for multi‑party agreements.
Accurate, recipient‑specific field assignment (especially for signatures).
Reliable mapping between each signer and their form fields.

Once the data is loaded, you can use the Form Designer Toolbar to add fields such as Signature, Initials, or Text, and assign each field to the correct recipient.

// Load recipients from localStorage, convert them to userDetails format, and merge without duplicates
useEffect(() => {
  const storedRecipients = localStorage.getItem('recipients');

  try {
    let fieldId = 0;
    const newUsers: UserDetails[] = [];

    if (storedRecipients) {
      const recipients = JSON.parse(storedRecipients);

      recipients.forEach((r: any) => {
        newUsers.push({
          Name: r.userName,
          Mail: r.userEmail,
          fieldIds: [fieldId.toString()]
        });
        fieldId++;
      });
    }

    setUserDetails(prev => {
      const existingEmails = new Set(prev.map(u => u.Mail));
      const filteredNewUsers = newUsers.filter(
        u => !existingEmails.has(u.Mail)
      );
      return [...filteredNewUsers, ...prev];
    });
  } catch (error) {
    console.error("Error parsing user info or recipients:", error);
  }
}, []);
``

Step 2: Map fields to recipients

After loading recipients, the next step is assigning each form field to the correct signer. Whether it’s a signature box, initials, or a text input, proper field mapping is essential for a secure and organized signing experience.

This step provides important benefits:

Clear and accurate field ownership for each participant.
Protection of sensitive data through controlled field access.
Prevention of unauthorized edits, ensuring workflow integrity.

Correctly mapped fields mean each signer interacts only with their assigned inputs, maintaining clarity, compliance, and trust throughout the signing process.

// Renders the dialog content with user selection and submit button
const getRecipientDialogContent = () => {
    return (
        <div className="dialog-content">
            <p style={{ fontWeight: 'bold', fontSize: '16px' }}>
                    Select the User:
            </p>
            <div className="radio-options" style={{ display: 'flex', gap: '50px', marginTop: '30px', }}>
                {userDetails.map((user, index) => (
                    <div className="radio-item" key={index}>
                        <RadioButtonComponent
                            ref={radioBtnRef}
                            label={user.Name}
                            name="userType"
                            value={user.Name}
                            checked={selectedUser === user.Name}
                            change={userChange}/>
                    </div>
                ))}
            </div>
            <div className="button-container" style={{ marginTop: '25px', textAlign: 'center' }}>
                <ButtonComponent className="e-btn e-primary" style={{ width: '80%', borderRadius: '5px' }} onClick={userSelectionSubmit}>Submit</ButtonComponent>
            </div>
        </div>
    );
};

Your dialog for selecting a recipient looks like this:

Mapping fields to recipients

Step 3: Enhance field visibility for recipients

To make the signing experience intuitive, especially in multi‑signer workflows, style each assigned field using a unique background color. This is done via the customData property and provides immediate visual clarity for each signer.

This enhancement offers:

A clearly guided signing process.
Reduced confusion when multiple recipients are involved.
Strong linkage between recipients and their assigned fields.

By applying distinct colors, signers can easily identify the fields they need to complete, keeping the workflow organized and user‑friendly.

// Handles the Submit button click after user selection
const userSelectionSubmit = () => {
    setSelectedUser(radioBtnRef.current?.getSelectedValue() || '');

    setStatus({ hideDialog: false });
    dialogClose();

    // Get the last added form field
    const formFields = pdfViewer.current?.retrieveFormFields();
    const lastField = formFields?.[formFields.length - 1];

    // Find the selected user's details
    const user = userDetails.find(u => u.Name === selectedUser);

    if (lastField && user) {
        let color = userColors[user.Mail];
        if (!color) {
            color = getRandomLightColor();
            setUserColors(prev => ({ ...prev, [user.Mail]: color }));
        }

        // Check if the field is a signature field (adjust property as needed)
        const isSignatureField = lastField.type === 'SignatureField' || lastField.name?.toLowerCase().includes('sign');

        // Use 40% opacity for signature fields, solid for others
        userColour.current = isSignatureField ? hexToRgba(color, 0.4) : color;

        pdfViewer.current?.formDesigner.updateFormField(
                lastField,
                {
            customData: {
                name: user.Name,
                email: user.Mail
            },
                name: `${user.Name || ""} ${lastField.name || ""}`.trim(),
                backgroundColor: userColour.current,
                isRequired: true,
                borderColor: '#303030'
            } as any
        );
     }
};

Enhancing field visibility using the customData property

When the Form Designer Toolbar is open, the viewer is in design mode, allowing you to place and configure fields. Closing the toolbar switches the viewer back into interactive mode, where recipients can begin filling and signing their assigned fields.

Enforce signing order and validation

To maintain a structured, compliant, and error‑free signing experience, it’s important to enforce the correct signing order and validate all required fields before allowing recipients to proceed. This ensures no signer is skipped and helps preserve the integrity of the document throughout the workflow.

Step:1 Validate signing context

When the Form Designer toolbar is closed, the PDF Viewer automatically switches to interactive mode. At this point, the application should determine which signer is active and display only the fields assigned to that recipient. This keeps the interface clean and prevents users from interacting with fields that don’t belong to them.

This approach ensures:

Each signer sees only their assigned fields.
The signing flow remains intuitive and distraction‑free.
Errors are minimized in multi‑recipient workflows.

By validating context and controlling visibility, you maintain a secure and compliant e‑signature flow from signer to signer.

// Initializes event listener for closing the form designer and shows the user dropdown
    const documentLoaded = () => {
        document.getElementById("pdfViewer_formdesigner_closeContainer")?.addEventListener("click", async function () {
            setShowDropdown(true);
            if (pdfViewer.current)
                pdfViewer.current.designerMode = false;
            showOnlyCurrentUserFields();
        })

    }

Step:2 Enforce sequential signing

Next, enforce a strict signing order, ensuring each recipient completes their required fields before the workflow advances.

When transitioning to the next signer:

Validate all required fields assigned to the current signer.
Prevent progression if any mandatory fields are incomplete.
Display a helpful message prompting the signer to fill missing inputs.

This prevents incomplete signatures, maintains document consistency, and guarantees a reliable, structured signing experience, especially important when adding legally binding e‑signatures to PDFs.

Enforcing sequential signing using the React PDF Viewer

Finalizing the document

Once all recipients have completed their assigned fields, the document must be finalized securely. Finalization includes enabling the finishing action and converting the signed PDF into a non‑editable file.

This phase involves two key steps.

Step:1 Activate the finish signing button

The Finish Signing button stays disabled until all mandatory fields are completed. By tracking field changes through the formFieldPropertiesChange event, the app can automatically detect when the signer has fulfilled all requirements.

After validation succeeds:

Enable the Finish Signing button.
Set enableDownload to true so users can download or submit the completed document.
Optionally allow the signer to add a handwritten signature for a more authentic experience.

Activating the finish signing button in the React PDF Viewer

Step:2 Secure the document

The final step is to flatten all form fields. Flattening converts interactive elements into static content, making the PDF non‑editable and tamper‑proof.

This is essential because:

It prevents further modification of completed signatures.
Ensures document integrity.
Meets legal and compliance standards for digital signing.

The code below handles saving, flattening, downloading, and securing the viewer UI.

// Handles the final signing process; saves the PDF, sends it to the server, downloads the signed version, and disables UI controls
    const finishSigning = () => {

        // Show the spinner when signing starts
        const spinnerTarget = document.getElementById('container');
        if (spinnerTarget) showSpinner(spinnerTarget);
        const url = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/FlattenDownload";
        pdfViewer.current?.saveAsBlob().then((blob) => {
            return convertBlobToBase64(blob);
        }).then((base64String) => {
            const httpResponse = new XMLHttpRequest();
            httpResponse.open('POST', url, true);
            httpResponse.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
            const requestData = JSON.stringify({ base64String });
            httpResponse.onload = () => {

                // Always hide spinner at the end (success or error)
                if (spinnerTarget) hideSpinner(spinnerTarget);
                if (httpResponse.status === 200) {
                    const responseBase64 = httpResponse.responseText.split('base64,')[1];
                    if (responseBase64) {
                        const blob = createBlobFromBase64(responseBase64, 'application/pdf');
                        const blobUrl = URL.createObjectURL(blob);
                        downloadDocument(blobUrl);
                        pdfViewer.current?.load(httpResponse.responseText, "");
                        if (btnElement.current)
                            btnElement.current.disabled = true;
                        if (userMenu.current)
                            userMenu.current.enabled = false;
                    } else {
                        console.error('Invalid base64 response.');
                    }
                } else {
                    console.error('Download failed:', httpResponse.statusText);
                }
            };
            httpResponse.onerror = () => {
                if (spinnerTarget) hideSpinner(spinnerTarget);
                console.error('An error occurred during the download:', httpResponse.statusText);
            };
            httpResponse.send(requestData);
        }).catch((error) => {
            if (spinnerTarget) hideSpinner(spinnerTarget);
            console.error('Error saving Blob:', error);
        });
    }

Flattening the form fields using the React PDF Viewer

Note: Refer to the official documentation for more on flattening form fields to prevent edits and ensure signature security.

GitHub reference

To explore the full implementation, you can access the complete project in the GitHub demo.

Conclusion

Thanks for reading! In this guide, you learned that creating a secure and intuitive digital signing experience goes beyond simply adding signature fields. It requires designing a structured, user-aware workflow that enforces signing order, validates input, and ensures compliance, all while keeping the process smooth and user-friendly.

With Syncfusion’s React PDF Viewer, developers gain full control over every stage of the user-based e-signature process. By leveraging advanced features like dynamic field assignment, real-time validation, conditional UI behavior, and secure document finalization. This approach strengthens security and integrates seamlessly into modern React applications, making digital signing workflows efficient and reliable.

Dive deeper with the React PDF Viewer User guide or try it live in the React PDF Viewer demo. If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

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

Related Blogs

This article was originally published at Syncfusion.com.

Essential Studio Support SLA Updates: Response Times, Tiers, and Escalations

Phinter Atieno — Tue, 03 Feb 2026 15:37:55 +0000

TL;DR: Explore the key changes to the support SLA, featuring updated tier definitions, clarified response benchmarks, structured priority workflows, detailed escalation routes, defined support hours, and revised hotfix policies.

We’ve rolled out an updated Support and Product Maintenance Service Level Agreement (SLA) for Essential Studio as part of Version 32.1.24, effective January 20, 2026. This update brings clearer expectations, more structured support tiers, and predictable response guidelines to help developers plan and troubleshoot with confidence.

Our goal is to make every support interaction more transparent and easier to navigate from the moment you submit a ticket to the final resolution. If you want to review the full SLA, you can find it here: Syncfusion^® Software Support SLA.

In this article, you’ll get a concise look at what’s changed and why these updates matter for your development workflow.

What’s new in the updated SLA

1. Clearer support tiers for different needs

The previous SLA offered only two tiers, Standard Support ( Base SDK ) and Enterprise Support (Premium), which didn’t fully align with the range of developer workflows. The updated SLA now introduces three well-defined support tiers, giving teams more flexibility and clearer expectations:

Standard support: Response guaranteed in 2 business days.
Business support: Response guaranteed in 1 business day.
Enterprise support: Response guaranteed in 8 business hours.

This structure helps teams choose a level that fits their release schedules and operational demands. If you’re unsure which tier applies to your subscription, you can reach out to Client Services for clarification.

2. A consistent, priority-based approach to incident handling

The updated SLA formalizes how P1 (critical), P2 (high impact), and P3 (standard) incidents are handled across all tiers. For each priority level, the SLA defines:

Expected initial response times.
How often do you receive status updates.
Target timeframes for resolution.

Your submitted priority is considered, but the Syncfusion support team assigns the final classification to maintain consistency and fairness across all requests.

3. Feature requests are now clearly outside SLA scope

To eliminate confusion, the SLA now states that feature requests, enhancements, and new functionality are outside the scope of support commitments.

SLA performance metrics apply only to:

Troubleshooting
Defect investigation
Fixes

Feature ideas continue through the product planning and roadmap process instead of the support SLA.

Additional clarifications in the updated SLA

Clear definitions for key support terms

The SLA now defines essential terminology so teams know exactly how timelines work:

Response time: When a qualified support engineer delivers the first meaningful reply after a ticket is received.
Resolution time: When a workaround, permanent fix, or agreed-upon remediation plan is provided.

These definitions remove guesswork and help developers set more realistic expectations during active debugging.

Tier-specific services and escalation paths

The SLA also details support variations across the three tiers:

Support hours

Standard and Business Support operate during regular business hours (Monday–Friday).
Enterprise Support includes 24×7 coverage for P1 incidents.

Escalation paths

Business Support includes access to senior engineers for escalations.
Enterprise Support includes a dedicated escalation path and named contact.

Hotfix delivery

Standard Support does not guarantee hotfixes.
Business Support may offer patches or workarounds depending on the situation.
Enterprise Support can receive hotfixes outside the normal release cycle.

These distinctions help teams understand what level of assistance and remediation they can expect based on their support tier.

How to get the most from the updated SLA

You can help the support team move faster and deliver accurate answers by sharing the right details upfront. To get the most value from the updated SLA, make sure you:

Review the full SLA for Version 32.1.24 to understand all tiers and commitments.
Reach out to Client Services if you’re unsure which support tier your subscription includes.
Provide essential information with every ticket, including:
- Clear reproduction steps
- Relevant logs
- Diagnostic data

Supplying this information early speeds up the investigation process and helps the team meet response and resolution targets more consistently.

Frequently Asked Questions

Which support level am I on, and what response time applies to me?

Standard Support: 2 business days
Business Support: 1 business day
Enterprise Support: 8 business hours If you're unsure which level applies to your subcsription, contact Syncfusion Client Services

Can I choose the priority (P1/P2/P3) when I raise a ticket?
You can submit a priority when raising the request, and the final prioprity level is determined by Syncfusion Support.

Are feature requests included in SLA commitments?
No. Feature requests, product enhancements, and requests for new functionality are excluded from SLA coverage.

Conclusion

Thank you for reading!. The updated SLA introduces meaningful improvements, bringing greater clarity and structure to your support experience. Here’s a quick recap of what changed:

Three support tiers are now available: Standard, Business, and Enterprise.
A unified priority-based workflow defining response, update, and resolution timelines.
Feature requests are clearly excluded from SLA commitments.
Standardized definitions for response time and resolution time.
Tier-specific clarity around support hours, escalation paths, and hotfix availability.

If you have any questions about how these updates relate to your current subscription or ongoing development work, our team is available to assist.

We appreciate your continued trust in Syncfusion and look forward to supporting your projects with consistency, transparency, and professionalism.

Related Blogs

This article was originally published at Syncfusion.com.

How to Add Stamps to PDFs Using C# for Faster Reviews

Phinter Atieno — Tue, 03 Feb 2026 15:37:45 +0000

TL;DR: Learn how to add stamps to PDFs using C# in three practical methods with the .NET PDF Library. Add approval stamps, logos, or custom text, and see how to flatten or remove stamps to streamline workflows, improve compliance, and enhance document branding.

Stamps in PDF documents are more than simple visual markers; they’re essential tools for approval processes, branding, and workflow automation. Whether you need to mark a file as Approved, apply a company logo, or insert custom metadata, stamps help clearly communicate status and ownership.

In this guide, you’ll explore three practical ways for stamping PDF files using C#. With the Syncfusion^® .NET PDF library, you can easily insert built-in icons, dynamic text, or images. You’ll also learn how to flatten or remove stamps, giving you complete control over document presentation and compliance.

What is a PDF stamp?

A PDF stamp is a visual overlay placed on top of a PDF page to display status, branding, or metadata. Similar to a digital rubber stamp, it may include labels such as Approved, Draft, or time / date information. Stamps are stored as PDF annotations, which means they can be added, styled, removed, or flattened programmatically.

Difference between Stamp and Watermark

A stamp sits above the page content in the annotation layer and is commonly used for workflow indicators, approvals, or review actions.

By contrast, a watermark becomes part of the page’s main content layer. Watermarks are usually semi‑transparent and appear behind text or images. They’re typically used for branding, copyright, or subtle identifiers such as Confidential.

Add stamps to PDFs using C

Before diving into examples, ensure your C# project references a PDF library that supports stamping. If starting fresh, create a .NET application and install the Syncfusion.PDF.NET.Core NuGet package as described in Syncfusion’s documentation.

Note: Register your Syncfusion PDF Library license key at application startup to enable full functionality in production environments.

Create a stamp with a standard icon

Syncfusion provides several built-in stamp appearances, such as Approved, Draft, and Confidential. These pre-made icons save time because you can apply them directly without designing custom graphics. Just pick the icon that matches your workflow and apply it directly to the PDF.

Here’s how you can do it in code:

using Syncfusion.Drawing;
using Syncfusion.Pdf;
using Syncfusion.Pdf.Interactive;
using Syncfusion.Pdf.Parsing;

// Load the existing PDF document
using (PdfLoadedDocument doc = new PdfLoadedDocument("../../../../data/input.pdf"))
{
    // Get the first page of the document
    var page = (PdfLoadedPage)doc.Pages[0];

    // Create a rubber stamp annotation
    PdfRubberStampAnnotation rubberStamp = new PdfRubberStampAnnotation(
        new RectangleF(390, 480, 163, 49), 
        "APPROVED"
    );

    // Set the standard stamp icon
    rubberStamp.Icon = PdfRubberStampAnnotationIcon.Approved;

    // Enable appearance visibility across PDF viewers
    rubberStamp.SetAppearance(true);

    // Add annotation to the page
    page.Annotations.Add(rubberStamp);

    // Save the document
    doc.Save("stamp-pdf.pdf");
}

The image below shows how the stamp looks in the PDF.

PDF pages with stamp annotations

Creating stamps with dynamic content

You can also insert dynamic data, such as decisions, usernames, and timestamps, to improve auditability, accountability, and compliance in document workflows.

Below is the code you need:

// Load the existing PDF document
using (PdfLoadedDocument doc = new PdfLoadedDocument("../../../../data/input.pdf"))
{
    // Get the first page of the document
    var page = (PdfLoadedPage)doc.Pages[0];

    // Create a rubberstamp annotation
    PdfRubberStampAnnotation rubberStamp = new PdfRubberStampAnnotation(
        new RectangleF(390, 480, 163, 49),
        "dynamic-stamp"
    );

    // Draw the dynamic stamp content

    // Get the graphics of the stamp appearance
    PdfGraphics graphics = rubberStamp.Appearance.Normal.Graphics;

    // Create background brush and border pen
    PdfSolidBrush backgroundBrush = new PdfSolidBrush(new PdfColor(229, 239, 224));
    PdfPen borderPen = new PdfPen(new PdfColor(65, 106, 25));

    DrawRoundedCornerRectangle(
        new RectangleF(2, 1, 159, 47),
        graphics,
        3,
        backgroundBrush,
        borderPen
    );

    // Create font for stamp text
    PdfStandardFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 20);

    // Create font for date
    PdfStandardFont dateFont = new PdfStandardFont(PdfFontFamily.Helvetica, 10);

    // Create brush for text
    PdfSolidBrush textBrush = new PdfSolidBrush(new PdfColor(65, 106, 25));

    // Draw the stamp text
    graphics.DrawString("APPROVED", font, textBrush, new PointF(10, 10));

    // Draw the date text
    graphics.DrawString("on " + System.DateTime.Now.ToString(), dateFont, textBrush, new PointF(10, 33));

    // Add annotation to the page
    page.Annotations.Add(rubberStamp);

    // Save the document
    doc.Save("dynamic-stamp-pdf.pdf");
}

You can also add the following code to draw a rounded-corner rectangle.

// Draw the rounded corner rectangle
void DrawRoundedCornerRectangle(
    RectangleF bounds,
    PdfGraphics graphics,
    int cornerRadius,
    PdfBrush brush,
    PdfPen borderPen)
{
    // Create the PdfPath 
    int diameter = cornerRadius * 2;
    SizeF size = new SizeF(diameter, diameter);
    RectangleF arc = new RectangleF(bounds.Location, size);
    PdfPath path = new PdfPath();

    path.AddArc(arc, 180, 90);
    arc.X = bounds.Right - diameter;

    path.AddArc(arc, 270, 90);
    arc.Y = bounds.Bottom - diameter;

    path.AddArc(arc, 0, 90);
    arc.X = bounds.Left;

    path.AddArc(arc, 90, 90);

    path.CloseFigure();
    graphics.DrawPath(borderPen, brush, path);
}

Running the code above will produce the following PDF document with a stamp.

PDF page with dynamic stamp annotations

Creating a stamp with an image

Image stamps are ideal for adding visual identity to invoices, reports, or official documents, ensuring they stand out and remain recognizable across workflows. Use your logo or a pre-rendered badge as a stamp to reinforce branding and professionalism.

Here’s the code example:

//Load the existing PDF document
using (PdfLoadedDocument doc = new PdfLoadedDocument("../../../../data/input.pdf"))
{
    //Get the first page of the document
    var page = (PdfLoadedPage)doc.Pages[0];

    // Position/size (points). Adjust to your layout.
    RectangleF bounds = new RectangleF(250, 162, 100, 100);

    //Create rubber stamp annotation
    PdfRubberStampAnnotation stampAnnotation = new PdfRubberStampAnnotation(bounds, "image stamp");

    //Set author
    stampAnnotation.Author = "John Smith";

    //Get the appearance graphics of the stamp annotation
    PdfGraphics graphics = stampAnnotation.Appearance.Normal.Graphics;

    //Draw the image in the appearance graphics
    PdfBitmap stampImage = new PdfBitmap(new FileStream("../../../../data/stamp.png", FileMode.Open, FileAccess.Read));

    //Draw the image to the stamp appearance
    graphics.DrawImage(stampImage, new RectangleF(0, 0, bounds.Width, bounds.Height));

    //Add annotation to the page
    page.Annotations.Add(stampAnnotation);

    //Save the document
    doc.Save("image-stamp.pdf");
}

The image below shows how the image stamp looks in the PDF.

PDF page with image stamp annotations

Customize stamp

You can fully style a PDF stamp (rubber stamp annotation) by drawing a custom appearance with fonts, colors, borders, rotation, and opacity. This allows you to create branded stamps such as APPROVED, PAID, or CONFIDENTIAL with a consistent visual identity.

Code example for quick integration:

//Load the existing PDF document
using (PdfLoadedDocument doc = new PdfLoadedDocument("../../../../data/input.pdf"))
{
    //Get the first page of the document
    var page = (PdfLoadedPage)doc.Pages[0];

    //Create a rubberstamp annotation
    PdfRubberStampAnnotation draftStamp = new PdfRubberStampAnnotation(new RectangleF(85, 567, 150, 49))
    {
        //Set the author name
        Author = "John Smith",
        //Set the subject
        Subject = "Document Approval",
        //Set the opacity
        Opacity = 0.75f,
        //Set the stamp text
        Text = "Draft By John",
        //Set the stamp icon
        Icon = PdfRubberStampAnnotationIcon.Draft
    };

    //Set the appearance as true to view the stamp icon across PDF viewers
    draftStamp.SetAppearance(true);

    //Add annotation to the page
    page.Annotations.Add(draftStamp);

    //Create a rubberstamp annotation
    PdfRubberStampAnnotation rejectedStamp = new PdfRubberStampAnnotation(new RectangleF(296, 567, 200, 49))
    {
        //Set the author name
        Author = "Milton",
        //Set the subject
        Subject = "Document Approval",
        //Set the stamp text
        Text = "Rejected By Milton",
        //Set the stamp icon
        Icon = PdfRubberStampAnnotationIcon.NotApproved
    };

    //Set the appearance as true to view the stamp icon across PDF viewers
    rejectedStamp.SetAppearance(true);

    //Add annotation to the page
    page.Annotations.Add(rejectedStamp);

    //Rotate the stamp annotation
    PdfRubberStampAnnotation confidentialStamp = new PdfRubberStampAnnotation(new RectangleF(202, 260, 260, 260))
    {
        //Set the author name
        Author = "Sarah",
        //Set the subject
        Subject = "Confidential",
        //Set the stamp text
        Text = "Confidential By Sarah",
    };

    //Get stamp appearance graphics
    PdfGraphics graphics = confidentialStamp.Appearance.Normal.Graphics;

    //Create a font
    PdfFont font = new PdfTrueTypeFont("../../../../data/MomoTrustDisplay-Regular.ttf", 38, PdfFontStyle.Regular);

    //Create a brush
    PdfBrush brush = new PdfSolidBrush(Color.Red);

    //Create a pen
    PdfPen pen = new PdfPen(Color.DarkBlue, 2);

    graphics.Save();

    //Move the graphics origin to the center of the stamp
    graphics.TranslateTransform(confidentialStamp.Bounds.Width / 2, confidentialStamp.Bounds.Height / 2);

    //Rotate the graphics
    graphics.RotateTransform(-45);

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

    PointF location = new PointF(-textSize.Width / 2, -textSize.Height / 2);

    //Draw the text
    graphics.DrawString("CONFIDENTIAL", font, pen, brush, location);

    //Draw a rounded corner rectangle
    DrawRoundedCornerRectangle(new RectangleF(location.X - 5, location.Y - 5, textSize.Width + 10, textSize.Height + 10), graphics, 5, pen);

    graphics.Restore();

    //Add annotation to the page
    page.Annotations.Add(confidentialStamp);

    //Save the document
    doc.Save("customize-stamp.pdf");
}

Here’s what the PDF with a custom stamp looks like:

PDF page with customized stamp

Remove stamps in PDF

Removing the stamp annotation is useful when updating document status or cleaning drafts. You can remove stamps by navigating page annotations.

Add this to your project:

//Load the existing PDF document
using (PdfLoadedDocument doc = new PdfLoadedDocument("../../../../data/customize-stamp.pdf"))
{
    //Get the first page of the document
    var page = (PdfLoadedPage)doc.Pages[0];

    //Iterate the annotations and get stamp annotations
    foreach (PdfLoadedAnnotation annotation in page.Annotations)
    {
        if (annotation is PdfLoadedRubberStampAnnotation stampAnnotation)
        {
            //Flatten the stamp annotation
            stampAnnotation.Flatten = true;
        }
    }

    //Save the document
    doc.Save("flattened-samp_-nnotation.pdf");
}

After running the code, you’ll see this:

PDF page with removed stamp annotations

Flatten stamp

Flatten converts a stamp into static page content, making it permanent and non-editable. To flatten a stamp, render its appearance directly onto the page, then remove the original annotations.

Here’s how you can do it in code:

//Load the existing PDF document
using (PdfLoadedDocument doc = new PdfLoadedDocument("../../../../data/customize-stamp.pdf"))
{
    //Get the first page of the document
    var page = (PdfLoadedPage)doc.Pages[0];

    //Create a list to hold annotations to be removed
    List annotationsToRemove = new List();

    //Iterate the annotations and get stamp annotations
    foreach (PdfLoadedAnnotation annotation in page.Annotations)
    {
        if (annotation is PdfLoadedRubberStampAnnotation)
        {
            //Add the stamp annotation to the list for removal
            annotationsToRemove.Add(annotation);
        }
    }

    //Remove the stamp annotations from the page
    foreach (var annotation in annotationsToRemove)
    {
        page.Annotations.Remove(annotation);
    }

    //Save the document
    doc.Save("removed-stamp-annotation.pdf");
}

The following image shows the before‑and‑after results:

PDF page with flattened stamp

Real-world use cases for PDF stamps

Below are several practical scenarios that show how PDF stamping enhances automation, accuracy, and workflow clarity across different systems.

1. Automated approval stamping in a document management system

A company using a web‑based Document Management System ( DMS ) often needs to track internal approvals. When a manager reviews and approves a document, the system automatically applies an Approved stamp, complete with the reviewer’s name and timestamp, to the first page of the PDF before archiving it. This ensures every approved document enters the repository with clear, traceable metadata.

Workflow integration

Trigger: Manager clicks Approve in the DMS interface.

Backend process (using Syncfusion’s PDF library):

Load the selected PDF.
Create a rubber stamp annotation with dynamic content.
Insert the reviewer’s name and timestamp.
Save the stamped PDF to the archive folder.

Key benefits

Provides complete auditability with reviewer identity and approval time.
Eliminates manual stamping errors.
Integrates smoothly with existing approval logic.
Supports flattening for secure, long‑term archival.

2. Invoice status stamping in an accounting system

A logistics company creates PDF invoices for each shipment. To streamline financial communication, their backend accounting system automatically stamps each invoice with its current payment status, PAID, DUE, or OVERDUE, based on real‑time accounting data. The stamped invoice is then emailed directly to the client.

Workflow integration

Trigger: Payment status changes in the accounting database.

Backend process (using Syncfusion’s PDF library):

Load the invoice PDF.
Apply a color‑coded stamp (e.g., green for PAID, red for OVERDUE).
Save the updated PDF and attach it to an automated email.

Key benefits

Automates client communication about payment status.
Reduces manual processing errors and improves transparency.
Provides a clear visual cue for both internal teams and customers.

3. Legal filing status stamping in a case management system

A law firm relies on a backend case management system to generate, file, and store legal documents. When a document is filed, served, or marked confidential, the system automatically applies the appropriate status stamp, along with metadata such as case ID and filing date, before submission to the court or archival.

Workflow integration

Trigger: A case status changes or a new document is uploaded for filing.

Backend process (using Syncfusion’s PDF library):

Load the legal document PDF.
Add a stamp such as Filed, Served, or Confidential.
Include case identifiers and filing dates for traceability.
Save and archive the stamped document or submit it to the court portal.

Key benefits

Ensures legal traceability and supports filing compliance.
Automates labeling for court submissions.
Reduces manual effort and increases operational efficiency.

GitHub reference

You can find the complete sample for adding stamps to a PDF using C# in our GitHub demo.

Frequently Asked Questions

How do I stamp every page (or only specific pages)?

Loop through the document pages and add the stamp only when the desired condition is met (for example, first page only, odd-numbered pages, or pages containing specific text).

This keeps your stamping logic centralized, flexible, and predictable.

How do I position the stamp relative to the page (top-right, bottom-left) instead of using hardcoded coordinates?

Use the page size to calculate positions dynamically. For example: x = page.Size.Width – stampWidth – margin and y = margin. This approach is especially important for PDFs with mixed page sizes.

How can I make the stamp non-editable by end users?

Flatten the stamp so it becomes part of the page content.

If you leave it as an annotation, most PDF viewers will allow selecting, moving, or deleting it, depending on the PDF’s security permissions.

How do I remove only the stamps that I added (without deleting other annotations)?

Assign a unique identifier, such as Author, Subject, or a distinctive Text value, when creating the stamp.

Then filter the page annotations by that metadata when iterating through them.

Can I add stamps to password-protected PDFs?

Yes, as long as you have the correct password and the document’s security settings allow modifications.

If annotation permissions are restricted, adding or removing stamps may be blocked.

What measurement units does RectangleF use for stamp bounds?

RectangleF coordinates and sizes use PDF points, where: 1 point = 1/72 inch. If you need physical alignment (e.g., a 1-inch margin), convert inches to points by multiplying the value by 72.

Conclusion

Thanks for reading! PDF stamps are more than just visual markers; they’re powerful tools for streamlining workflows, reinforcing brand identity, and ensuring auditability. Whether you’re adding standard icons, dynamic metadata, or image‑based logos, the Syncfusion .NET PDF library gives you flexible, developer‑friendly APIs to handle it all. By applying these methods, you can make your document workflows more professional, efficient, and reliable.

Explore our PDF library’s documentation to unlock advanced stamp features and best practices.

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, feedback portal, or support portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

AI-Powered Smart TextArea for ASP.NET Core: Smarter Typing with Intelligent Autocompletion

Phinter Atieno — Tue, 03 Feb 2026 05:06:16 +0000

TL;DR: Syncfusion ASP.NET Core Smart TextArea component is introduced in the 2025 Volume 4 release. It brings AI‑powered sentence‑level autocompletions to your apps. It integrates seamlessly with OpenAI, Azure OpenAI, or Ollama to deliver smart, context‑aware suggestions that enhance writing workflows and boost overall productivity.

As developers, we’re always looking for ways to enhance productivity and deliver smoother, more intuitive user experiences. Syncfusion^® ASP.NET Core UI Controls already provide a strong toolkit for building modern, high‑performance applications, and with the introduction of the new Smart TextArea, things get even better.

Released in the 2025 Volume 4 update, the Smart TextArea brings AI‑assisted writing directly into your ASP.NET Core apps.

In this guide, we’ll explore what the Smart TextArea offers and how to integrate it into your app. We’ll also learn how to connect the control to Azure OpenAI , OpenAI , or Ollama to power real‑time, sentence‑level autocompletions.

Ready to enhance your users’ writing workflow? Let’s get started.

Why the Smart TextArea matters

A standard textarea allows basic text entry, but nothing more. The Smart TextArea changes this by introducing intelligent, AI‑driven writing assistance directly within the editing experience.

With sentence‑level autocompletions based on your configuration and the user’s input, the Smart TextArea helps users write faster, communicate more clearly, and reduce repetitive typing. Whether someone is replying to an issue, drafting an email, or participating in a chat, the control becomes a helpful writing companion that improves productivity with every keystroke.

Key benefits

AI‑powered sentence completion: Provides context‑aware predictions to help users finish sentences efficiently.
Customizable suggestions: Supports both predefined phrases and AI‑generated completions tailored to technical, conversational, or customer‑support contexts.
Real‑time assistance: Offers instant suggestions to improve clarity, reduce errors, and accelerate content creation.
Seamless integration: Easily integrates into ASP.NET Core apps to deliver AI‑assisted writing across text‑based workflows.

How it works

The Smart TextArea for ASP.NET Core enhances the standard textarea by applying real‑time, AI‑driven analysis to the user’s input.

Here’s what happens behind the scenes:

The control monitors what the user is typing and detects context based on previous words or phrases.
It checks for predefined suggestions that you configure.
When enabled, it sends the user’s partial text to the connected AI model.
The model generates the most suitable sentence‑level continuation.
The Smart TextArea displays several potential completions, and the user can accept or refine them instantly.

This creates a smooth, intelligent writing experience, especially useful in communication‑heavy workflows.

Example scenarios

Typing “To investigate” in a GitHub issue reply may prompt “We will need a reproducible example as a public Git repository.”
Entering “Hello!” in a customer support chat may prompt: “How can I assist you today?”

These context‑aware completions help users reduce repetitive phrasing and maintain consistent communication quality.

Getting started with the ASP.NET Core Smart TextArea component

Now that we’ve seen what the Smart TextArea can do, let’s walk through how to integrate it into your ASP.NET Core app.

Prerequisites

Before you begin, ensure you have the following installed:

.NET 8 or later.
A new or existing ASP.NET Core application.
An OpenAI / Azure OpenAI Account, or Ollama environment.

Step 1: Create a new ASP.NET Core project

Start by creating a new ASP.NET Core project using Visual Studio via Microsoft Templates or the Syncfusion ASP.NET Core Extension.

Step 2: Install Syncfusion ASP.NET Core NuGet package

To add the Smart TextArea control to your ASP.NET Core app, install the Syncfusion.EJ2.AspNet.Core NuGet package.

You can install it in Visual Studio:

Open Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
Search for Syncfusion.EJ2.AspNet.Core.
Install the package into your project.

If you prefer using the Package Manager Console, run the following command:


Install-Package Syncfusion.EJ2.AspNet.Core -Version 32.1.19

Step 3: Add Syncfusion ASP.NET Core Tag Helper

Now, we need to enable the Syncfusion Tag Helper to use the Smart TextArea in our Razor pages.

Open the ~/Pages/_ViewImports.cshtml file and add the following code in it.

@addTagHelper *, Syncfusion.EJ2

Step 4: Add stylesheet and script resources

Next, reference the required Syncfusion CSS and JavaScript files in your layout.

Edit the ~/Pages/Shared/_Layout.cshtml file and include the following code inside the <head> section:

<head>
    ...
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.19/fluent2.css" />
    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js"></script>
</head>

Step 5: Configure AI service

The Smart TextArea for ASP.NET Core relies on an AI provider to generate sentence‑level completions. We can connect it to OpenAI, Azure OpenAI, or Ollama, depending on our app’s requirements.

Option 1: Configure OpenAI

Create an OpenAI API key and assign it to openAIApiKey value in your configuration. Then, specify the model you want the Smart TextArea to use, such as gpt‑3.5‑turbo, gpt‑4, or any other supported model, by setting the openAIModel value.

Install the following NuGet packages into your project:


Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI

To configure the OpenAI service, add the following settings to the ~/Program.cs file in your ASP.NET Core app.

using Microsoft.Extensions.AI;
using OpenAI;
using Syncfusion.EJ2;

…..
…..
builder.Services.AddRazorPages();

string openAIApiKey = "API-KEY";
string openAIModel = "OPENAI_MODEL";
OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(openAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
.....
…..

Option 2: Configure Azure OpenAI

Before setting up Azure OpenAI, deploy an Azure OpenAI Service resource and the model you plan to use.

Once deployed, Azure will provide the required values:

azureOpenAIKey
azureOpenAIEndpoint
azureOpenAIModel

Install the following NuGet packages into your project:


Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
Install-Package Azure.AI.OpenAI

To configure the AI service, add the following settings to the ~/Program.cs file in your ASP.NET Core app.

using Syncfusion.EJ2;
using Microsoft.Extensions.AI;
using Azure.AI.OpenAI;
using System.ClientModel;

…..
builder.Services.AddRazorPages();

string azureOpenAIKey = "AZURE_OPENAI_KEY";
string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
string azureOpenAIModel = "AZURE_OPENAI_MODEL";
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
     new Uri(azureOpenAIEndpoint),
     new ApiKeyCredential(azureOpenAIKey)
);
IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
builder.Services.AddChatClient(azureOpenAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
.....
…..

Option 3: Ollama

To use Ollama for running self-hosted models:

1. Download and install Ollama

Visit Ollama’s official website and install the appropriate app for your operating system.

2. Install the desired model from the Ollama library

Browse the available models in the Ollama Model Library and install the one that works for you, such as llama2:13b, mistral:7b, etc.

3. Configure your application

Update your app settings to point to your local Ollama server:

Endpoint: Set the endpoint URL to where Ollama is running, typically: http://localhost:11434.
ModelName: specify the exact model name you installed, such as llama2:13b.

4. Install the required NuGet package

Install the necessary NuGet dependencies in your project to enable communication with the Ollama runtime.

Install-Package Microsoft.Extensions.AI
Install-Package OllamaSharp

Add the following settings to the ~/Program.cs file in your ASP.NET Core app.

JavaScript

using Syncfusion.EJ2;
using Microsoft.Extensions.AI;
using OllamaSharp;

builder.Services.AddRazorPages();

string ModelName = "MODEL_NAME";
IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
builder.Services.AddChatClient(chatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
....

Step 6: Add ASP.NET Core Smart TextArea Control

Finally, add the Syncfusion ASP.NET Core Smart TextArea tag helper in the ~/Pages/Index.cshtml page, as shown in the code example below.

@{
    var presets = new
    {
        userRole = "Maintainer of an open-source project replying to GitHub issues",
        userPhrases = new[]
        {
            "Thank you for contacting us.",
            "To investigate, we'll need a repro as a public Git repo.",
            "Could you please post a screenshot of NEED_INFO?",
            "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend Stack Overflow for a faster response.",
            "We don't accept ZIP files as repros."
        },
        placeHolder = "Write your response to the GitHub issue..."
    };
}

<ejs-smarttextarea
    id="smartTextarea"
    user-role="@presets.userRole"
    user-phrases="@presets.userPhrases"
    width="75%"
    placeholder="@presets.placeHolder"
    floatLabelType="Auto"
    rows="5">
</ejs-smarttextarea>

Let’s review the attributes in the code example above.

user-role: This attribute is required to define the autocompletion context based on the role of the person typing.
user-phrases: This attribute is optional and provides predefined expressions that align with the user/app’s tone and frequently used content.

Press Ctrl+F5 (Windows) or ⌘ +F5 (macOS) to run the app. This will open your browser and display the Syncfusion ASP.NET Core Smart TextArea.

Type Thank you to see the sentence autocompletion feature in action, as shown below.

ASP.NET Core Smart TextArea with autocompletion

Customizing the appearance of suggestions

The show-suggestion-on-popup attribute in the ASP.NET Core Smart TextArea control determines how suggestions are presented to users. When this attribute is set to true, the Smart TextArea displays suggestions inside a pop-up panel.

Try this in your code:

@{
    var presets = new
    {
        userRole = "Maintainer of an open-source project replying to GitHub issues",
        userPhrases = new[]
        {
            "Thank you for contacting us.",
            "To investigate, we'll need a repro as a public Git repo.",
            "Could you please post a screenshot of NEED_INFO?",
            "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend Stack Overflow for a faster response.",
            "We don't accept ZIP files as repros."
        },
        placeHolder = "Write your response to the GitHub issue..."
    };
}

<ejs-smarttextarea
    id="smartTextarea"
    user-role="@presets.userRole"
    user-phrases="@presets.userPhrases"
    width="75%"
    placeholder="@presets.placeHolder"
    floatLabelType="Auto"
    rows="5"
    show-suggestion-on-popup="true">
</ejs-smarttextarea>

Here’s a quick demo of the feature in action:

ASP.NET Core Smart TextArea displaying suggestions in a pop-up

GitHub reference

You can also find the complete example for ASP.NET Core Smart TextArea on GitHub.

Conclusion

Thank you for reading! The Syncfusion ASP.NET Core Smart TextArea released in the 2025 Volume 4 is a powerful AI-driven component designed to enhance text input efficiency and accuracy. With its intelligent sentence-level autocompletion, it transforms how users compose text, reducing typing effort and improving workflow efficiency. By integrating this control into your apps, you can streamline content creation, ensure consistent communication, and enhance the overall user experience.

Check out Syncfusion AI solutions for Blazor, ASP.NET Core, Angular, React, Vue, and TypeScript/JavaScript platforms. You can also refer to our Release Notes and What’s New pages to see the other updates in this release, and leave your feedback in the comments section below.

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 tria l.

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

Related Blogs

This article was originally published at Syncfusion.com.