Syncfusion.Blazor.A2UI

Syncfusion.Blazor.A2UI

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:

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

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 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

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

Support and feedback

• For any other queries, reach our Syncfusion® support team or post the queries through the community forums.
• Provide feature request through the Syncfusion® feedback portal

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.

[email protected] | www.syncfusion.com | Toll Free: 1-888-9 DOTNET