TypeScript Support

Treege is built with TypeScript and provides comprehensive type definitions.

Core Types

import type {
  Flow,
  FormValues,
  InputNodeData,
  UINodeData,
  GroupNodeData,
  TreegeNodeData,
  HttpHeaders
} from "treege"

Flow Type

interface Flow {
  id: string
  nodes: Node[]   // Node from @xyflow/react
  edges: Edge[]   // Edge from @xyflow/react
}

Node Data Types

Treege has three node types — "input", "ui", and "group". Each carries a data payload:

Input Node Data

type InputNodeData = {
  type?: InputType        // "text" | "number" | "select" | ... | "submit"
  name?: string
  label?: Translatable    // string | Record<string, string>
  required?: boolean
  pattern?: string
  errorMessage?: Translatable
  placeholder?: Translatable
  helperText?: Translatable
  options?: InputOption[]  // { value: string; label: Translatable; ... }
  multiple?: boolean
  httpConfig?: HttpConfig
  optionsSource?: OptionsSource
  // ...and more (defaultValue, submitConfig, image)
}

UI Node Data

type UINodeData = {
  type?: "title" | "divider"
  label?: Translatable
}

Group Node Data

type GroupNodeData = {
  label: Translatable
}

Edge with Conditions

Conditional edges use type: "conditional" and carry their conditions in data:

type ConditionalEdgeData = {
  label?: string
  conditions?: Array<{
    field?: string
    operator?: "===" | "!==" | ">" | "<" | ">=" | "<="
    value?: string
    logicalOperator?: "AND" | "OR" // combines with the next condition
  }>
  isFallback?: boolean
}

Component Props

TreegeEditor

interface TreegeEditorProps {
  flow?: Flow | null;
  theme?: "dark" | "light";        // default "dark"
  language?: string;
  aiConfig?: AIConfig;
  className?: string;
  extraMenuItems?: ExtraMenuItem[];
  openApi?: OpenApiDocument | string;
  baseUrl?: string;
  headers?: HttpHeaders;
  onSave?: (data: Flow) => void;
  onExportJson?: () => { nodes: Node[]; edges: Edge[] } | undefined;
  onAuthorize?: (headers: HttpHeaders) => void;
  onHeadersChange?: (headers: HttpHeaders) => void;
}

TreegeRenderer

interface TreegeRendererProps {
  components?: TreegeRendererComponents;
  flow?: Flow | null;
  googleApiKey?: string;
  headers?: HttpHeaders;
  initialValues?: FormValues;
  isLoading?: boolean;
  language?: string;
  theme?: "dark" | "light";
  validationMode?: "onChange" | "onSubmit";
  className?: string;
  onChange?: (values: FormValues) => void;
  onSubmit?: (values: FormValues, meta?: Meta) => void;
  validate?: (values: FormValues, nodes: Node<TreegeNodeData>[]) => Record<string, string>;
}

Type-Safe Example

import type { Flow, FormValues } from "treege"
import { TreegeRenderer } from "treege/renderer"
 
interface MyFormProps {
  initialFlow: Flow
  onComplete: (data: FormValues) => Promise<void>
}
 
export default function MyForm({ initialFlow, onComplete }: MyFormProps) {
  const handleSubmit = async (values: FormValues) => {
    await onComplete(values)
  }
 
  return (
    <TreegeRenderer
      flow={initialFlow}
      onSubmit={handleSubmit}
      theme="dark"
    />
  )
}

Tip: Enable strict mode in tsconfig.json for the best type-checking experience.

Command Palette