Treege Logo
v2.1.0

Command Palette

Search for a command to run...

TreegeEditor

The TreegeEditor component provides a visual drag-and-drop interface for building workflow.

Import

import { TreegeEditor } from "treege/editor"

Props

onSave (optional)

Callback function called when the user saves the flow.

onSave?: (flow: Flow) => void

flow (optional)

Initial flow data to load in the editor.

flow?: Flow | null

theme (optional)

Theme for the editor interface.

theme?: "light" | "dark"

Default: "light"

language (optional)

Language for the editor interface.

language?: string

Default: "en"

aiConfig (optional)

AI configuration for tree generation using Gemini API.

aiConfig?: AIConfig

AIConfig structure:

type AIConfig = {
  apiKey: string
}

When provided, enables AI-powered tree generation features in the editor.

onExportJson (optional)

Callback function triggered when exporting JSON data.

onExportJson?: () => { nodes: Node[]; edges: Edge[] } | undefined

Example

Basic Usage

"use client"
 
import { useState } from "react"
import { TreegeEditor } from "treege/editor"
import type { Flow } from "treege"
 
export default function Editor() {
  const [flow, setFlow] = useState<Flow | null>(null)
 
  const handleSave = async (flowData: Flow) => {
    await fetch("/api/flows", {
      method: "POST",
      body: JSON.stringify(flowData)
    })
    setFlow(flowData)
  }
 
  return (
    <div className="h-screen">
      <TreegeEditor
        flow={flow}
        onSave={handleSave}
        theme="dark"
        language="en"
      />
    </div>
  )
}

With AI Configuration

"use client"
 
import { useState } from "react"
import { TreegeEditor } from "treege/editor"
import type { Flow } from "treege"
 
export default function AIEditor() {
  const [flow, setFlow] = useState<Flow | null>(null)
 
  return (
    <div className="h-screen">
      <TreegeEditor
        flow={flow}
        onSave={(flowData) => setFlow(flowData)}
        theme="dark"
        language="en"
        aiConfig={{
          apiKey: process.env.NEXT_PUBLIC_GEMINI_API_KEY || ""
        }}
      />
    </div>
  )
}