How to Add Custom HTML Nodes in Symbol Palette for Blazor Diagram?

This knowledge base article demonstrates how to include custom HTML nodes in the Symbol Palette using the Syncfusion® Blazor Diagram component. By leveraging the SymbolPaletteTemplates property, you can create fully customizable HTML nodes, such as a speedometer gauge, to enhance the functionality of your diagram.

Prerequisites:
Before proceeding, ensure you have a Blazor Server application set up. If you need assistance, you can follow the instructions here: Create Blazor Server application

Implementation Steps:

Step 1: Define the Symbol Palette
Define a SfSymbolPaletteComponent with the required properties such as width, height, and symbol dimensions. Use SymbolPaletteTemplates to define custom templates for the nodes.

<SfSymbolPaletteComponent Width="200px" Height="300px" SymbolWidth="100" SymbolHeight="100" Palettes="@Palettes">
   <SymbolPaletteTemplates>
       <NodeTemplate>
           @{
               <SfCircularGauge Width="100px" Height="100px">
                   <CircularGaugeAxes>
                       <CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="120" Radius="80%">
                           <CircularGaugeRanges>
                               <CircularGaugeRange Start="0" End="40" Color="#30B32D" StartWidth="10" EndWidth="10" />
                               <CircularGaugeRange Start="40" End="80" Color="#FFDD00" StartWidth="10" EndWidth="10" />
                               <CircularGaugeRange Start="80" End="120" Color="#F03E3E" StartWidth="10" EndWidth="10" />
                           </CircularGaugeRanges>
                           <CircularGaugePointers>
                               <CircularGaugePointer Value="65" Radius="60%" PointerWidth="8">
                                   <CircularGaugePointerAnimation Enable="true" />
                                   <CircularGaugeCap Radius="7" />
                                   <CircularGaugeNeedleTail Length="18%" />
                               </CircularGaugePointer>
                           </CircularGaugePointers>
                       </CircularGaugeAxis>
                   </CircularGaugeAxes>
               </SfCircularGauge>
           }
       </NodeTemplate>
   </SymbolPaletteTemplates>
</SfSymbolPaletteComponent> 

Step 2: Define Symbols and Palettes
Create a collection of symbols and palettes to populate the Symbol Palette.

@code {
   DiagramObjectCollection<NodeBase> Symbols = new DiagramObjectCollection<NodeBase>();
   DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();

   protected override void OnInitialized()
   {
       // Define a custom node
       Node node = new Node()
       {
           ID = "CustomNode",
           Shape = new Shape()
           {
               Type = NodeShapes.HTML, // Specify HTML node type
           }
       };
       Symbols.Add(node as NodeBase);

       // Add the node to a palette
       Palettes = new DiagramObjectCollection<Palette>()
       {
           new Palette() { Symbols = Symbols, Title = "Template Shape" },
       };
   }
} 

Key Features:

1. Custom Node Support:
   • Nodes in the Symbol Palette can be customized with HTML content using the NodeTemplate.
2. Enhanced UI Elements:
   • Add visually rich components such as speedometers, progress bars, or other interactive elements.
3. Reusability:
   • Easily drag and drop the custom HTML nodes from the Symbol Palette into the diagram.

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to add custom HTML nodes in the Symbol Palette for Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications.

You can also explore our Blazor Diagram Example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac,, or feedback portal. We are always happy to assist you!