How to add HTML nodes in symbol palette of JavaScript Diagram?

This article explains how to add HTML nodes in the symbol palette of the JavaScript Diagram. In the JavaScript Diagram & symbol palette, you can add an HTML node. HTML elements can be embedded in the diagram using the HTML type node. The shape property of the node allows you to set the type of node, and to create an HTML node, it should be set as HTML. The following code explains how an HTML node is created. Please refer to the following code example for how to define an HTML node.

var htmlShapes=[   {
       // Size of the node.
       id: "html",
       width: 100,
       height: 100,
       shape: {
           type: 'HTML',
           content: '<div style="background: #6BA5D7;height:100%;width:100%;"><button type="button" style="width:100px"> Button</button></div>'
       },
   }]

The SymbolPalette displays a collection of palettes. The palette shows a set of nodes and connectors. It allows dragging and dropping the nodes and connectors into the diagram. A palette allows displaying a group of related symbols, and it textually annotates the group with its header. By using the palette’s symbols property, you can define the HTML symbols so that the defined HTML node is displayed in the symbol palette. Please refer to the following code sample for how to define the HTML node in the palette symbols.

var palette = new ej.diagrams.SymbolPalette({
   expandMode: 'Multiple', 
   palettes: [
       { id: 'html', expanded: true, symbols: htmlShapes, 
        title: 'Html Shapes' }
   ],
   width: '100%', height: '471px',
});
palette.appendTo('#symbolpalette');

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to add HTML nodes in the Symbol Palette of a JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation to quickly get started with configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.
​
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
​
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!