Treege Logo
v2.1.0

Command Palette

Search for a command to run...

TypeScript Support

Treege is built with TypeScript and provides comprehensive type definitions.

Core Types

import type {
  Flow,
  FormValues,
  Node,
  Edge,
  InputNode,
  FlowNode,
  GroupNode,
  UINode
} from "treege"

Flow Type

interface Flow {
  nodes: Node[]
  edges: Edge[]
}

Node Types

Input Node

interface InputNode {
  id: string
  type: "input"
  data: {
    label: string | Record<string, string>
    inputType: InputType
    required?: boolean
    pattern?: string
    placeholder?: string | Record<string, string>
    options?: Array<{
      label: string | Record<string, string>
      value: any
    }>
  }
}

Flow Node

interface FlowNode {
  id: string
  type: "flow"
  data: {
    label: string | Record<string, string>
    nextStepId?: string
    previousStepId?: string
  }
}

Edge with Conditions

interface Edge {
  id: string
  source: string
  target: string
  conditions?: {
    operator: "AND" | "OR"
    rules: Array<{
      field: string
      operator: "===" | "!==" | ">" | "<" | ">=" | "<="
      value: any
    }>
  }
}

Component Props

TreegeEditor

interface TreegeEditorProps {
  flow?: Flow | null;
  theme?: "dark" | "light";
  language?: string;
  onExportJson?: () => { nodes: Node[]; edges: Edge[] } | undefined;
  onSave?: (data: Flow) => void;
}

TreegeRenderer

interface TreegeRendererProps {
  components?: TreegeRendererComponents;
  flows?: Flow | Flow[] | null;
  googleApiKey?: string;
  initialValues?: FormValues;
  language?: string;
  theme?: "dark" | "light";
  validationMode?: "onChange" | "onSubmit";
  onChange?: (values: FormValues) => void;
  onSubmit?: (values: FormValues) => 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
      flows={initialFlow}
      onSubmit={handleSubmit}
      theme="dark"
    />
  )
}