NodePanel

This section will explain how to build nodes using Axiom components. Each component serves a specific purpose in structuring the node's layout. The components can be used individually or combined, but each can only be used once within a NodePanel.Root. The NodePanel namespace provides the following slots:

• NodePanel.Root - The main container wrapping panel elements. The rest of the components are optional.
• NodePanel.Header - Node's title, description, icon etc.
• NodePanel.Content - Node's main content
• NodePanel.Handles - Container for interactive handles

On top of it, Axiom offers utility components that can serve as building blocks or provide additional functionality:

• NodeIcon - Displays an icon in the node
• NodeDescription - Helper component labeling the node
• NodeAsPortWrapper - Makes the node interactive as a connection point

In the next sections, we will explore how to use these components to create interactive nodes in React Flow.

note

Diagramming components are framework agnostic and should work with any library. The examples in this section are used with React Flow, but the concepts can be applied to other frameworks as well.

Customization

Basic node structure

The NodePanel provides a structured layout with Header and Content sections.

Adding a Description

Add labels and descriptions using the NodeDescription component.

Adding an Icon

Add icons to nodes using the NodeIcon component.

Adding Handles

Add action buttons with the NodePanel.Handles component. Try connecting the nodes.

Simplifying connections

Make the entire node interactive as a connection point with the NodeAsPortWrapper component.

function Node({ selected }) {
  return (
    <NodePanel.Root selected={selected}>
      <NodePanel.Header>
        Header
      </NodePanel.Header>
      <NodePanel.Content>
        Content
      </NodePanel.Content>
    </NodePanel.Root>
  );
}

Further Reading

These components can be combined and customized to create complex, interactive diagrams for your applications. The modular design allows for flexibility and reusability, making it easy to build consistent and visually appealing nodes throughout your application. If you wanna find out more about the technical choices we've made - check the related decision log.