<p align="center"> <img src="Flowy.png" alt="Flowy Logo" width="128" height="128"> </p> <h1 align="center">VIOVNL.Flowy.Blazor</h1> <p align="center"> <a href="https://github.com/VIOVNL/Flowy.Blazor/actions/workflows/ci-build.yml"><img src="https://github.com/VIOVNL/Flowy.Blazor/actions/workflows/ci-build.yml/badge.svg" alt="Build Status"></a> <a href="https://www.nuget.org/packages/VIOVNL.Flowy.Blazor"><img src="https://img.shields.io/nuget/v/VIOVNL.Flowy.Blazor.svg?style=flat&logo=nuget" alt="NuGet Version"></a> <a href="https://www.nuget.org/packages/VIOVNL.Flowy.Blazor"><img src="https://img.shields.io/nuget/dt/VIOVNL.Flowy.Blazor.svg?style=flat&logo=nuget" alt="NuGet Downloads"></a> <a href="https://github.com/VIOVNL/Flowy.Blazor/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-GPL%20v3%20%2F%20Commercial-blue.svg" alt="License"></a> <a href="https://dotnet.microsoft.com/download"><img src="https://img.shields.io/badge/.NET-8.0%20%7C%209.0-512BD4?logo=dotnet" alt=".NET 8.0 | 9.0"></a> </p> <p align="center"> A beautiful and interactive hierarchical tree visualization component for Blazor applications. Perfect for building family trees, organization charts, decision trees, and any hierarchical data structure with an intuitive drag-and-drop interface. </p>

✨ Features

🎯 Drag & Drop - Intuitive node manipulation with visual drop zones
🔄 Auto Layout - Automatic hierarchical positioning with smooth animations
🔍 Zoom & Pan - Interactive canvas navigation with momentum scrolling
🎨 Custom Templates - Rich Blazor RenderFragment support for node content
💾 JSON Serialization - Export and import entire tree structures
⚡ High Performance - ES6 modular architecture with optimized rendering
🎭 Two-Way Binding - Reactive parameters with @bind-ZoomLevel support
✅ Validation System - Custom drop target validation with callbacks
💧 Visual Effects - Built-in droplet flow animations along tree paths
🔒 Node Control - Granular control over draggability and child acceptance
📊 Comprehensive Events - Rich event system for tracking all interactions

📦 Installation

dotnet add package VIOVNL.Flowy.Blazor

Or via Package Manager Console:

Install-Package VIOVNL.Flowy.Blazor

📚 Documentation

For detailed usage instructions, configuration options, and examples, see the Complete Documentation →

📄 License

This project uses a dual licensing model:

Open Source License (GPL v3)

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3. See LICENSE file for full details.

Commercial License

If you want to use Flowy.Blazor to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.

Purchase Commercial License →

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🔗 Links

Repository: https://github.com/VIOVNL/Flowy.Blazor
Issues: https://github.com/VIOVNL/Flowy.Blazor/issues
NuGet: https://www.nuget.org/packages/VIOVNL.Flowy.Blazor

Flowy.Blazor

Install / Use

README