Syncfusion.Blazor.A2UI 35.1.37

Prefix Reserved
dotnet add package Syncfusion.Blazor.A2UI --version 35.1.37
                    
NuGet\Install-Package Syncfusion.Blazor.A2UI -Version 35.1.37
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Syncfusion.Blazor.A2UI" Version="35.1.37" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Syncfusion.Blazor.A2UI" Version="35.1.37" />
                    
Directory.Packages.props
<PackageReference Include="Syncfusion.Blazor.A2UI" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Syncfusion.Blazor.A2UI --version 35.1.37
                    
#r "nuget: Syncfusion.Blazor.A2UI, 35.1.37"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package Syncfusion.Blazor.A2UI@35.1.37
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Syncfusion.Blazor.A2UI&version=35.1.37
                    
Install as a Cake Addin
#tool nuget:?package=Syncfusion.Blazor.A2UI&version=35.1.37
                    
Install as a Cake Tool

Syncfusion.Blazor.A2UI

Targets License Source

Blazor renderer for the A2UI v0.9 wire protocol. Built on top of Syncfusion.A2UI.Core, this Razor Class Library ships the protocol renderer plus 18 built-in component implementations, and an opt-in set of Syncfusion Syncfusion.Blazor.*-backed component implementations (DataGrid, Chart, Scheduler, Diagram, RichTextEditor, Kanban, …).

Syncfusion.Blazor.A2UI is the renderer. The protocol engine — message processing, state, data binding, catalog, schema validation, reactivity — lives in Syncfusion.A2UI.Core.

Using this package with an AI coding agent

Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:

Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.

Platform reference: https://ai.syncfusion.com/blazor/llms.txt

Install

dotnet add package Syncfusion.Blazor.A2UI

The Syncfusion.A2UI.Core protocol engine is pulled in automatically as a direct NuGet dependency of Syncfusion.Blazor.A2UI, so a separate dotnet add package Syncfusion.A2UI.Core is not required.

Or in your .csproj:

<ItemGroup>
  <PackageReference Include="Syncfusion.Blazor.A2UI" Version="*" />
</ItemGroup>

What's in the package

18 built-in component (Syncfusion.Blazor.A2UI.Components\)

HTML-element fallbacks that match the visual language of the Syncfusion component suite so you can render an A2UI stream end-to-end without depending on a specific Syncfusion.Blazor.* package:

Category Components
Content Text, Image, Icon, Video, AudioPlayer
Layout Row, Column, List, Card, Divider
Containers Tabs, Modal
Inputs Button, TextField, CheckBox, ChoicePicker, Slider, DateTimeInput

All basic components are registered by name through BlazorSyncfusionCatalog.BasicComponents(). Skipping any of them just means messages referencing those names surfaces a A2uiError at validation time.

Syncfusion Sf-component catalog (Syncfusion.Blazor.A2UI.SyncfusionComponents\)

The package also wires the full Syncfusion Blazor component suite — DataGrid, TreeGrid, Charts, HeatMap, Maps, Schedule, Calendars, Buttons, SplitButtons, Gantt, RichTextEditor, Diagram, Kanban, BarcodeGenerator, Inputs, Navigations, Popups, BlockEditor, QueryBuilder, DropDowns, InPlaceEditor, WordProcessor, Spreadsheet and PDF Viewer — all under the same A2UI catalog namespace.

Renderer surfaces

Namespace Purpose
Syncfusion.Blazor.A2UI Top-level Razor surface (SyncfusionA2UIProvider.razor, A2UINodeRenderer.razor)
Syncfusion.Blazor.A2UI.Adapter BlazorComponentAdapter, BlazorComponentImplementation, BlazorComponentRegistry, A2uiResolvedPropsExtensions, EventDispatchHelper
Syncfusion.Blazor.A2UI.Catalog BlazorSyncfusionCatalog, basic DI extensions (AddA2UI)
Syncfusion.Blazor.A2UI.Components 18 built-in HTML-fallback Razor components
Syncfusion.Blazor.A2UI.NodeView SyncfusionA2UIProvider, A2UINodeRenderer, NodeViewContext, NodeViewPropsExtractor, SignalHook
Syncfusion.Blazor.A2UI.Markdown MarkdownService (Markdig-backed static renderer for v0.9 .Text blocks)
Syncfusion.Blazor.A2UI.SyncfusionComponents Opt-in Syncfusion Sf-backed component implementations (AddA2UIWithSyncfusionComponents, EnsureGlobalSyncfusionComponents)

Quick Start

Basic setup

Program.cs (basic 18 + opt-in Syncfusion Sf-backed catalog, requires USE_SYNCFUSION_COMPONENTS):

using Syncfusion.Blazor;
using Syncfusion.Blazor.A2UI.SyncfusionComponents;

builder.Services.AddSyncfusionBlazor();
builder.Services.AddA2UIWithSyncfusionComponents();

The AddA2UIWithSyncfusionComponents extension methods take an optional Action<CatalogRegistry> callback that runs after the default catalog is registered but before the MessageProcessor is built — use it to add additional Catalog instances, register extra functions, or swap the default for a custom catalog id.

_Imports.razor

@using Syncfusion.Blazor.A2UI
@using Syncfusion.Blazor.A2UI.SyncfusionComponents
@using Syncfusion.A2UI.Core

App.razor

<head>
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>

<body>
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

Rendering Architecture

The Blazor renderer uses a Node-View rendering path for all component rendering:

IComponentNode ─▶ SyncfusionA2UIProvider.razor
                     │
                     ▼
               A2UINodeRenderer.razor (recursive)
                     │
                     ▼
        BlazorComponentImplementation.View
                     │
                     ▼
              Syncfusion Component

Key features:

  • Full reactive updates via Signals.Effect
  • Automatic binding lifecycle management
  • Type-safe prop extraction (NodeViewPropsExtractor)
  • Memory-safe signal subscription and disposal
@page "/"
@using System.Text.Json
@using Syncfusion.A2UI.Core.Processing
@using Syncfusion.A2UI.Core.Serialization
@using Syncfusion.A2UI.Core.State
@using Syncfusion.Blazor.A2UI.NodeView
@inject MessageProcessor Processor

<PageTitle>SyncfusionDataGrid sample</PageTitle>

<h1>SyncfusionDataGrid via A2UI</h1>

<SyncfusionA2UIProvider Surface="@surface" />

@code {
    private SurfaceModel? surface;

    protected override void OnInitialized()
    {
        try { Processor.Model.DeleteSurface("orders"); } catch { /* Surface didn't exist */ }
        
        var messages = A2uiJson.ParseMessages(JsonDocument.Parse(Json).RootElement);
        Processor.ProcessMessages(messages);
        surface = Processor.Model.GetSurface("orders");
    }

    private const string Json = """
    {
      "version": "v0.9",
      "messages": [
        { "createSurface": { "surfaceId": "orders", "catalogId": "syncfusion-a2ui-catalog", "sendDataModel": true } },

        { "updateDataModel": {
            "surfaceId": "orders",
            "path": "/orders",
            "value": [
              { "OrderID": 10248, "CustomerID": "VINET",  "Freight":  32.38, "OrderDate": "1996-07-04", "ShipCountry": "France"     },
              { "OrderID": 10249, "CustomerID": "TOMSP",  "Freight":  11.61, "OrderDate": "1996-07-05", "ShipCountry": "Germany"    },
              { "OrderID": 10250, "CustomerID": "HANAR",  "Freight":  65.83, "OrderDate": "1996-07-08", "ShipCountry": "Brazil"     },
              { "OrderID": 10251, "CustomerID": "VICTE",  "Freight":  41.34, "OrderDate": "1996-07-08", "ShipCountry": "France"     },
              { "OrderID": 10252, "CustomerID": "SUPRD",  "Freight":  51.30, "OrderDate": "1996-07-09", "ShipCountry": "Belgium"    },
              { "OrderID": 10253, "CustomerID": "HANAR",  "Freight":  58.17, "OrderDate": "1996-07-10", "ShipCountry": "Brazil"     },
              { "OrderID": 10254, "CustomerID": "CHOPS",  "Freight":  22.98, "OrderDate": "1996-07-11", "ShipCountry": "Switzerland"},
              { "OrderID": 10255, "CustomerID": "RICSU",  "Freight": 148.33, "OrderDate": "1996-07-12", "ShipCountry": "Switzerland"},
              { "OrderID": 10256, "CustomerID": "WELLI",  "Freight":  13.97, "OrderDate": "1996-07-15", "ShipCountry": "Brazil"     },
              { "OrderID": 10257, "CustomerID": "HILAA",  "Freight":  81.91, "OrderDate": "1996-07-16", "ShipCountry": "Venezuela"  },
              { "OrderID": 10258, "CustomerID": "ERNSH",  "Freight": 140.51, "OrderDate": "1996-07-17", "ShipCountry": "Austria"    },
              { "OrderID": 10259, "CustomerID": "CENTC",  "Freight":   3.25, "OrderDate": "1996-07-18", "ShipCountry": "Mexico"     },
              { "OrderID": 10260, "CustomerID": "OTTIK",  "Freight":  55.09, "OrderDate": "1996-07-19", "ShipCountry": "Germany"    },
              { "OrderID": 10261, "CustomerID": "QUEDE",  "Freight":   3.05, "OrderDate": "1996-07-19", "ShipCountry": "Brazil"     },
              { "OrderID": 10262, "CustomerID": "RATTC",  "Freight":  48.29, "OrderDate": "1996-07-22", "ShipCountry": "USA"        }
            ]
        }},

        { "updateDataModel": {
            "surfaceId": "orders",
            "path": "/notifications",
            "value": []
        }},

        { "updateComponents": {
            "surfaceId": "orders",
            "components": [
              {
                "id": "root",
                "component": "Column",
                "children": ["grid", "selected-json"]
              },
              {
                "id": "grid",
                "component": "SyncfusionDataGrid",
                "dataSource": { "path": "/orders" },
                "allowPaging":    true,
                "allowSorting":   true,
                "allowFiltering": true,
                "allowGrouping":  false,
                "allowReordering": true,
                "allowResizing":  true,
                "enableAltRow":   true,
                "enableHover":    true,
                "gridLines":      "Both",
                "clipMode":       "EllipsisWithTooltip",

                "pageSettings": { "pageSize": 10, "pageCount": 5, "currentPage": 1 },
                "filterSettings": { "type": "Excel", "mode": "Immediate" },
                "sortSettings": {
                  "columns": [
                    { "field": "OrderID", "direction": "Ascending" }
                  ]
                },
                "selectionSettings": {
                  "mode": "Row",
                  "type": "Single",
                  "persistSelection": false
                },

                "onRowClick":      "rowClicked",
                "onRowDoubleClick":"rowDoubleClicked",
                "onCellClick":     "cellClicked",
                "onActionBegin":   "actionStarted",
                "onActionComplete":"actionCompleted",
                "onActionFailure": "actionFailed",
                "onDataBound":     "dataBound",
                "onCommandClick":  "commandClicked",

                "columns": [
                  { "field": "OrderID",    "headerText": "Order ID",    "isPrimaryKey": true,
                    "type": "number",   "width": "110", "textAlign": "Right", "format": "N0" },
                  { "field": "CustomerID", "headerText": "Customer",    "width": "140" },
                  { "field": "Freight",    "headerText": "Freight",
                    "width": "120", "textAlign": "Right", "format": "C2" },
                  { "field": "OrderDate",  "headerText": "Order Date",
                    "width": "150", "type": "date", "format": "d" },
                  { "field": "ShipCountry","headerText": "Ship Country","width": "150" }
                ]
              },
              {
                "id": "selected-json",
                "component": "Text",
                "text": { "path": "/selectedRowJson" },
                "variant": "caption"
              }
            ]
        }}
      ]
    }
    """;
}

Targets

TFM Status
net8.0 ✅ Supported
net9.0 ✅ Supported
net10.0 ✅ Supported

C# language version and Razor language version are pinned per-TFM (C# 12 / Razor 7 on net8.0, C# 13 / Razor 8 on net9.0, C# 14 / Razor 9 on net10.0) so a multi-target build never accidentally uses a language feature the older TFMs don't support.

When to use Syncfusion.Blazor.A2UI

Scenario Syncfusion.Blazor.A2UI is for you?
You're consuming an A2UI v0.9 stream inside an existing Blazor app and want a renderer plus the Syncfusion component suite ✅ Yes — install this package alongside Syncfusion.A2UI.Core.
You need a generic Blazor component library with no A2UI involvement ❌ No — try the Syncfusion.Blazor suite.

Support and feedback

License

This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® EULA. You can purchase a license here or start a free 30-day trial here.

About Syncfusion®

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion® has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, WinUI, Flutter and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

sales@syncfusion.com | www.syncfusion.com | Toll Free: 1-888-9 DOTNET

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
35.1.37 30 9/29/2026