DEV Community: Lucy Muturi

Celebrating National Nonprofit Day 2026: Empowering Organizations That Strengthen Communities

Lucy Muturi — Mon, 17 Aug 2026 11:08:00 +0000

TLDR: This National Nonprofit Day, we celebrate the organizations and people creating positive change worldwide. Syncfusion supports nonprofits with free and discounted technology solutions that streamline operations, improve transparency, and reduce costs. From application development and analytics to reporting and e-signatures, these tools help teams achieve more with limited resources, so they can focus on their mission and impact.

August 17 marks National Nonprofit Day, a time to recognize the organizations, volunteers, donors, and changemakers who work tirelessly to improve lives and build stronger communities.

Across the world, nonprofit organizations tackle some of society’s most pressing challenges. From expanding access to education and healthcare to supporting disaster relief, environmental conservation, and community development, nonprofits create meaningful impact every day. Their work often happens behind the scenes, powered by limited resources but driven by an unwavering commitment to helping others.

At Syncfusion®, we recognize the vital role nonprofits play in creating positive change. We also understand the challenges they face. That’s why we’re committed to providing technology solutions and licensing programs that help nonprofit organizations accomplish more while maximizing their resources.

Empowering nonprofits to achieve more

Nonprofit organizations are often expected to achieve extraordinary outcomes with constrained budgets, lean teams, and growing demands for accountability. Today’s nonprofits must:

Track and report measurable impact.
Manage volunteers and stakeholders.
Streamline internal operations.
Communicate effectively with donors and the communities they serve.
Deliver services efficiently while controlling costs.

Technology can help bridge these gaps. The right tools enable nonprofits to automate repetitive processes, gain visibility into their performance, improve collaboration, and spend less time on administrative tasks and more time advancing their mission.

Supporting nonprofits through Syncfusion licensing programs

At Syncfusion, we believe innovative software should be accessible to organizations making a difference in the world. Through a variety of community license programs and special nonprofit offerings, eligible organizations can access powerful development and business software for free or at heavily discounted rates, including:

Syncfusion community license: Provides access to Essential Studio and all its 1,600+ UI components and frameworks for building web, mobile, and desktop applications, helping qualifying nonprofits develop custom solutions while reducing costs.
BoldDesk® for nonprofits, NGOs, and charities: Helps qualifying organizations centralize support requests, improve communication, and efficiently manage interactions with volunteers, partners, and community members. The program offers free use of BoldDesk for one year.
BoldSign® free and discounted plans for nonprofits: Streamlines document processing with secure e-signatures for volunteer onboarding, approvals, agreements, and other essential nonprofit processes.
Bold BI® community license: Enables qualifying nonprofits to visualize impact, track key metrics, create dashboards, and share insights with donors and stakeholders through real-time analytics.
Bold Reports® community license: Simplifies grant management, program evaluation, financial reporting, and performance tracking with professional reporting tools.

Together, these solutions help nonprofits improve efficiency, reduce operational costs, and focus more resources on advancing their missions.

How technology helps nonprofits maximize their impact

When nonprofits gain access to affordable, enterprise-grade technology, the benefits extend far beyond software. This access allows them to:

Stretch limited budgets: Reduced software expenses allow organizations to allocate more resources toward programs, services, and community outreach.
Improve operational efficiency: Automation and digital tools help teams accomplish more with fewer hands and in less time.
Strengthen transparency: Clear reporting and analytics make it easier to demonstrate outcomes to donors, grant providers, board members, and stakeholders.
Enhance collaboration: Modern cloud-based tools support communication among distributed teams, volunteers, and partners.
Scale with confidence: As organizations grow, technology provides the infrastructure needed to support larger operations without significantly increasing overhead costs.

Read the full blog post on the Syncfusion Website

How Syncfusion Uses Its Own Developer Tools to Build SaaS Products

Lucy Muturi — Fri, 14 Aug 2026 13:57:43 +0000

TL;DR: What happens when a developer-tools company becomes a customer of its own technology? At Syncfusion, the same reusable UI and document technologies we offer our developers also power BoldSign, BoldDesk, Bold BI, and Bold Reports. Each product solves a different problem, but together they show the same principle: reuse common engineering building blocks, invest in domain-specific innovation, and learn from using those tools in real SaaS products.

When developers evaluate a UI component library or document-processing platform, they usually ask familiar questions.

Does it support the frameworks we use? Is it fast? Can we customize it? Are the APIs intuitive? Is the documentation good? What about accessibility, support, and licensing? Will it scale with the application?

There is another question worth asking:

Does the company building the technology trust it enough to use it in its own products?

At Syncfusion^®, we do.

Technologies from Syncfusion’s own developer ecosystem, including UI components, data visualization controls, document-processing libraries, viewers, editors, and related SDKs, are used as building blocks across BoldSign, BoldDesk, Bold BI, and Bold Reports.

Those four SaaS products solve very different problems:

BoldSign supports eSignature and document processing.
BoldDesk provides customer-support and help-desk experiences.
Bold BI delivers analytics and dashboards.
Bold Reports supports report design, processing, viewing, and delivery.

That difference is what makes their use of shared technologies interesting.

A PDF-processing library inside an eSignature platform solves a very different problem from a DataGrid inside a support workspace. A TreeView inside an analytics designer serves a different purpose from the same type of navigation control inside a reporting application.

The reusable technology is only one layer.

Each product combines those building blocks with its own business logic, APIs, services, security, data models, processes, infrastructure, and product experience.

A component is a building block, not the product. Its value is in solving recurring engineering problems so product teams can focus more of their effort on the functionality that differentiates their application.

Let’s look at how that works across four very different Syncfusion products.

One technology ecosystem, four SaaS experiences

At a high level, the relationship looks like this:

Product	Primary experience	Shared technology area
BoldSign	eSignature and document processes	PDF and document processing
BoldDesk	Customer support	UI components and interaction controls
Bold BI	Analytics and dashboards	UI, data-management, and visualization components
Bold Reports	Reporting	UI, visualization, reporting, and document technologies

The important part is not how many components appear in each product. It is how reusable technologies are combined with product-specific engineering to solve real business problems.

BoldSign: From document processing to eSignature management

Electronic signatures revolve around documents.

Users upload contracts, agreements, consent forms, offer letters, and other business files. Those documents may need to be prepared for signing, converted into an appropriate format, populated with fields, processed, signed, and ultimately delivered as completed records.

That creates two distinct layers of engineering.

The first is document mechanics.
The second is the eSignature processing built around those mechanics.

The reusable document layer

BoldSign uses Syncfusion document-processing technologies for operations that can include:

Drawing text into documents.
Extracting text.
Accessing PDF form fields.
Flattening interactive form fields.
Processing supported document formats.
Converting supported Word, Excel, and PowerPoint documents to PDF.

A simplified document flow can be represented as:

Input document → Conversion → PDF processing → Form-field handling → Signing → Completed document

The underlying document technologies handle the mechanics of working with files. BoldSign then adds the product-specific experience around them.

Signing an employment contract using BoldSign

What BoldSign adds

An eSignature platform needs much more than PDF manipulation.

The product layer handles capabilities such as:

Signer management
Signing order
Authentication
Templates
Notifications and reminders
Status tracking
Audit history
APIs and integrations
Business rules
Team operations

This separation is useful from an architecture perspective.

The reusable document layer solves document-processing problems. BoldSign concentrates its product engineering on how people prepare, send, sign, track, and manage agreements.

Developer takeaway: Reuse document mechanics where they are not your differentiator. Invest your product engineering in the process that creates value for your users.

BoldDesk: Composing UI components into a support workspace

A customer-support platform presents a completely different challenge.

A support agent may need to work with a ticket queue, customer information, conversations, attachments, status changes, internal collaboration, dashboards, and configuration, all within the same application.

No single UI component creates that experience. Instead, the product is assembled from many smaller interaction patterns.

Ticket management

Support teams regularly work with large sets of structured records.

Components such as DataGrid, Query Builder, and editing controls can provide a foundation for viewing, filtering, searching, and updating ticket and customer information.

Conceptually:

DataGrid + Query Builder + editing → Ticket management

Using BoldDesk for internal ticket management at Syncfusion

BoldDesk then adds the support-domain logic:

Ticket status
Priority
Assignment
Customer context
SLA behavior
Permissions
Automation
Support operations

The grid knows how to display and manipulate records. BoldDesk knows what those records mean.

Advanced filter options in BoldDesk

Customer conversations

Support agents also need to communicate effectively with customers and coworkers.

Components such as:

can form part of the communication experience.

Together, they support rich replies, collaboration, mentions, and attachments.

Conceptually:

Rich Text Editor + Mention + File Upload → Customer communication

BoldDesk adds the surrounding product context: ticket history, collaboration rules, channels, customer information, and process state.

Support analytics and navigation

Charts and layout components help present operational information, while input, navigation, dialog, toolbar, and selection controls support the many smaller interactions found throughout a help-desk application.

Rather than building every interaction independently, product teams can compose reusable components into a consistent experience.

Developer takeaway: Large SaaS interfaces are often built from many focused components rather than one enormous domain-specific control.

The individual component solves a bounded UI problem. The product gives that interaction business meaning.

Bold BI: Building a complex analytics workspace

Analytics software introduces a different level of interaction density. A dashboard is not merely a page containing charts.

Users may need to:

Connect to data
Explore schemas
Choose fields
Add visualizations
Drag and resize widgets
Configure properties
Apply filters
Organize dashboards
Manage users
Share or embed analytics

A dashboard designer can therefore behave more like an interactive workspace than a static webpage.

Designer interactions

Controls such as:

Toolbar
Menu
Tab
Splitter
Drag-and-drop interactions
Resizing capabilities

can provide the interaction primitives needed to construct the designer environment.

Conceptually:

Toolbar + Menu + Tab + Splitter + drag-and-drop → Designer workspace

Creating dashboards using Bold BI

Bold BI then provides the analytics-specific layer:

Dashboard models.
Data relationships.
Widget behavior.
Filtering.
Visualization semantics.
Sharing.
Embedding.
Governance.

Data and schema management

Analytics applications also need to help users navigate data structures.

Components such as TreeView, DropDown Tree, AutoComplete, DataGrid, and ListBox can support data selection and exploration.

Conceptually:

Tree and grid controls + selection components → Data and schema management

The controls provide navigation and selection behavior. Bold BI determines what the data represents and how it contributes to an analysis.

Using Bold BI and Bold Reports for sales analysis

Configuration-heavy interfaces

An analytics designer can expose a large number of settings.

Users may need to configure:

Dimensions
Measures
Dates
Colors
Ranges
Labels
Number formats
Filtering
Sorting
Interaction behavior

Reusable input components such as drop-down lists, check boxes, numeric inputs, date pickers, sliders, and color pickers can provide a consistent way to expose those settings.

Building a hospital management dashboard using Bold BI

Developer takeaway: Reusable UI primitives become increasingly valuable as the number of coordinated interactions in an application grows.

A single control may be small. A consistent collection of them can form the interaction foundation of a sophisticated product.

Read the full blog post on the Syncfusion Website

How to Evaluate an AI IDE in 2026: Features That Matter for Development Teams

Lucy Muturi — Wed, 12 Aug 2026 14:06:54 +0000

TL;DR: AI IDEs are evolving beyond code completion into platforms that support planning, implementation, testing, and collaboration. This guide explores how development teams can evaluate AI IDEs using practical criteria such as developer experience, agentic workflows, codebase awareness, governance, security, and cost transparency to identify solutions that scale effectively across real-world engineering teams.

It’s 4 PM on a Thursday.

A developer is working on a feature request. Still, their attention is scattered across six different places: the IDE, documentation, an AI chatbot, terminal logs, a browser tab full of stack traces, and a team chat window. Every context switch breaks momentum. Every interruption adds friction.

This is what AI-assisted development still looks like for many teams.

The irony is that AI was supposed to simplify software development. Instead, many organizations have added another layer of tools that developers must constantly manage.

That is why choosing the right AI IDE matters more than ever.

The best AI IDEs don’t simply generate code. They reduce complexity, keep developers focused, and help teams build software faster without sacrificing quality, security, or cost control.

The challenge is that most AI IDEs appear similar in demos. Nearly every vendor claims to offer intelligent code generation, autonomous agents, and productivity gains. Once real projects begin, however, the differences become obvious.

Some tools understand your codebase deeply. Others only understand the file you currently have open.
Some provide enterprise governance and spending controls. Others leave teams guessing what their AI bill will be at the end of the month.
Some help organizations establish consistent development standards. Others create more work during code review.

The question is no longer whether your team should use AI.

The question is whether your AI IDE can support how your team actually works.

What is an AI IDE?

An AI IDE (Integrated Development Environment) is a development environment that embeds AI directly into the software development workflow, rather than adding it later through separate plugins or disconnected tools.

Unlike traditional coding assistants that focus mainly on autocomplete, modern AI IDEs can:

Understand an entire codebase
Generate and modify code across multiple files
Assist with debugging and testing
Create documentation
Execute multi-step development workflows

The most advanced platforms operate more like collaborators than assistants. They can analyze a problem, create an implementation plan, execute changes, validate results, and suggest improvements without constant manual intervention.

Why AI IDE evaluation matters in 2026

As AI becomes a standard part of software development, organizations face a new challenge: choosing the right platform.

An AI IDE influences three critical outcomes:

Developer adoption: AI only creates value when developers actually use it. If the experience feels fragmented or disruptive, adoption drops quickly.
Cost predictability: As AI usage grows across teams, costs can scale just as quickly. Organizations need visibility, budget controls, and governance policies that prevent unexpected spending.
Engineering consistency: AI-generated code should strengthen development standards, not weaken them. Teams need ways to ensure AI follows established practices and architectural conventions.

When evaluating AI IDEs, these outcomes matter far more than how impressive the AI sounds during a demo.

Three things that actually matter

Most purchasing decisions ultimately come down to three areas:

Developer Experience
Cost Control and Transparency
Team Standards and Governance

Let’s examine each one.

1. Developer experience: AI across the entire development workflow

The best AI IDE does more than complete code. It helps developers move from idea to delivery without constantly leaving their workflow.

Here are the signs that an AI IDE will genuinely improve developer productivity.

AI should complete tasks, not just lines

Autocomplete has become table stakes.

Modern AI tools should be capable of planning work, updating multiple files, identifying dependencies, generating tests, and validating results.

The difference between completing a line of code and completing an entire feature is significant.

One saves minutes.

The other saves days.

Developers should stay inside the editor

Every trip to another tool comes with a productivity cost.

Developers routinely leave their editor to:

Ask questions
Review documentation
Debug issues
Run tests
Generate implementation plans

An effective AI IDE keeps as much of that work as possible inside a single environment.

Less context switching means more focus.

AI should understand your codebase

Generic code suggestions rarely solve real-world problems.

Useful AI understands:

Existing project structure
Framework conventions
Internal APIs
Shared components
Team architecture patterns

The more context the AI understands, the less time developers spend fixing generated output.

New team members should become productive faster

One overlooked benefit of AI-native development environments is onboarding.

Instead of spending weeks exploring architecture and conventions, new developers can use AI to navigate unfamiliar systems and understand existing patterns.

Teams that onboard developers faster can scale faster.

AI should support the entire development lifecycle

Development is more than writing code.

Developers spend time:

Planning features
Writing code
Testing
Debugging
Refactoring
Documenting

The most effective AI IDEs support all of these activities in a single workflow.

A real-world example

Imagine a team building an analytics dashboard for a voice-notes application.

The dashboard must display:

Writing trends
Peak activity times
Voice versus manual entry statistics
Weekly usage summaries

Traditionally, a developer might:

Design schema updates
Build API endpoints
Create UI components
Write tests
Produce documentation

All while jumping between multiple tools and workflows.

With an AI-native IDE, the process becomes simpler.

The developer describes the feature requirements.
The AI generates a proposed implementation plan covering backend, frontend, testing, and documentation.
After approval, the AI assists with implementation, creates required files, generates tests, and helps validate the result.

Instead of orchestrating every step manually, the developer focuses on reviewing and guiding the process.

That shift from managing tasks to supervising outcomes is where much of the productivity gain comes from.

What this actually looks like in practice

When an AI IDE works well, development feels very different. Instead of jumping between tools, developers can move from planning to implementation in a single workflow.

Code Studio is one example. It combines Plan mode and Agent mode to help teams build features faster while staying in control.

Here’s how this works for our analytics dashboard feature:

Developer opens Plan mode and describes: “Add an Analytics page to the Voice Notes App where users can see how they’ve been writing things like how many words they’ve written over the last 30 days, which hours of the day they write most, how many notes they’ve created by voice vs. manually, and a weekly summary of their activity. Use React with chart visualizations for the UI and make sure to include tests and documentation.”
Plan mode creates a clear implementation plan: A readable breakdown of everything needed to build this feature, shown directly in the editor. The developer can review it, suggest changes, or approve it as-is.
Developer reviews the plan in the editor, no switching to another tool, no losing context.

Plan Mode in Code Studio

4.Developer clicks “Start Implementation”: Plan mode switches to Agent mode automatically.
5.Agent mode builds the full feature:

Sets up everything needed to store and retrieve user writing activity.
Creates the logic that calculates trends, peak writing hours, and voice vs. manual note breakdowns.
Builds a React dashboard component with chart visualizations that users can see and interact with.
Creates tests to make sure everything works correctly.
Creates documentation explaining what was built.

Code Studio Agent Mode

Result: A fully working Analytics page inside Voice Notes App, built in a few minutes instead of days. Everything done in one place, no tool-switching, no scattered work.

Measurable difference

Time: Much faster; what usually takes days happens in hours.
Tool switches: None; developers stay focused in one place instead of context-jumping repeatedly.
Code review rounds: Significantly reduced, no rework needed for style/structure mismatches.
Developer fatigue: Much lower; no cognitive load from switching tools.

Voice Notes application in Code Studio

How this demonstrates all six points

Agentic capability: AI handled the entire feature autonomously: planning, building, testing, and documenting without the developer manually doing each step.
Everything stays in one place: No switching between tools. The developer described the feature, reviewed the plan, and watched it get built all inside Code Studio.
AI understands your project: Code Studio already knew the Voice Notes App structure and coding style, so everything it built fit naturally into the existing codebase.
New developers get productive immediately: A new team member can follow this exact workflow from day one without needing to learn how the whole project is structured.
Covers entire development lifecycle: One prompt covered the full journey: planning → building the feature → charts → tests → documentation, all in one flow.
Broad language and framework support: The Voice Notes App uses TypeScript, React, and Vite, all fully supported in Code Studio out of the box, with no extra setup needed.

2. Cost control and transparency

As teams become more dependent on AI, usage costs become a business concern. Many organizations discover this too late.

Without visibility, AI spending can rise unexpectedly as team adoption increases. A strong AI IDE should provide safeguards that make scaling predictable.

Real-time usage visibility

Leaders should be able to understand:

Who is using AI
How frequently it’s being used
Which models consume the most resources
Where costs are increasing

Visibility enables informed decisions before costs become a problem.

Budget enforcement

Notifications alone are not enough.

Effective platforms allow teams to:

Set spending limits
Create role-based budgets
Receive proactive alerts
Prevent accidental overages

AI adoption grows much faster when finance and engineering teams trust the cost model.

Multi-model flexibility

AI providers evolve rapidly.

Organizations should avoid becoming dependent on a single model provider.

Support for multiple providers offers:

Better resilience
Cost optimization
Greater flexibility
Reduced vendor risk

Enterprise security and governance

Organizations must also consider what happens to their code and data.

An enterprise-ready AI IDE should provide:

Role-based access controls
Workspace-level permissions
Auditability
Clear data privacy protections

AI governance is becoming just as important as AI capability.

Code Studio Cost and Usage Dashboard

Read the full blog post on the Syncfusion Website

Dialog API vs Popover API: Which One Should You Actually Use?

Lucy Muturi — Tue, 11 Aug 2026 10:00:31 +0000

TL;DR: The Dialog API and Popover API both create native browser overlays, but they serve different purposes. Learn how accessibility, focus management, inert background behavior, and showModal() influence the choice between modals, tooltips, menus, and other interactive UI components. By understanding when to use each API, developers can build more accessible, maintainable, and user-friendly web applications.

Modern browsers now provide two native ways to build overlays: the Popover API and the Dialog API.

At first glance, they seem remarkably similar. Both place content above the page. Both can be opened and dismissed by users. Both reduce the amount of custom JavaScript needed to build overlays.

That visual similarity is exactly why developers often choose the wrong one.

The real difference isn’t how they look. It’s how users interact with them.

Important nuance: The Popover API generally provides stronger built-in focus management, automatic ARIA connections (e.g. implied aria-expanded), and light-dismiss behavior for non-modal overlays compared to a non-modal <dialog>. Use Popover for most tooltips, menus, etc.

In this article, we’ll compare the Dialog API and Popover API, look at their accessibility implications, and identify the scenarios where each one makes the most sense.

Quick decision table

Use Case	Recommended API	Why
Tooltip	Popover API	Non-blocking and lightweight
Dropdown menu	Popover API	Users can continue interacting with the page.
Cookie banner	Popover API	Informational, not disruptive
Custom combobox	Popover API	Works as an interactive overlay
Confirmation dialog	Dialog API	Requires deliberate action
Login modal	Dialog API	Must capture user attention
Form modal	Dialog API	Focus should stay inside the modal
Destructive action confirmation	Dialog API	Background interaction should be blocked
Lightbox	Dialog API	Users should focus on the content being displayed

A common mistake developers make

Many overlays look like modals but behave like popovers.

The UI appears correct. The overlay opens in the middle of the screen. The page behind it may even look visually disabled.

But keyboard users can still navigate through the underlying page. Screen readers can still access content behind the overlay.

Because the problem isn’t visible, it often survives testing and gets shipped to production.

Whenever an overlay must prevent users from interacting with the rest of the page, a modal dialog is the correct choice. A popover was never designed for that job.

Popover API: For overlays that don’t interrupt the page

Overview

The Popover API provides a native way to display non-modal overlays such as menus, tooltips, teaching hints, and dropdowns.

A basic popover can be created entirely with HTML:

HTML

<button popovertarget="my-tooltip">Show info</button>
<div popover id="my-tooltip">This is additional information.</div>

For simple scenarios, no JavaScript is required. The browser handles opening, closing, top-layer rendering, and common dismissal behavior.

Because popovers are placed in the browser’s top layer, they naturally appear above page content without complicated z-index management.

Strengths

The Popover API automates behaviors that previously required significant JavaScript:

Automatic light dismiss: You can dismiss a popover by clicking outside it or pressing Escape. No custom event listeners are necessary.
Less Boilerplate: The browser automatically manages relationships between triggers and popovers, reducing the amount of accessibility plumbing developers typically write.
Focus Restoration: When a popover closes, focus returns to the triggering element automatically.

Ideal for lightweight interactions

Popovers work particularly well for:

Tooltips
Dropdown menus
User profile menus
Notification banners
Contextual help
Custom select components

Limitations

The Popover API does not make background content inaccessible.

Users can continue interacting with the page behind the overlay, which is exactly the intended behavior.

That makes popovers unsuitable for:

Confirmation dialogs
Login modals
Critical alerts
Multi-step forms
Any workflow that requires immediate action

If an overlay should prevent interaction with the rest of the page, a popover is the wrong tool.

Dialog API: For interactions that require attention

Overview

The Dialog API is built around the HTML <dialog> element.

Its biggest advantage comes from showModal(), which turns the dialog into a true modal experience.

HTML

<button class="open-dialog" aria-haspopup="dialog">Delete item</button>
<dialog id="confirm-delete">
  <h2>Confirm deletion</h2>
  <p>This action cannot be undone.</p>
  <button class="close-dialog">Cancel</button>
  <button>Confirm</button>
</dialog>

JavaScript

const dialog = document.querySelector('#confirm-delete');
const opener = document.querySelector('.open-dialog');
const closer = dialog.querySelector('.close-dialog');

opener.addEventListener('click', () => dialog.showModal());

closer.addEventListener('click', () => {
  dialog.close();
  opener.focus();
});

Note: showModal() automatically moves focus into the dialog and restores it on close. However, for best results, ensure the dialog has a clear initial focusable element (e.g. a primary action button) and consider manually restoring focus to the trigger element on close, as shown in the example.

Read the full blog post on the Syncfusion Website

React Compiler Explained: Do You Still Need useMemo, useCallback, and React.memo?

Lucy Muturi — Mon, 10 Aug 2026 10:09:06 +0000

TL;DR: React Compiler can automatically optimize many memoization patterns that it can safely analyze, reducing the need for routine useMemo, useCallback, and React.memo usage. Learn what the compiler optimizes, where manual memoization still adds value, how performance best practices change, and how to enable React Compiler in Next.js and Vite projects.

You open a React component and see a familiar pattern:

A couple of useMemo calls
Several useCallback hooks
A React.memo wrapper around a child component

Everything looks optimized. Yet the component is still difficult to read, nobody wants to touch the dependency arrays, and it’s not even clear whether any of those optimizations are helping.

For years, this was normal React development.

If a value was an object, we wrapped it in useMemo. If a function was passed to a child component, we reached for useCallback. If a component re-rendered too often, we added React.memo and hoped for the best.

React Compiler changes that workflow.

Instead of manually sprinkling memoization throughout your application, React Compiler can automatically optimize many common memoization patterns that it can safely analyze during the build process. The result is simpler components, fewer dependency arrays, and less performance-related boilerplate.

But does that mean useMemo, useCallback, and React.memo are officially obsolete?

Not quite.

The real answer is more practical than the headlines suggest.

Why manual memoization became a habit

Before React Compiler, developers often optimized for reference stability rather than real performance problems.

They commonly used:

useMemo to cache calculated values.
useCallback to keep function references stable.
React.memo to prevent child components from re-rendering when props were unchanged.

A typical component slowly turns into this:

JavaScript

import { useMemo, useCallback } from "react";

function ProductSearch({ products, query, onSelect }) {
  const visibleProducts = useMemo(() => {
    return products.filter((product) =>
      product.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [products, query]);

  const handleSelect = useCallback(
    (id) => {
      onSelect(id);
    },
    [onSelect]
  );

  return (
    <ProductList
      products={visibleProducts}
      onSelect={handleSelect}
    />
  );
}

There’s nothing wrong with this approach.

The problem is that many teams adopted it by default, even when no measurable performance benefit existed.

Over time, components became harder to maintain because developers had to:

Keep dependency arrays accurate
Avoid stale closures
Understand memoization behavior across the component tree
Review optimization code that often delivered little value

The end result was frequently more complexity than performance.

What is React Compiler?

React Compiler is a build-time optimization tool that analyzes React components and automatically applies memoization when it can safely prove that doing so won’t change behavior.

In practical terms, it allows developers to write straightforward React code while letting the compiler handle many of the optimization decisions behind the scenes.

Consider this example:

JavaScript

function ProductSearch({ products, query, onSelect }) {
  const visibleProducts = products.filter((product) =>
    product.name.toLowerCase().includes(query.toLowerCase())
  );

  const handleSelect = (id) => {
    onSelect(id);
  };

  return (
    <ProductList
      products={visibleProducts}
      onSelect={handleSelect}
    />
  );
}

Without a compiler, many developers would automatically add useMemo and useCallback.

With React Compiler enabled, that extra code is often unnecessary.

The important detail is that React Compiler only optimizes patterns it can safely analyze. If a component violates React rules or contains patterns the compiler cannot guarantee, it simply skips those optimizations.

That means the goal isn’t to stop thinking about performance. The goal is to stop optimizing everything preemptively.

When React Compiler can make manual useMemo and useCallback unnecessary

React Compiler is particularly effective in situations where developers previously used memoization as a precaution rather than a necessity.

Derived values

A common example is calculating filtered or transformed data from props.

JavaScript

function InvoiceSummary({ invoices, status }) {
  const filteredInvoices = invoices.filter(
    (invoice) => invoice.status === status
  );

  const total = filteredInvoices.reduce(
    (sum, invoice) => sum + invoice.amount,
    0
  );
  return <Summary total={total} invoices={filteredInvoices} />;
}

Before React Compiler, many developers would wrap filteredInvoices and total in useMemo.

With React Compiler enabled, this kind of pure derived value may be a good candidate for automatic optimization. The compiler’s ability to optimize it depends on whether the calculation is pure and follows patterns the compiler supports. Not every derived value is guaranteed to be cached.

Inline event handlers

Another common pattern is wrapping every event handler with useCallback.

JavaScript

function TodoItem({ todo, onToggle }) {
  const handleChange = () => {
    onToggle(todo.id);
  };

  return (
    <label>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={handleChange}
      />
      {todo.title}
    </label>
  );
}

Many teams previously used useCallback here solely to preserve function identity.

In compiler-enabled applications, this level of manual optimization is often unnecessary.

Lightweight object props

Developers also frequently memoized simple configuration objects.

JavaScript

function ChartPanel({ data, theme }) {
  const chartOptions = {
    color: theme.primaryColor,
    showLegend: true,
  };

  return <RevenueChart data={data} options={chartOptions} />;
}

React Compiler can often optimize these scenarios without requiring additional hooks.

When you still need useMemo

React Compiler reduces routine memoization, but it does not eliminate legitimate performance bottlenecks.

Use useMemo when:

A calculation is genuinely expensive
Profiling shows measurable render costs
Inputs change far less frequently than renders

Caching improves user-visible performance

JavaScript

function AnalyticsView({ events }) {
  const report = useMemo(() => {
    return buildLargeReport(events);
  }, [events]);

  return <ReportTable report={report} />;
}

Even if buildLargeReport() processes thousands of records and performs grouping, sorting, and aggregation, an expensive calculation does not automatically require manual memoization. React Compiler may already optimize the calculation when it can safely analyze the code. If profiling shows that the calculation is still a bottleneck, keeping useMemo may be appropriate.

The key difference in 2026 is intent.

You’re no longer adding useMemo because a value is an array or object.
You’re adding it because you’ve identified an actual problem.

Read the full blog post on the Syncfusion Website

7 Powerful Ways to Automate PowerPoint Generation in C#

Lucy Muturi — Fri, 07 Aug 2026 13:15:05 +0000

TL;DR: Automating PPTX generation in C# lets you create data-driven PowerPoint presentations using APIs, Excel, and databases without manual edits. By programmatically generating slides, tables, charts, and layouts, you can build scalable reporting workflows that remain consistent, reduce errors, and automatically update with live data, making them ideal for recurring business reports, dashboards, and client-ready presentations.

Every team that deals with recurring reports eventually hits the same wall.

You build a PowerPoint deck once. Then again next month. And again the month after that.

Tables need updates. Charts need new data. Slides need formatting fixes because something shifted. What starts as a simple task slowly turns into hours of repetitive work.

At some point, the question changes from “How do I update this?” to “Why am I still doing this manually?”

That’s where automation comes in.

Instead of treating PowerPoint like a document, you treat it like output from something your code generates. Tools like the Syncfusion^® PowerPoint Library make this approach practical by letting you create and manipulate presentations directly from your application code, without relying on Microsoft Office.

Once you set things up, your presentations can be built automatically using live data from Excel files, databases, or APIs.

Let’s walk through what that actually looks like in practice.

Start with a simple foundation

Before getting into advanced scenarios, it helps to know how lightweight this actually is.

Creating a presentation programmatically isn’t as complex as it sounds. You define a slide, add text or shapes, and save it. That’s it.

If you’re new to this approach, it’s useful to quickly skim the Syncfusion PowerPoint Library documentation to understand how presentations, slides, and shapes are structured in code. You don’t need to go deep right away, just enough to get familiar with the core objects and how they fit together.

Sample presentation created using Syncfusion PowerPoint Library

Once you’ve done that once, everything else becomes an extension of the same idea: define structure → inject data → generate output

From there, things get interesting.

Want to try it instantly? Visit our live demo to generate PPTX files in seconds.

1. Master slide template automation

One of the biggest hidden time drains in PowerPoint is formatting.

Fonts shift. Colors don’t match. Logos end up slightly misaligned across slides.

When you define a master layout in code, all of that disappears.

Instead of styling each slide individually, you define:

Background
Typography
Branding elements
Layout structure

With the Syncfusion PowerPoint Library, you can create a custom layout from one of nine predefined slide types, apply your brand colors and shapes directly to the layout, and generate multiple slides that all follow the same standard with zero repetition.

// Create a new PowerPoint presentation
Using (IPresentation presentation = Presentation.Create())
{

    // Add a TitleOnly custom layout to the first master slide
    ILayoutSlide layoutSlide = presentation.Masters[0].LayoutSlides.Add(SlideLayoutType.TitleOnly, "CustomLayout");

    // Set layout background (pale cream) so all slides using this layout inherit it
    layoutSlide.Background.Fill.SolidFill.Color = ColorObject.FromArgb(252, 244, 240);

    // Add a thin terracotta rule under the title area
    layoutSlide.Shapes.AddShape(AutoShapeType.Rectangle, 48, 120, 864, 6).Fill.SolidFill.Color = ColorObject.FromArgb(215, 100, 67);

    // Add one slide using the custom layout
    ISlide slide1 = presentation.Slides.Add(layoutSlide);

    // Populate the title placeholder and apply basic formatting
    IShape? titleShape = slide1.Shapes[0] as IShape;
    var titleParagraph = titleShape.TextBody.AddParagraph("Financial Report \u2014 FY 2024\u20132025");
    titleParagraph.HorizontalAlignment = HorizontalAlignmentType.Center;
    titleParagraph.TextParts[0].Font.FontName = "Calibri";
    titleParagraph.TextParts[0].Font.FontSize = 48;
    titleParagraph.TextParts[0].Font.Color = ColorObject.FromArgb(16, 66, 96);

    // Add a descriptive text box below the title
    IShape descriptionShape = slide1.AddTextBox(50, 140, 874, 120);
    descriptionShape.TextBody.Text = "This report presents a consolidated view of the company's financial performance across FY 2024–2025. It highlights key trends in revenue, expenses, and growth to support informed strategic decisions.";

    //Add image into the slides
    FileStream pictureStream = new FileStream("data/Image.png", FileMode.Open);
    slide1.Shapes.AddPicture(pictureStream, 450, 210, 420, 300);

    //Add second slide using the same custom layout - it automatically inherits the background from the layout slide
    ISlide slide2 = presentation.Slides.Add(layoutSlide);
    ISlide slide3 = presentation.Slides.Add(layoutSlide);
    ISlide slide4 = presentation.Slides.Add(layoutSlide);

    // Save the PowerPoint Presentation
    FileStream outputStream = new FileStream(Path.GetFullPath(@"Output.pptx"), FileMode.Create);
    presentation.Save(outputStream);
    //Release the stream
    outputStream.Dispose();
    presentation.Close();
}

Sample master slide layout created using Syncfusion PowerPoint Library

For more details on master slides, predefined slides, and slide‑level access, check out our Master slides documentation.

2. Generate tables directly from data sources

Tables are the backbone of most business reports. But rebuilding them in each cycle, copying rows, adjusting column widths, and reformatting cells wastes hours and invites data errors.

The Syncfusion PowerPoint Library lets you generate tables programmatically by loading your data source from CSV, Excel, or a database and injecting the values directly into each cell. The structure stays consistent, and the data stays current, automatically.

//Load the existing PowerPoint presentation from the Data folder
FileStream inputStream = new FileStream(
    Path.GetFullPath(@"Data/Input.pptx"),
    FileMode.Open,
    FileAccess.Read
);

IPresentation presentation = Presentation.Open(inputStream);

// ExcelToPresentationHelper is a custom helper class included in this sample project.
// Include this class in your project to load your Excel data into your presentation slide.
ExcelToPresentationHelper helper = new ExcelToPresentationHelper();

//The helper method will render the external Data and inject the updated table in the presentation
helper.AddFinancialDataToPresentation(presentation);

// Save the PowerPoint Presentation
FileStream outputStream = new FileStream(
    Path.GetFullPath(@"Output.pptx"),
    FileMode.Create
);

presentation.Save(outputStream);

//Release the stream
outputStream.Dispose();
presentation.Close();

Financial report table created using Syncfusion PowerPoint Library

The ExcelToPresentationHelper class uses XlsIO's ExportDataTable API to read Excel data and Presentation's ITable and ICells APIs to generate a PowerPoint table from it, making it easy to create data-driven slides programmatically.

Want to explore more ways to style tables or inject data automatically? Our table documentation and KB article has everything you need.

Want to explore more ways to style tables or inject data automatically? Our tabledocumentation has everything you need.

3. Turn data into charts automatically

Numbers make sense in tables, but trends and comparisons are far easier to communicate in charts. The challenge is that updating charts for every reporting cycle, connecting data ranges, adjusting axes, and fixing labels is slow and repetitive.

Our PowerPoint Library lets you generate charts directly from Excel data with a single API call. You define the data range, chart type, and axis labels in code, and the library handles the entire visualization automatically, creating bar, line, or pie charts based on the type you specify. This ensures your slides always present the latest business values.

//To create a new presentation or load an existing one, add a slide title, and save the presentation, reuse the code demonstrated in the previous section.

// Add chart from Excel (A1:B13 = Month, Profit in Lakhs)
FileStream excelStream = new FileStream(
    Path.GetFullPath(@"Data/Book1.xlsx"),
    FileMode.Open
);

IPresentationChart chart = presentation.Slides[0].Charts.AddChart(excelStream, 1, "A1:B13", new RectangleF(90, 150, 800, 380));

chart.ChartTitle = "Financial Year Profit Visuals";
chart.PrimaryCategoryAxis.Title = "Month";
chart.PrimaryValueAxis.Title = "Profit (Lakhs)";
chart.HasLegend = false;

excelStream.Dispose();

Financial year profit chart created using Syncfusion PowerPoint Library

Looking for advanced chart types, styling controls, and formatting? Explore the full chart customization guide.

4. Build SmartArt without recreating diagrams

Process flows, approval chains, and org structures are clear when presented visually. Updating SmartArt nodes every time a process changes is surprisingly tedious, but automating SmartArt creation keeps diagrams synchronized with your business model.

The Syncfusion PowerPoint Library lets you create and populate SmartArt programmatically. Load your data from an Excel, CSV, database, or any Data source, insert the SmartArt shape, and fill each node dynamically. No manual editing is needed.

Workflow.txt

Budget Planning
Expenditure Tracking
Variance Analysis
Performance Optimization
Financial Reporting

//To create a new presentation or load an existing one, add a slide title, and save the presentation, reuse the code demonstrated in the previous section.

// Read workflow stages from workflow.txt — each line becomes a SmartArt node
var workflowItems = File.ReadAllLines(Path.GetFullPath(@"Data/workflow.txt"))
    .Select(line => line.Trim())
    .Where(line => !string.IsNullOrEmpty(line))
    .ToList();

// Add SmartArt with workflow data
ISmartArt smartArt = presentation.Slides[0].Shapes.AddSmartArt(SmartArtType.BasicCycle, 100, 150, 750, 350);

for (int i = 0; i < Math.Min(smartArt.Nodes.Count, workflowItems.Count); i++)
    smartArt.Nodes[i].TextBody.AddParagraph(workflowItems[i]);
}

Financial operations SmartArt created using Syncfusion PowerPoint Library

Curious to explore more SmartArt operations and node configuration? Check our PowerPoint SmartArt documentation for more details.

Read the full blog post on the Syncfusion Website

Build React, Angular, and Vue Applications Faster with Syncfusion CLI

Lucy Muturi — Thu, 06 Aug 2026 12:05:54 +0000

TL;DR: Syncfusion CLI simplifies frontend development by automating project creation, component integration, theme management, and AI-assisted workflows for React, Angular, and Vue applications. Learn how to scaffold projects faster, maintain consistency across teams, and streamline development tasks from a single command-line tool.

Setting up a new web application is often more time-consuming than it should be. Before writing a single business feature, developers typically spend time creating the project structure, configuring frameworks, installing dependencies, selecting themes, and integrating UI components.

To streamline this process, we’ve introduced Syncfusion^® CLI, a command-line tool that helps developers create, configure, and manage applications built with Syncfusion components. Whether you’re starting a new React, Angular, or Vue application, adding components to an existing project, or setting up AI-assisted development workflows, Syncfusion CLI helps reduce setup effort and gets you to development faster.

Why Syncfusion CLI?

Modern frontend projects often require repetitive setup tasks that must be performed every time a new application is created. While these tasks are necessary, they can slow development and create inconsistencies across projects.

Syncfusion CLI provides a unified workflow for common development tasks, helping teams:

Create React, Angular, and Vue applications quickly.
Start with preconfigured Syncfusion component templates.
Apply consistent themes across projects.
Add Syncfusion components to existing applications.
Configure Syncfusion MCP support for AI-powered workflows.
Install Syncfusion Skills for AI-assisted development.
View project and environment information directly from the command line.

Instead of manually performing multiple setup steps, developers can manage everything through a single tool.

Installing Syncfusion CLI

You can install the Syncfusion CLI globally using npm:

BASH

npm install -g @syncfusion/syncfusion-cli

Once installation is complete, run the following command to verify that the CLI is available:

BASH

sf

This launches the interactive experience and provides access to the available commands.

How to use Syncfusion CLI

Syncfusion CLI supports both guided and command-driven workflows, allowing developers to choose the approach that best fits their development style.

Interactive mode

The interactive mode is ideal for developers who are new to Syncfusion CLI or prefer a guided experience.

Run:

BASH

sf

You’ll be presented with a terminal-based menu that walks you through common tasks such as:

Creating a new project
Adding components
Switching themes
Configuring MCP
Installing Skills
Viewing project information

This approach eliminates the need to memorize commands and simplifies initial project setup.

Non-interactive mode

For automation scenarios and repeatable workflows, developers can provide all configuration options directly from the command line.

For example:

BASH

sf new my-vue-app --framework vue --type ts --template scheduler --theme tailwind3 --styling scss

This command creates a Vue TypeScript application using the Scheduler template, Tailwind 3 theme, and SCSS styling.

Because all options are explicitly defined, this workflow is especially useful for build pipelines, team standards, and CI/CD environments.

Create applications with templates and themes

One of the primary benefits of Syncfusion CLI is the ability to generate a fully configured application in a single command.

Example: Create a React Application

BASH

sf new my-react-app --framework react --type ts --template grid --theme material3

This command creates a React TypeScript application with the Syncfusion Grid component and Material 3 theme already configured.

After setup, you can run the project to view the generated application workspace and the ready-to-use Grid component, as shown below.

React application workspace created with Syncfusion CLI

Syncfusion Grid component generated from the selected template

Read the full blog post on the Syncfusion Website

Introducing Project Manager in Code Studio: Structured AI Development

Lucy Muturi — Thu, 06 Aug 2026 11:39:17 +0000

TL;DR: Have you ever looked back at AI-generated code and wondered why a particular decision was made? While AI can generate code quickly, specifications, reviews, and implementation context are often lost in the process. Project Manager in Syncfusion Code Studio brings structure to AI-assisted development with a Define → Plan → Build → Verify → Review process that keeps requirements, decisions, and validation steps connected to every task. The result is faster delivery, fewer missed steps, and software that’s easier to maintain long after it’s shipped.

Deadline pressure is familiar territory for most developers. You open an AI coding agent, describe a feature, and within minutes there’s code working on your screen. A quick review, a merge, and you’re on to the next task.

The trouble usually starts later.

A few weeks after deployment, a bug appears in production. Someone asks why an authentication flow changed or why a particular implementation decision was made. The code exists, but the context doesn’t. There is no specification, no review history, and no record of the reasoning behind the change.

The problem isn’t AI—it did exactly what it was asked to do.

The real issue is that many AI coding processes focus on generating code while overlooking the practices that help teams deliver reliable software—requirements, planning, verification, security reviews, and decision tracking.

That’s exactly why we’re introducing Project Manager in Syncfusion^®Co de Studio. Instead of treating AI-assisted development as a simple prompt-to-code experience, the newly introduced Project Manager brings a structured software delivery process directly into your coding session, helping teams maintain engineering discipline without adding manual overhead.

What teams lose when AI coding skips the process

Most developers using AI coding tools eventually run into the same challenges:

No specification, no shared understanding: The feature works, but the reasoning behind it disappears. A week or a month later, developers are left reverse-engineering requirements from the code itself.
Security reviews become “Something we’ll do later”: Authentication changes, API integrations, and user input handling often move forward without formal review, not because teams don’t care, but because nothing in the process requires it.
Fast code doesn’t eliminate the need for review: AI can generate code quickly, but it cannot guarantee every architectural decision, edge case, or performance concern has been considered. Without review, technical debt accumulates quietly.
Constant tool switching breaks focus: Specifications live in one tool, tasks in another, reviews elsewhere, and test results somewhere else entirely. Context gets fragmented, and important details get lost.

These aren’t edge cases. They’re common outcomes when AI-assisted development lacks structure.

Project Manager in Code Studio: Bringing SDLC structure into AI-assisted development

Most teams already understand the value of specifications, planning, testing, and reviews. The challenge is keeping those activities consistent when deadlines are tight.

Project Manager addresses this by making the development process part of the coding experience itself.

Instead of moving directly from prompt to code, work progresses through a structured sequence:

Define → Plan → Build → Verify → Review

Every stage creates a record of what was agreed upon, what was built, and how it was validated. The goal isn’t to introduce more processes; it’s to ensure critical steps are no longer easy to skip.

Working architecture of Project Manager in Code Studio

Why not just use any AI tool that generates plans or reviews?

Many AI coding tools can generate plans, specifications, or code reviews when asked. The challenge isn’t creating those artifacts; it’s preserving them after the conversation ends.

A month later, the code may still be there, but the reasoning, approvals, and validation history are often difficult to find.

Project Manager takes a different approach. Every artifact—the specification, implementation plan, verification report, and code review—is saved directly to the repository and linked to the task that produced it. That means the context stays with the project, making changes easier to understand, review, and maintain over time.

Traditional AI vs. Project Manager

Most AI coding tools take you from prompt to code in a single step. The speed is real but so is what can get lost along the way. Here’s how the two approaches compare:

Area	Traditional AI	Project Manager
Process	Prompt → Code	Prompt → Define → Plan → Build → Verify → Review
Specification	None. Build starts immediately	Spec written and approved before any code starts
Task planning	Implied from the prompt	Explicit ordered task list reviewed before build begins
Decision tracking	Decisions lost in chat history	Every decision recorded as a versioned artifact in your repo
Code review	Optional, often skipped under pressure	Structured agent review at every stage before merge
Verification	Manual or skipped	Automated checks run after build: tests, quality, accessibility
Audit trail	Limited or none	Full artifact history: spec, plan, build summary, review, report
Context switching	Spec in one tool, tasks in another, reviews elsewhere	Everything in one panel, inside your editor

The difference is not just process for process’s sake. Each row represents a category of mistake or gap that shows up in production when it is skipped.

Catching problems earlier

AI-generated code is only as good as the information provided to it. A vague prompt can produce code that works while still missing important requirements or edge cases.

The Project Manager introduces checkpoints before code reaches production. Specifications capture assumptions early, planning helps identify gaps, verification validates the implementation, and review provides another layer of quality checks.

This makes it easier to catch problems when they’re still inexpensive to fix rather than after deployment.

Why this matters

Imagine adding multi-factor authentication to a production application. Six months later, another developer needs to modify the login flow. Without any record, they are left guessing why decisions were made. With a spec, a task plan, and a code review saved alongside the code, they can understand what was built and why, without asking anyone.

That is the real value of Project Manager. It is not just about generating code faster. It is about keeping the context, the decisions, and the evidence of quality long after the code is merged. That record matters across situations teams encounter regularly:

Production incidents: Trace what changed, why it changed, and what was checked before it shipped.
Compliance audits: Show proof that security reviews happened, requirements were documented, and testing was completed.
Onboarding new developers: New hires can read the reasoning behind decisions without pulling in a senior developer to explain.
Regulated industries: Provide formal documentation of the design and review process before changes go to production.
Security reviews: Demonstrate that authentication changes and input handling were reviewed and signed off before merging.

Project Manager produces this record automatically as a normal part of getting work done.

Walking through a real feature build: Adding CSV export to a bug tracker

To see how Project Manager works in practice, let’s use a realistic example.

Imagine you’re working on an internal bug tracker with three statuses:

Open
In Progress
Fixed

Users can filter issues by status, and the next request is straightforward: add a CSV Export button that downloads the currently filtered results so the team can analyze them in Excel.

Step 1: Opening the panel and setting up your project

Open the *Project Manager * panel from the Code Studio settings. The first thing you see is a welcome screen with two options:

Set up existing project: Scans your workspace and creates project knowledge files automatically.
Start new project: For new projects where the agent helps you set everything up from scratch.

Since the bug tracker project already exists, we can choose the  Set Up Existing Project option. The agent scans your workspace:

Folder structure,
Component names,
Tech stack, and
coding patterns.

Then, it creates a set of knowledge files inside your project with the required details:

architecture.md: Component structure and state management approach.
stack.md: Frameworks, libraries, and tooling versions.
conventions.md: Naming patterns, styling approach, and test patterns.
boundaries.md: Rules like “never use class components” or “always wrap localStorage calls in try-catch”.
codestudio-instructions.md: A combined context file the agent uses on every task going forward.

This setup only takes a minute, but it gives the AI agent something many coding assistants lack: a working understanding of your codebase before implementation begins.

Setting up the project

Step 2: Describe the requirement

Next, you create a new task and enter:

_“ Add an Export CSV button for this bug tracker application. Clicking it downloads the issues currently visible based on the active filter — Open, In Progress, or Fixed.” _

That’s the only instruction required.

From this point forward, the Project Manager guides the task through a structured development process.

Step 3: Define: Align on requirements before writing code

“Every successful implementation starts with a shared understanding of what is being built.”

As soon as you submit the CSV export request, the Project Manager enters the Define stage. The remaining stages: Plan, Build, Verify, and Review stay locked until the requirements are approved.

The agent does three things in sequence:

Scans your codebase: It reads your knowledge files, understands your component structure, and figures out where the export feature fits in your existing code.
Creates a spec: Based on your prompt and its codebase scan, it writes a  spec.md  covering what is being built, the key design decisions, and a list of assumptions it has made.
Asks for your approval: The spec appears as an artifact (“CSV Export Feature Specification”) with a  Review  badge. You click it, read through the document, and decide whether it matches what you actually want.

The spec covers the button placement, file contents, filter handling, and the key assumptions validated, before a single line of code is written. Read through it, confirm it matches what you want, and click Approve & Continue.

Note: This stage does not always run. The agent reads your task description and decides automatically. Adding a new feature? Define runs. Fixing a typo or a minor config value? It skips. If you want the Define stage to always run for every task, you can configure that in the Settings tab.

Define stage

Read the full blog post on the Syncfusion Website

Build an Excel-Like Spreadsheet in .NET MAUI Using Blazor Hybrid

Lucy Muturi — Wed, 05 Aug 2026 12:39:08 +0000

TL;DR: Learn how to build an Excel‑like spreadsheet UI inside a .NET MAUI app using Blazor Hybrid to deliver consistent cross‑platform data editing, reusable web components, and a maintainable app architecture with native performance and better UX.

Delivering a consistent and modern user experience across mobile and desktop platforms has become essential for today’s business applications. With .NET MAUI Blazor Hybrid, you can build apps for web, desktop, Android, iOS, and macOS using a single shared codebase. This reduces duplication, simplifies maintenance, and significantly accelerates development.

In this blog, we’ll explore how to integrate the Syncfusion^® Blazor Spreadsheet component into a .NET MAUI Blazor Hybrid application to deliver an Excel-like experience across all platforms.

Why use a Spreadsheet UI in a .NET MAUI App?

A spreadsheet interface makes sense when users need flexible, cell-based editing rather than row-by-row data entry. Compared to a standard DataGrid, a spreadsheet UI is better suited for:

Financial or budgeting apps where formulas are required
Data entry tools with copy/paste operations
Reporting or planning screens where users expect Excel-like behavior
Scenarios where users work with files rather than records

Using Blazor inside .NET MAUI also brings architectural benefits. The UI logic lives in reusable Razor components, while MAUI handles native shell features like navigation, lifecycle, and platform APIs. This approach reduces duplication and keeps the app easier to maintain as it grows.

Prerequisites

Before starting, make sure you have the following set up:

Visual Studio 2026 with .NET MAUI and ASP.NET workloads installed
Latest .NET SDK
Basic familiarity with .NET MAUI and Blazor

Once your environment is ready, the next step is to create a .NET MAUI Blazor Hybrid app and configure it to host a spreadsheet UI.

Create a .NET MAUI Blazor Hybrid App

Let’s begin by creating a new .NET MAUI Blazor Hybrid application. In Visual Studio, create a new project and select the .NET MAUI Blazor Hybrid App template.

Choose the .NET MAUI Blazor Hybrid App template

Enter your project name, choose a location, configure the solution details, and then click Next.

Configure the project name and details

On the next screen, select the target .NET Framework version you want to use and finish creating the project.

Selecting the target .NET framework version

Once the project is created, you’ll see the standard MAUI Blazor Hybrid project structure. This includes:

A standard .NET MAUI project layout
A wwwroot folder for web assets
Razor components rendered through BlazorWebView

Default MAUI Blazor Hybrid project template

This project serves as the foundation for hosting Blazor-based UI components inside a native .NET MAUI application.

Install the required NuGet packages

With the project ready, the next step is to add the packages required for the Spreadsheet component. Install the following NuGet packages:

These packages provide the Spreadsheet control itself along with the theme files required for proper styling.

You can install them through the NuGet Package Manager or run the following commands in the Package Manager Console:

Package Manager Console

Install-Package Syncfusion.Blazor.Spreadsheet 
Install-Package Syncfusion.Blazor.Themes

After the installation is complete, you’re ready to register the services required by the Spreadsheet component.

Register Syncfusion services

Before using the Spreadsheet component, you need to register the Syncfusion Blazor services in your MAUI application. Open the MauiProgram.cs file and add the AddSyncfusionBlazor() service registration inside the CreateMauiApp method:

using Syncfusion.Blazor;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.Services.AddSyncfusionBlazor();     
        ...
    }
}

This registration ensures that the required Syncfusion services are available when your application starts.

Read the full blog post on the Syncfusion Website

Real-Time Collaborative Editing in a React Block Editor Using Yjs

Lucy Muturi — Wed, 05 Aug 2026 11:26:11 +0000

TL;DR: Learn how to add real-time collaboration to a React Block Editor using Yjs and WebSockets. This guide walks through building a shared editing experience with live document synchronization, user presence, and remote cursors without implementing custom conflict-resolution logic. You’ll also explore provider selection, production considerations, and best practices for creating reliable multi-user editing experiences.

Most developers think collaborative editing is simple, until they try building it.

Allowing multiple users to edit the same document in real-time involves much more than syncing text. You need to:

Handle concurrent changes,
Keep document state consistent,
Show active users,
Display remote cursors, and
Recover from connection interruptions without losing data.

That’s why features that feel effortless in tools like Google Docs are surprisingly difficult to implement.

If you’re building documentation portals, product specifications, incident reports, contracts, or knowledge bases, real-time collaboration is often a user expectation today.

The good news is that you don’t have to solve these challenges from scratch. The Syncfusion^® React Block Editor provides a collaboration module designed to integrate with Yjs, a CRDT-based framework that manages synchronization and conflict resolution automatically, letting you focus on the editing experience rather than the underlying complexity.

In this guide, we’ll build a real-time collaborative editor using React, TypeScript, Yjs, and WebSockets. We’ll cover document synchronization, user presence, remote cursors, choosing the right Yjs provider, and key considerations for production deployments.

When does real-time collaboration make sense?

Real-time collaboration is ideal when multiple users need to edit the same document simultaneously while seeing live updates, presence indicators, and remote cursors.

Common use cases include:

Product specifications and PRDs,
Legal drafts and contract reviews,
Incident reports and postmortems,
Launch plans and project documentation,
OKR and team planning documents.

However, this approach may not be the best fit for:

Large wiki-style document networks,
Fully offline mobile applications, and
Scenarios that require direct device-to-device CRDT synchronization without a server.

Understanding what “real-time collaboration” actually means

Before diving into the implementation, it’s useful to understand a few concepts that power the collaborative experience.

CRDTs: The foundation of conflict-free editing

At the heart of Yjs is a Conflict-Free Replicated Data Type (CRDT). A CRDT allows multiple users to edit shared content simultaneously while ensuring every participant eventually sees the same document state.

The practical benefit is simple: two users can make changes at the same time without accidentally overwriting one another’s work.

Awareness: Knowing who’s doing what

Collaboration isn’t just about synchronizing content. Users also need context about other participants.

Yjs uses an awareness layer to share temporary information such as:

Cursor positions,
Text selections,
User names, and
Avatar information.

Because awareness data is temporary, it disappears when a user disconnects and doesn’t become part of the document itself.

Shared document state

Actual document content lives inside a shared Y.Doc file. Unlike awareness data, modifications stored in the document persist and can be synchronized across reconnects and future editing sessions.

Together, the shared document and awareness layer create the experience users expect from modern collaborative applications.

Why real-time collaboration matters

Modern editors need to support more than rich text. Users expect teams to create, review, and update content together without worrying about version conflicts or overwritten changes.

The Syncfusion React Block Editor treats content as independent blocks, such as paragraphs, headings, tables, callouts, and code snippets, making it easier to edit and organize content while maintaining a smooth writing experience. When combined with Yjs, both content changes and document structure stay synchronized across connected users.

This enables two key capabilities:

Edit simultaneously without conflicts: Yjs automatically resolves concurrent changes, so that multiple users can work in the same document at the same time.
See collaboration in real-time: Remote cursors, selections, and user presence indicators make it easy to understand who is editing and where changes are happening.

What you get out of the box

The collaboration module builds on Yjs and works alongside existing Block Editor features such as slash commands, rich text formatting, drag-and-drop, mentions, labels, paste cleanup, and accessibility support.

Key capabilities include:

Real-time multi-user editing with automatic conflict resolution.
Live user presence, selections, and remote cursors.
Per-user undo and redo, allowing users to revert only their own changes.
Synchronized rich text formatting, including headings, lists, links, colors, alignment, and inline styles.
Mention and label synchronization with metadata preserved across all users.
Support for multiple Yjs providers, including y-websocket, y-webrtc, Hocuspocus, Liveblocks, PartyKit, and more.

Whether someone is updating text, reordering sections, or adding a new callout block, every connected user sees changes reflected in real-time.

How real-time collaboration works

Behind the scenes, collaboration relies on three components: a shared Yjs document, a provider that synchronizes connected clients, and the Block Editor that renders and updates content.

The process is straightforward:

Each client initializes a Y.Doc file and creates a shared Y.XmlFragment called blockeditor.
A YjsAdapter provides the editor with access to the Yjs runtime and the shared fragment.
A Yjs provider connects all clients to the same collaboration room.
The React Block Editor renders content from the shared fragment and writes local changes back to it. Yjs then automatically synchronizes those changes across all connected clients.
When awareness is enabled, cursor positions, selections, and user information are exchanged through a separate channel.

As a result, multiple users can edit the same document simultaneously while keeping content, structure, and collaboration state synchronized.

Choosing the right Yjs provider

The Yjs provider you choose determines how clients connect, synchronize data, and handle persistence. The best option depends on your deployment requirements, scalability needs, and whether you want to manage the infrastructure yourself.

Provider	Transport	Persistence	Signaling/Auth	Best for
y-webrtc	Peer-to-peer	None by default	Public signaling by default; no auth	Local development, demos, single-session prototypes
y-websocket	WebSocket	None by default	You provide the server and auth	Self-hosted staging and small production
Hocuspocus	WebSocket	Pluggable (Redis, Postgres)	Token-based auth, extensions	Scalable self-hosting with persistence and auth
Liveblocks	Managed WebSocket	Hosted	Hosted auth, REST API	Teams that want a fully managed backend with devtools
PartyKit	Serverless on Cloudflare	Optional Durable Object persistence	Cloudflare auth	Serverless deployments, prototypes with persistence
y-indexeddb	None (local)	Browser only	None	Offline persistence in a single browser

For production environments:

y-websocket offers maximum control,
Hocuspocus adds persistence and authentication capabilities, and
Liveblocks provides a managed collaboration infrastructure with minimal operational overhead.

Build it yourself or start with existing collaboration support?

When planning collaborative editing, it’s easy to underestimate how much work exists beyond the editor UI. Synchronization, conflict handling, user presence, offline recovery, and persistence often require significantly more effort than the editing experience itself.

The table below compares some of the key responsibilities involved in building a collaborative editor from scratch versus using the Syncfusion React Block Editor with Yjs.

Feature	Build yourself	Syncfusion + Yjs
CRDT	Design and implement CRDT, merge strategies, and conflict resolution from scratch.	Uses Yjs's production-tested CRDT with automatic conflict-free synchronization.
Real-time synchronization	Build custom synchronization, diffing, patch generation, and nested content updates.	Automatic incremental synchronization for content, properties, and document structure.
Presence & collaboration	Implement cursors, selections, user awareness, and presence using custom protocols.	Built-in real-time cursors, selections, user presence, and awareness through Yjs.
Provider & offline sync	Build custom WebSocket messaging, offline persistence, and multi-device synchronization.	Built-in WebSocket providers, offline persistence, and seamless multi-device synchronization.
Production readiness	Requires validation for scalability, offline support, conflict recovery, and performance.	Enterprise-ready with proven scalability, offline synchronization, and automatic recovery.

Building a collaborative editor involves much more than rendering content. By combining the Syncfusion React Block Editor with Yjs, you can focus on creating user-facing features while relying on a proven foundation for synchronization, presence, and shared editing experiences.

Building a real-time collaborative React Block Editor using Yjs

Let’s build a collaborative editor using Vite, React, TypeScript, Yjs, and the Block Editor.

Step 1: Create the project

Start by scaffolding a new React TypeScript application and installing the required packages:

npm create vite@latest collab-editor -- --template react-ts    
cd collab-editor    
npm install @syncfusion/ej2-react-blockeditor yjs y-websocket

Step 2: Configure the editor theme

Next, replace the contents of the src/index.css file with the following imports:

src/index.css

@import "@syncfusion/ej2-base/styles/tailwind3.css"; 
@import "@syncfusion/ej2-inputs/styles/tailwind3.css"; 
@import "@syncfusion/ej2-popups/styles/tailwind3.css";
@import "@syncfusion/ej2-buttons/styles/tailwind3.css"; 
@import "@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "@syncfusion/ej2-react-blockeditor/styles/tailwind3.css";

If your application already uses a different design system, replace tailwind3 with themes such as fluent, material, bootstrap5, material-dark, or bootstrap5-dark to match the rest of your UI.

Step 3: Create a collaboration hook

To keep the editor integration clean, create a dedicated collaboration hook. This hook manages the Y.Doc, shared Y.XmlFragment, Yjs provider, and the collaboration adapter throughout the component’s lifecycle, and automatically cleans up resources when the component is unmounted.

Refer to the code in the src/hooks/useCollaboration.ts. file

Step 4: Connect the editor

With the collaboration hook in place, the final step is to connect it to the Block Editor.

The following src/App.tsx file brings everything together by integrating the collaboration hook, rendering the editor, and displaying collaboration details such as connection status and active users. Once configured, multiple clients connected to the same room can edit the document in real-time.

Refer to the code in the src/App.tsx file and run the application.

Read the full blog post on the Syncfusion Website

Why AI Struggles with Multi-Repository Projects and How Code Studio Helps

Lucy Muturi — Mon, 03 Aug 2026 12:08:13 +0000

TL;DR: Modern applications often span multiple repositories, making it difficult for AI assistants to understand the full architecture. Learn how Code Studio multi-repo workspaces and repository-level instructions provide the context AI needs to generate more consistent code, reduce integration issues, and streamline cross-repository development workflows.

You ask your AI assistant to build a new feature.

The backend endpoint gets generated in seconds. The frontend component looks correct. Everything compiles. Then you connect the pieces and discover that the API response doesn’t match what the frontend expects. A utility function gets recreated even though it already exists elsewhere. The code works, but not together.

If this sounds familiar, you’re not alone.

As AI becomes a bigger part of everyday development, many teams are discovering a new challenge: modern applications rarely live in a single repository. Frontends, backends, shared libraries, and infrastructure often exist in separate codebases, while most AI tools still perform best with complete context.

That’s where multi-repo workspaces in Syncfusion^® Code Studio can make a significant difference.

In this guide, you’ll learn how to work across multiple repositories in Code Studio, provide AI with the context it needs, and generate code that fits naturally into your entire system instead of a single project.

Why AI struggles in multi-repository projects

Most development teams split applications across multiple repositories for good reasons:

Independent release cycles
Clear ownership boundaries
Separate deployment pipelines
Better scalability for large teams

A typical application may look like this:

Frontend Repository
Backend Repository
Shared Components Repository
Infrastructure Repository

While this structure works well for teams, it creates a challenge for AI-assisted development.

When AI only sees one repository, it lacks visibility into:

API contracts defined elsewhere
Shared business logic
Existing utilities
Team-wide architectural conventions
Dependencies between repositories

The result is often code that works in isolation but creates integration issues later.

Common symptoms include:

Frontend and backend mismatches
Duplicate implementations
Inconsistent coding patterns
Increased review and refactoring effort

The underlying issue isn’t code quality. It’s missing context.

What are multi-repo workspaces?

A multi-repo workspace allows multiple Git repositories to be opened and managed together within a single development environment.

The repositories remain independent:

Separate Git histories
Separate branches
Separate deployments

But developers gain a unified workspace where related projects are visible side by side.

For AI-assisted development, this creates an important advantage: the assistant can understand how different parts of the system connect instead of making decisions based on a single repository.

Setting up a multi-repo workspace in Code Studio

Let’s use a practical example.

Suppose you’re working on a Conduit-style article-sharing platform that consists of:

conduit-frontend
conduit-backend

Step 1: Open the first repository

Launch Code Studio and open your backend repository.

File → Open Folder
Select your backend project directory.

Step 2: Add additional repositories

Next, add the frontend repository to the same workspace.

File → Add Folder to Workspace
Select the frontend repository.

Your workspace now contains both projects.

Adding the frontend repository in Code Studio

Step 3: Save the workspace

To avoid repeating the setup process: File → Save Workspace As
Save it with a meaningful name such as: Conduit-Multi-Repo
The next time you open Code Studio, both repositories load automatically.

Your workspace now provides a complete view of the application rather than isolated projects.

Saving the workspace in Code Studio

Help AI understand your architecture

Opening multiple repositories is only part of the solution.

The next step is helping AI understand how those repositories are organized.

Code Studio supports custom instruction files located at: .codestudio/codestudio-instructions.md

Think of these files as onboarding documentation written specifically for AI.

Instead of forcing the assistant to infer patterns from source code alone, you provide clear guidance about your architecture, conventions, and workflows.

Example backend instructions

Your backend instruction file might include:

Technology stack
Folder structure
API design standards
Response formats
Error handling patterns
Existing endpoint conventions

Example:

Tech Stack:
Node.js + Express

API Response Format:
{
    "success": true,
    "data": {}
}

Error Responses:
404 - Resource not found
422 - Validation error
500 - Server error

Example frontend instructions

Your frontend instructions might define:

Component organization
Routing strategy
Styling conventions
API integration patterns
State management approach

Example:

Framework:
React 18 + Vite

Styling:
CSS Modules only

Components:
components/

Pages:
pages/

Routing:
React Router v6

These instructions provide context that source code alone may not communicate effectively.

Read the full blog post on the Syncfusion Website

How to Implement PAdES Digital Signatures in .NET for Long-Term PDF Validation

Lucy Muturi — Thu, 30 Jul 2026 12:45:50 +0000

TL;DR: Build compliant, long‑lasting PDF signing in .NET using PAdES standards, covering timestamps, long‑term validation (LTV), and archival protection, so signed documents remain verifiable, audit‑ready, and reliable even years after certificate expiry.

PDFs move quickly through approvals, customers, and automated workflows. Everything looks fine until someone opens the document years later and sees “Signature validity unknown.”

That’s the real problem with basic digital signatures. They can prove a document hasn’t been altered, but they can’t always prove when it was signed or whether the certificate was trusted at the time.

Certificates expire.
CAs rotate keys.
Revocation servers disappear.

Without preserved validation evidence, even a legitimate signature can fail an audit.

This is exactly the gap that PAdES digital signatures are designed to solve.

In this guide, we’ll break down how PAdES works and walk through implementing each PAdES level in .NET with the Syncfusion^® .NET PDF Library, from a basic signature to long‑term, archival‑grade validation using practical, real‑world examples.

What is PAdES, and why basic PDF signatures fail

PAdES (PDF Advanced Electronic Signatures) is an ETSI standard (EN 319 142) created for long‑term trust in signed PDF documents. Unlike simple signatures, PAdES allows a PDF to carry its own verification evidence, enabling validation of the signature years later, even without network access.

At a high level, PAdES enables PDFs to be:

Self-contained: Signature, certificates, and validation data live inside the document
Tamper-evident: Any post‑signing change is detectable
Time-provable: Trusted timestamps prove when the signature happened
Audit-ready: Aligned with eIDAS and other regulatory frameworks
Multi-signature friendly: Suitable for sequential or multi‑party workflows

If you’re building document workflows for finance, healthcare, government, or enterprise SaaS, basic signatures are rarely enough. PAdES is what keeps those documents verifiable long after the original certificate has expired.

PAdES signature levels

PAdES defines a progression of signature levels. Each level adds protection on top of the previous one.

PAdES B-B: Basic signature

The PDF is signed using an X.509 certificate to ensure integrity, but no trusted timestamp or validation evidence is embedded.

Protects against tampering
Breaks once the certificate expires

PAdES B-T: Timestamped signature

Adds a trusted RFC 3161 timestamp from a Timestamp Authority (TSA), proving when the signing occurred.

Proves signing time
Helps with non‑repudiation
Still depends on external revocation checks later

PAdES B-LT: Long-Term Validation (LTV)

Embeds the certificate chain and revocation data (OCSP/CRL) directly into the PDF’s Document Security Store (DSS).

Verifiable years later
Works offline
Survives certificate expiry

PAdES B-LTA: Archival signature

Adds a document‑level archival timestamp over the entire validation material, protecting the document for decades even as cryptographic algorithms age.

Designed for long‑term archives
Resistant to algorithm decay
Common in the public sector and regulated records

Syncfusion PDF Library: PAdES-ready signing for .NET

Our PDF Library provides PAdES‑ready signing across .NET platforms, supporting timestamps, LTV, and archival protection with clean, developer-friendly APIs. It enables secure, compliant, and long-term-trustworthy signing workflows with minimal integration effort.

Secure PDF signing with PAdES in .NET

What Syncfusion enables for PAdES

Standards-based signing: CMS/CAdES support with SHA-256, SHA-384, and SHA-512.
Trusted timestamping: Add RFC 3161 timestamps to prove the signing moment.
Long-term validation (LTV): Embed OCSP, CRL, and certificate chain data into the DSS.
Archival protection (LTA): Add document‑level timestamps for multi‑decade retention.
Flexible certificates: Works with PFX, Windows store, HSM devices, and PKCS#11 keys.
Server-side automation: Runs on Windows, Linux, and Docker without UI interaction.

Now, let’s look at how PAdES signing works at a high level and how to implement each level using our PDF Library.

Implementing PAdES digital signatures

With the Syncfusion PDF Library, adding PAdES signatures in .NET becomes simple and straightforward. The following steps walk you through loading a certificate, applying CAdES, and enabling timestamps and LTV/LTA to build a secure signing workflow.

Step 1: Create a new project

Start a new console application on .NET Core.

Step 2: Install required packages

Add the Syncfusion.Pdf.Net.Core NuGet package to your project

Step 3: Include required namespaces

In your Program.cs file, include the essential namespaces.

using Syncfusion.Pdf.Parsing;
using Syncfusion.Pdf.Security;
using Syncfusion.Pdf;
using Syncfusion.Pdf.Graphics;
using Syncfusion.Drawing;

Step 4: Add a basic digital signature

This is the foundation for all higher PAdES levels.

//Load existing PDF document.
using (PdfLoadedDocument loadedDocument =
    new PdfLoadedDocument(Path.GetFullPath(@"Data/pdf-succinctly.pdf")))
{
    //Load digital ID with password.
    FileStream certificateStream = new FileStream(
        Path.GetFullPath(@"Data/PDF.pfx"),
        FileMode.Open,
        FileAccess.Read);
    PdfCertificate pdfCert = new PdfCertificate(
        certificateStream,
        "syncfusion"
    );

    //Create a signature using a loaded digital ID.
    PdfSignature signature = new PdfSignature(
        loadedDocument,
        loadedDocument.Pages[0],
        pdfCert,
        "Signature"
    );

    //Save the PDF document
    loadedDocument.Save(
        Path.GetFullPath(@"Output/Output.pdf")
    );

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

Digitally signed PDF with .NET PDF Library

PAdES B-B: Applying CAdES standard to the signature

CAdES (CMS Advanced Electronic Signatures) is an ETSI standard that enhances signature security and compatibility. By default, our PDF Library%2C%20and%20Windows%20store%20certificates. ".NET PDF Library - Digital Signatures") signs using CMS with SHA-256, but you can easily switch the cryptographic standard and hashing algorithm through PdfSignatureSettings to achieve your preferred level of enhanced security.

//Load existing PDF document.
using (PdfLoadedDocument loadedDocument =
    new PdfLoadedDocument(Path.GetFullPath(@"Data/pdf-succinctly.pdf")))
{
    //Load digital ID with password.
    FileStream certificateStream = new FileStream(
        Path.GetFullPath(@"Data/PDF.pfx"),
        FileMode.Open,
        FileAccess.Read);
    PdfCertificate pdfCert = new PdfCertificate(
        certificateStream,
        "syncfusion");

    // Create a signature using a loaded digital ID.
    PdfSignature signature = new PdfSignature(
        loadedDocument,
        loadedDocument.Pages[0],
        pdfCert,
        "Signature");

    //Change the digital signature standard and hashing algorithm.
    PdfSignatureSettings settings = signature.Settings;
    settings.CryptographicStandard = CryptographicStandard.CADES;
    signature.Settings.DigestAlgorithm = DigestAlgorithm.SHA512;

    //Save the PDF document
    loadedDocument.Save(
        Path.GetFullPath(@"Output/Output.pdf"));

    //Close the document
    loadedDocument.Close();
}

PAdES B-B signature in a PDF documen

Read the full blog post on the Syncfusion Website