TreegeRenderer

The TreegeRenderer component transforms workflow into interactive forms with built-in validation and security features.

Import

import { TreegeRenderer } from "treege/renderer"

For React Native applications, use:

import { TreegeRenderer } from "treege/renderer-native"

Props

flows (optional)

The flow data to render as a form. Can be a single Flow or an array of Flows.

flows?: Flow | Flow[] | null

• If a single Flow: renders that flow
• If an array: first flow is the main flow, others are sub-flows available for FlowNodes
• If null or undefined: renders nothing

onSubmit (optional)

Callback function called when the form is submitted.

onSubmit?: (values: FormValues, meta?: Meta) => void

Parameters:

• values: Form values (keyed by field name or node ID)
• meta: Optional metadata about the submission (e.g., HTTP response data)

onChange (optional)

Callback called whenever form values change.

onChange?: (values: FormValues) => void

theme (optional)

Theme for the rendered form.

theme?: "light" | "dark"

Default: "dark"

language (optional)

Current language for translations.

language?: string

Default: "en"

validationMode (optional)

When to trigger validation.

validationMode?: "onSubmit" | "onChange"

Default: "onSubmit"

initialValues (optional)

Initial values for the form fields.

initialValues?: FormValues

components (optional)

Custom component renderers.

components?: TreegeRendererComponents

See Customization for details.

validate (optional)

Custom validation function.

validate?: (values: FormValues, nodes: Node<TreegeNodeData>[]) => Record<string, string>

Parameters:

• values: Current form values
• nodes: All visible nodes in the tree

Returns: Object mapping node IDs to error messages

googleApiKey (optional)

Google Maps API key for address autocomplete.

googleApiKey?: string

If not provided, falls back to free Nominatim (OpenStreetMap).

Security Features

XSS Protection

TreegeRenderer includes built-in protection against Cross-Site Scripting (XSS) attacks using DOMPurify. All user input is automatically sanitized before being rendered to prevent malicious code injection.

Key Features:

• Automatic HTML sanitization for all text inputs
• Protection against script injection
• Safe rendering of user-generated content
• No configuration required - works out of the box

This ensures that even if users input malicious HTML or JavaScript code, it will be safely sanitized before rendering.

// User input with potential XSS
const maliciousInput = "<script>alert('XSS')</script>";
 
// TreegeRenderer automatically sanitizes this
<TreegeRenderer
  flows={flow}
  initialValues={{ comment: maliciousInput }}
/>
// Output: Safe, sanitized text without the script tag

Example

Basic Usage

<TreegeRenderer
  flows={flow}
  theme="dark"
  language="en"
  validationMode="onSubmit"
  onSubmit={(values, meta) => {
    console.log("Form values:", values)
    console.log("Metadata:", meta)
  }}
  onChange={(values) => setFormValues(values)}
  initialValues={{ name: "John", email: "john@example.com" }}
/>

With Custom Components and Validation

<TreegeRenderer
  flows={flow}
  theme="dark"
  onSubmit={(values) => console.log(values)}
  components={{
    inputs: {
      text: CustomTextInput,
      email: CustomEmailInput,
    },
    submitButton: ({ label }) => (
      <button type="submit" className="btn-primary">
        {label || "Submit"}
      </button>
    ),
  }}
  validate={(values, nodes) => {
    const errors: Record<string, string> = {}
 
    if (values.age && values.age < 18) {
      errors.age = "Must be 18 or older"
    }
 
    return errors
  }}
  googleApiKey={process.env.GOOGLE_MAPS_API_KEY}
/>