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 three main components:
- Editor (
treege/editor) - Visual editor for building workflow with a drag-and-drop interface - Web Renderer (
treege/renderer) - Runtime component for displaying trees as interactive forms with built-in validation and security - React Native Renderer (
treege/renderer-native) - Full React Native support for mobile applications
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
- 16 input types with full validation support
- Cross-platform: Full support for React Web and React Native
- Built-in security: XSS protection with DOMPurify sanitization
- Automatic validation: Required fields, pattern matching, and custom validators
- Dynamic forms: Field visibility based on conditional logic
- HTTP integration: Built-in API integration with response mapping
- Fully customizable: Override any component with your own
- Dark/light mode support out of the box
Quick Links
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