A powerful, feature-rich node editor control for Avalonia UI applications

Nodify.Avalonia is a comprehensive node editor library that enables you to create visual programming interfaces, data flow diagrams, and interactive graph-based applications in Avalonia UI. Built with performance and extensibility in mind, it provides a rich set of controls for creating professional node-based editors.

<PackageReference Include="Nodify.Avalonia" Version="1.0.2" />

Or via Package Manager Console:

Install-Package Nodify.Avalonia

<nodify:NodifyEditor ItemsSource="{Binding Nodes}"
                     Connections="{Binding Connections}"
                     PendingConnection="{Binding PendingConnection}"
                     SelectedItems="{Binding SelectedNodes}" />

• MVVM-First Design - Built from the ground up to work seamlessly with MVVM patterns
• Zero External Dependencies - Only depends on Avalonia UI
• High Performance - Optimized rendering and interaction handling for large node graphs
• Extensible Architecture - Highly customizable with dependency properties and styling

• Built-in Themes - Professional dark and light themes included
• Flexible Styling - Comprehensive theming system with customizable templates
• Connection Types - Multiple connection styles: straight lines, bezier curves, and circuit-style
• Node Shapes - Support for various node shapes and custom templates

• Multi-Selection - Select multiple nodes with rectangle selection or Ctrl+click
• Zooming & Panning - Smooth zooming with mouse wheel and panning with middle mouse button
• Auto-Panning - Automatic panning when dragging near viewport edges
• Keyboard Shortcuts - Full keyboard support for common operations
• Undo/Redo Ready - Command-based architecture supports undo/redo implementations

• Visual Connection Creation - Drag from connectors to create connections visually
• Pending Connections - Preview connections while dragging
• Connection Validation - Customizable connection rules and validation
• Multiple Connection Types - Support for different connection styles and behaviors

• Grouping & Comments - Group nodes together and add comment nodes
• Decorators Layer - Overlay custom UI elements on the editor
• State Management - Built-in state system for handling different interaction modes
• Performance Optimizations - Virtualization and rendering optimizations for large graphs
• Grid Snapping - Optional grid snapping for precise node placement

See Nodify.Avalonia in action:

A functional calculator built with visual programming nodes:

Interactive playground showcasing all features:

This repository includes two comprehensive example applications:

A visual calculator where you can:

• Create mathematical operation nodes
• Connect operations to build complex calculations
• Group operations for organization
• Use various mathematical functions (Add, Multiply, Divide, Pow, etc.)

Key Controls:

• Right Click: Show operations menu (create nodes)
• Delete: Delete selected nodes
• C: Group selected operations
• Ctrl+T: Toggle theme

An interactive demonstration featuring:

• All editor features and capabilities
• Customizable settings panel
• Theme switching
• Performance testing with large node graphs
• Various node types and connection styles

The main editor control that hosts nodes and connections:

<nodify:NodifyEditor ItemsSource="{Binding Nodes}"
                     Connections="{Binding Connections}"
                     ViewportZoom="{Binding ZoomLevel}"
                     ViewportLocation="{Binding PanOffset}" />

Represents individual nodes in the editor:

<Style Selector="nodify|ItemContainer">
    <Setter Property="Location" Value="{Binding Position}" />
    <Setter Property="IsSelected" Value="{Binding IsSelected}" />
</Style>

• Connection - Basic connection between nodes
• LineConnection - Straight line connections
• CircuitConnection - Circuit-style right-angle connections
• PendingConnection - Temporary connections while dragging

Input and output ports for nodes:

<nodify:Connector IsConnected="{Binding IsConnected}"
                  Anchor="{Binding Position}" />

Nodify.Avalonia offers extensive customization through dependency properties:

• ViewportZoom - Current zoom level
• MinViewportZoom / MaxViewportZoom - Zoom limits
• ViewportLocation - Pan offset
• DisablePanning / DisableZooming - Disable interactions

• EnableRealtimeSelection - Update selection while dragging
• SelectedItems - Currently selected items
• DisableAutoPanning - Disable auto-pan at edges

• GridCellSize - Grid snap size
• ConnectionTemplate - Custom connection appearance
• DisplayConnectionsOnTop - Z-order for connections

• EnableRenderingOptimizations - Optimize for large graphs
• EnableDraggingOptimizations - Optimize dragging performance

Built-in themes with full customization support:

<Application.Styles>
    <FluentTheme />
    <StyleInclude Source="avares://Nodify.Avalonia/Themes/Controls.xaml"/>
</Application.Styles>

<Style Selector="nodify|NodifyEditor">
    <Setter Property="Background" Value="#1E1E1E" />
    <Setter Property="ConnectionTemplate" Value="{StaticResource CustomConnectionTemplate}" />
</Style>

1. Clone the repository
2. Open Nodify.Avalonia.sln in your IDE
3. Build and run the example applications

This project is licensed under the MIT License - see the LICENSE file for details.

If you find Nodify.Avalonia useful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting issues
• 💡 Suggesting new features
• 🔄 Contributing code improvements

Made with ❤️ for the Avalonia community