Welcome to Treege

Treege is a modern React library for building and rendering interactive workflow. It provides a comprehensive solution for creating complex form flows, decision logic, and conditional workflows through an intuitive visual editor.

What is Treege?

The library is split into two main components:

• Editor (treege/editor) - Visual editor for building workflow with a drag-and-drop interface
• Renderer (treege/renderer) - Runtime component for displaying trees as interactive forms with built-in validation

Key Features

Visual Editor

• Drag-and-drop node interface
• Four node types: Flow, Group, Input, and UI nodes
• Conditional edges with AND/OR operators
• Multi-language support built-in (EN, FR, ES, DE, AR, PT, IT)
• Full TypeScript support

Runtime Renderer

• Automatically generates forms from workflow definitions
• Built-in validation (required fields, pattern matching)
• Dynamic field visibility based on conditional logic
• Customizable components and themes
• Dark/light mode support

Quick Links

• Installation
• Quick Start
• Examples
• Playground
• GitHub Repository

Use Cases

Treege is perfect for:

• Multi-step forms - Complex onboarding flows with conditional steps
• Dynamic surveys - Questionnaires that adapt based on answers
• Configuration wizards - Product setup and customization flows
• Approval workflows - Business process automation
• Medical intake forms - Patient questionnaires with branching logic
• Financial applications - Loan applications with complex validation