Quick Start

import { useState } from "react"
import { TreegeEditor } from "treege/editor"
import { TreegeRenderer } from "treege/renderer"
import type { Flow, FormValues } from "treege"

export default function MyForm() {
  const [flow, setFlow] = useState<Flow | null>(null)
 
  const handleSave = (flowData: Flow) => {
    setFlow(flowData)
  }
 
  const handleSubmit = (values: FormValues) => {
    console.log("Form submitted:", values)
  }
 
  // ...
}

return (
  <div>
    {/* Editor for building the tree */}
    <TreegeEditor onSave={handleSave} />
 
    {/* Renderer for displaying the form */}
    {flow && (
      <TreegeRenderer
        flows={flow}
        onSubmit={handleSubmit}
      />
    )}
  </div>
)

"use client"
 
import { useState } from "react"
import { TreegeEditor } from "treege/editor"
import { TreegeRenderer } from "treege/renderer"
import type { Flow, FormValues } from "treege"
 
export default function ContactForm() {
  const [flow, setFlow] = useState<Flow | null>(null)
 
  const handleSave = (flowData: Flow) => {
    setFlow(flowData)
    console.log("Flow saved:", flowData)
  }
 
  const handleSubmit = async (values: FormValues) => {
    console.log("Form submitted:", values)
    // Send data to your backend
    await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(values)
    })
  }
 
  return (
    <div className="grid grid-cols-2 gap-4">
      {/* Editor Panel */}
      <div>
        <h2>Editor</h2>
        <TreegeEditor
          onSave={handleSave}
          flow={flow}
          theme="dark"
        />
      </div>
 
      {/* Preview Panel */}
      <div>
        <h2>Preview</h2>
        {flow && (
          <TreegeRenderer
            flows={flow}
            onSubmit={handleSubmit}
            theme="dark"
            validationMode="onSubmit"
          />
        )}
      </div>
    </div>
  )
}