Node Types

Treege provides four different node types, each serving a specific purpose in building workflow.

Flow Node

Navigation element that controls movement between different sections of your tree.

Use Cases:

• Multi-step forms
• Wizard-like flows
• Section navigation

Properties:

• label: Display name for the step
• nextStepId: ID of the next step
• previousStepId: ID of the previous step

{
  id: "step1",
  type: "flow",
  data: {
    label: "Personal Information",
    nextStepId: "step2"
  }
}

Input Node

Form fields that collect user input. Supports 15+ input types with validation and conditional logic.

Supported Input Types:

• Text inputs: text, email, password, number, textarea
• Selection: select, radio, checkbox
• Boolean: switch
• Date/Time: date, dateRange, time, timeRange
• Other: file, address, http

Properties:

• label: Field label (string or multi-language object)
• inputType: Type of input field
• required: Whether the field is required
• pattern: Regex pattern for validation
• options: Options for select/radio/checkbox
• placeholder: Placeholder text

{
  id: "email",
  type: "input",
  data: {
    label: "Email Address",
    inputType: "email",
    required: true,
    placeholder: "you@example.com"
  }
}

Group Node

Container for organizing multiple nodes together.

Use Cases:

• Grouping related fields
• Creating sections
• Visual organization

{
  id: "personal-info",
  type: "group",
  data: {
    label: "Personal Information",
    description: "Tell us about yourself"
  },
  children: ["name", "email", "phone"]
}

UI Node

Display-only elements that don't collect input.

Properties:

• type: Type of UI element (e.g., "title", "separator")
• label: Content to display

{
  id: "welcome",
  type: "ui",
  data: {
    type: "title",
    label: "Welcome to Our Survey"
  }
}