### Install FamilyTree JS via NPM

Source: https://github.com/balkangraph/familytreejs/blob/master/README.md

Use this command to install the FamilyTree JS library using NPM.

```bash
npm i @balkangraph/familytree.js
```

--------------------------------

### Basic FamilyTree JS Usage

Source: https://github.com/balkangraph/familytreejs/blob/master/README.md

Include the FamilyTree JS library and initialize a new FamilyTree instance in your HTML. This example sets up basic node binding and defines initial nodes.

```html
<script src="https://balkan.app/js/familytree.js"></script> 
    <div id="tree"/>
    <script>
    var tree = new FamilyTree(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name"
        },
        nodes: [
            { id: 1, pids: [2] },
            { id: 2, pids: [1] },
            { id: 3, mid: 1, fid: 2 }
        ]
    });
    </script>
```

--------------------------------

### Install FamilyTree JS via Bower

Source: https://github.com/balkangraph/familytreejs/blob/master/README.md

Use this command to install the FamilyTree JS library using Bower.

```bash
bower install familytree.js
```

--------------------------------

### Export FamilyTree JS to Multiple Formats

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Use the export methods to save the family tree in PDF, PNG, SVG, CSV, or JSON formats. Customizable options include filename, format, layout, margins, and headers/footers. Event handlers for export start and end are also available.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    nodes: [
        { id: 1, name: "John" },
        { id: 2, mid: 1, name: "Jane" }
    ]
});

// Export to PDF
tree.exportPDF({
    filename: "family-tree.pdf",
    format: "A4",
    landscape: true,
    scale: "fit",
    margin: [10, 10, 10, 10],
    header: "My Family Tree",
    footer: "Page {current} of {total}"
}, function() {
    console.log("PDF exported");
});

// Export to PNG
tree.exportPNG({
    filename: "family-tree.png",
    scale: 2
}, function() {
    console.log("PNG exported");
});

// Export to SVG
tree.exportSVG({
    filename: "family-tree.svg"
}, function() {
    console.log("SVG exported");
});

// Export to CSV
tree.exportCSV("family-tree.csv");

// Export to JSON
tree.exportJSON("family-tree.json");

// Handle export events
tree.onExportStart(function(args) {
    args.styles += '<link href="custom-font.css" rel="stylesheet">';
    console.log("Export starting...");
});

tree.onExportEnd(function(args) {
    console.log("Export completed, ArrayBuffer size:", args.ArrayBuffer.byteLength);
});
```

--------------------------------

### Create Basic FamilyTree Instance

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Initializes a FamilyTree instance with basic node binding and sample data. Requires an HTML element with id 'tree'.

```javascript
var tree = new FamilyTree(document.getElementById("tree"), {
    nodeBinding: {
        field_0: "name",
        field_1: "birthDate",
        img_0: "photo"
    },
    nodes: [
        { id: 1, pids: [2], name: "John Smith", birthDate: "1950-05-15", photo: "john.jpg" },
        { id: 2, pids: [1], name: "Jane Smith", birthDate: "1952-08-22", photo: "jane.jpg" },
        { id: 3, mid: 2, fid: 1, name: "Tom Smith", birthDate: "1975-03-10", photo: "tom.jpg" },
        { id: 4, mid: 2, fid: 1, pids: [5], name: "Sarah Smith", birthDate: "1978-11-28", photo: "sarah.jpg" },
        { id: 5, pids: [4], name: "Mike Johnson", birthDate: "1976-07-04", photo: "mike.jpg" },
        { id: 6, mid: 4, fid: 5, name: "Emily Johnson", birthDate: "2005-01-20", photo: "emily.jpg" }
    ]
});
```

--------------------------------

### Configure State Persistence

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Set up the `state` object to save and restore the tree's view state (scale, position, expanded nodes) across sessions. Options include persistence via URL parameters, localStorage, or IndexedDB.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    state: {
        name: "myFamilyTreeState",
        readFromLocalStorage: true,
        writeToLocalStorage: true,
        readFromIndexedDB: false,
        writeToIndexedDB: false,
        readFromUrlParams: true,
        writeToUrlParams: true
    },
    nodes: [
        { id: 1, name: "Root" },
        { id: 2, mid: 1, name: "Child 1" },
        { id: 3, mid: 1, name: "Child 2" }
    ]
});

// Get current state as URL
var stateUrl = tree.stateToUrl();
console.log("State URL:", stateUrl);

// Clear persisted state
FamilyTree.state.clear("myFamilyTreeState");
```

--------------------------------

### Configure Node Menus in FamilyTreeJS

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Set up context menus, node menus, and circle menus for interactive node options. Define custom actions with text, icons, and click handlers.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    nodeMenu: {
        details: { text: "View Details" },
        edit: { text: "Edit" },
        add: { text: "Add Child" },
        remove: { text: "Remove" },
        customAction: {
            text: "Send Email",
            icon: FamilyTree.icon.share(24, 24, '#333'),
            onClick: function(nodeId) {
                var node = tree.get(nodeId);
                console.log("Sending email to:", node.email);
            }
        }
    },
    nodeContextMenu: {
        copy: { text: "Copy", onClick: function(nodeId) { console.log("Copy:", nodeId); }},
        paste: { text: "Paste", onClick: function(nodeId) { console.log("Paste:", nodeId); }}
    },
    nodeCircleMenu: {
        addChild: {
            icon: FamilyTree.icon.add(24, 24, '#fff'),
            text: "Add Child",
            color: "#4CAF50"
        },
        link: {
            icon: FamilyTree.icon.link(24, 24, '#fff'),
            text: "Create Link",
            color: "#2196F3",
            draggable: true
        }
    },
    nodes: [
        { id: 1, name: "John", email: "john@example.com" }
    ]
});

// Menu UI events
tree.nodeMenuUI.on('show', function(sender, args) {
    console.log("Menu shown for node:", args);
});
```

--------------------------------

### Enable Undo/Redo Operations

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Configure `undoRedoStorageName` to persist operation history in session storage. Use `undo()`, `redo()`, `undoStepsCount()`, `redoStepsCount()`, `clearUndo()`, `clearRedo()`, and `undoRedoUI.onChange()` for managing and observing undo/redo actions.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    undoRedoStorageName: "familyTreeHistory",
    nodes: [
        { id: 1, name: "John" }
    ]
});

// Perform some operations
tree.addNode({ id: 2, mid: 1, name: "Jane" });
tree.updateNode({ id: 1, name: "John Smith" });

// Undo last operation
tree.undo(function() {
    console.log("Undo complete");
});

// Redo last undone operation
tree.redo(function() {
    console.log("Redo complete");
});

// Check available steps
console.log("Undo steps:", tree.undoStepsCount());
console.log("Redo steps:", tree.redoStepsCount());

// Clear history
tree.clearUndo();
tree.clearRedo();

// UI for undo/redo
tree.undoRedoUI.onChange(function(args) {
    console.log("Undo steps:", args.undoStepsCount);
    console.log("Redo steps:", args.redoStepsCount);
});
```

--------------------------------

### Enable Mini Map

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Set `miniMap: true` to display an overview of the entire tree structure with the current viewport highlighted. Global configuration options are available via `FamilyTree.miniMap`.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    miniMap: true,
    nodes: [
        { id: 1, name: "Root" },
        { id: 2, mid: 1, name: "Child 1" },
        { id: 3, mid: 1, name: "Child 2" },
        { id: 4, mid: 2, name: "Grandchild 1" },
        { id: 5, mid: 2, name: "Grandchild 2" }
    ]
});

// Configure mini map appearance globally
FamilyTree.miniMap = {
    width: 200,
    height: 150,
    padding: 10,
    opacity: 0.8,
    border: "1px solid #ccc",
    selectorBackgroundColor: "rgba(0,0,0,0.1)",
    focusStroke: "#039BE5",
    position: {
        right: "10px",
        bottom: "10px"
    }
};
```

--------------------------------

### Control FamilyTree JS Viewport with Navigation Methods

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Utilize `center`, `fit`, `zoom`, `setScale`, and `getScale` for programmatic viewport control. `center` focuses on a node, `fit` adjusts the view to show all nodes, `zoom` adjusts the scale, and `setScale`/`getScale` manage the exact scale. `ripple` can highlight a node.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    scaleInitial: FamilyTree.match.boundary,
    scaleMin: 0.1,
    scaleMax: 5,
    nodes: [
        { id: 1, name: "Person 1" },
        { id: 2, mid: 1, name: "Person 2" },
        { id: 3, mid: 1, name: "Person 3" }
    ]
});

// Center on a specific node
tree.center(2, {
    vertical: true,
    horizontal: true
}, function() {
    console.log("Centered on node 2");
});

// Fit entire tree in view
tree.fit(function() {
    console.log("Tree fitted to viewport");
});

// Zoom in (delta > 1) or out (delta < 1)
tree.zoom(1.5, [50, 50], true, function() {
    console.log("Zoomed in");
});

// Set specific scale
var actualScale = tree.setScale(2);
console.log("Scale set to:", actualScale);

// Get current scale
var currentScale = tree.getScale();
console.log("Current scale:", currentScale);

// Highlight a node with ripple effect
tree.ripple(2);
```

--------------------------------

### Implement Search Functionality in FamilyTree JS

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Configure `searchFields`, `searchDisplayField`, and `searchFieldsWeight` during initialization to enable programmatic or UI-driven searches. The `search` method returns results with relevance scores. Use `searchUI.on('searchclick', ...)` to handle UI search events.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: {
        field_0: "name",
        field_1: "location"
    },
    searchFields: ["name", "location", "occupation"],
    searchDisplayField: "name",
    searchFieldsWeight: {
        "name": 100,
        "location": 50,
        "occupation": 30
    },
    nodes: [
        { id: 1, name: "John Smith", location: "New York", occupation: "Engineer" },
        { id: 2, name: "Jane Smith", location: "Boston", occupation: "Doctor" },
        { id: 3, name: "Bob Johnson", location: "New York", occupation: "Teacher" }
    ]
});

// Programmatic search
var results = tree.search("New York", ["location"], ["name", "location"]);
results.forEach(function(result) {
    console.log("Found:", result.name, "Score:", result.__score);
});

// Search UI events
tree.searchUI.on('searchclick', function(sender, args) {
    console.log("Search result clicked:", args);
});
```

--------------------------------

### Handle FamilyTree JS Events

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Use the `on` method or specific event handlers like `onInit`, `onNodeClick`, `onUpdateNode`, and `onExpandCollpaseButtonClick` to respond to user interactions and tree changes. Ensure the FamilyTree instance is initialized before attaching event listeners.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    nodes: [
        { id: 1, pids: [2], name: "Parent 1" },
        { id: 2, pids: [1], name: "Parent 2" },
        { id: 3, mid: 2, fid: 1, name: "Child" }
    ]
});

// Called when tree is fully initialized
tree.onInit(function() {
    console.log("Family tree initialized");
});

// Handle node click events
tree.onNodeClick(function(args) {
    console.log("Clicked node:", args.node.id);
    // return false; // Uncomment to cancel default behavior
});

// Handle node double click
tree.onNodeDoubleClick(function(args) {
    console.log("Double clicked:", args.data);
});

// Track data changes
tree.onUpdateNode(function(args) {
    console.log("Added nodes:", args.addNodesData);
    console.log("Updated nodes:", args.updateNodesData);
    console.log("Removed node ID:", args.removeNodeId);
});

// Handle expand/collapse
tree.onExpandCollpaseButtonClick(function(args) {
    console.log("Collapsing:", args.collapsing, "Node ID:", args.id);
});
```

--------------------------------

### Check Trial Version with FamilyTree.isTrial()

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Determine if the FamilyTree JS library is being used in its trial version with FamilyTree.isTrial(). This can be used for feature gating or licensing checks.

```javascript
// Check if using trial version
if (FamilyTree.isTrial()) {
    console.log("Trial version");
}
```

--------------------------------

### Load and Export XML Data

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Utilize `loadXML()` to import data from an XML string or file, and `getXML()` or `exportXML()` to export the tree data in XML format for interoperability.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" }
});

// Load from XML string
var xmlData = `
<nodes>
    <node id="1" name="John Smith" pids="2"></node>
    <node id="2" name="Jane Smith" pids="1"></node>
    <node id="3" name="Tom Smith" mid="2" fid="1"></node>
</nodes>
`;

tree.loadXML(xmlData, function() {
    console.log("XML loaded");
});

// Export to XML
var xml = tree.getXML();
console.log("Exported XML:", xml);

// Export to XML file
tree.exportXML("family-tree.xml");

// Import XML from file dialog
tree.importXML();
```

--------------------------------

### Configure Layout and Orientation in FamilyTreeJS

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Control the arrangement and positioning of nodes using layout algorithms and orientation settings. Adjust separations between nodes and subtrees.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    layout: FamilyTree.layout.mixed,
    orientation: FamilyTree.orientation.top,
    levelSeparation: 80,
    siblingSeparation: 30,
    subtreeSeparation: 50,
    minPartnerSeparation: 60,
    partnerNodeSeparation: 20,
    nodes: [
        { id: 1, pids: [2], name: "Parent 1" },
        { id: 2, pids: [1], name: "Parent 2" },
        { id: 3, mid: 2, fid: 1, name: "Child 1" },
        { id: 4, mid: 2, fid: 1, name: "Child 2" }
    ]
});

// Change layout programmatically
tree.setLayout(FamilyTree.layout.tree);

// Change orientation
tree.setOrientation(FamilyTree.orientation.left, null, function() {
    console.log("Orientation changed");
});

// Available orientations:
// FamilyTree.orientation.top
// FamilyTree.orientation.bottom
// FamilyTree.orientation.left
// FamilyTree.orientation.right
// FamilyTree.orientation.top_left
// FamilyTree.orientation.bottom_left
// FamilyTree.orientation.right_top
// FamilyTree.orientation.left_top
```

--------------------------------

### Load FamilyTree Nodes from Data Array

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Loads nodes into an existing FamilyTree instance using an array of data objects. A callback function can be provided to execute after loading.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: {
        field_0: "name",
        field_1: "title"
    }
});

// Load nodes from data array
tree.load([
    { id: 1, pids: [2], name: "Grandfather", title: "Patriarch" },
    { id: 2, pids: [1], name: "Grandmother", title: "Matriarch" },
    { id: 3, mid: 2, fid: 1, pids: [4], name: "Father", title: "Engineer" },
    { id: 4, pids: [3], name: "Mother", title: "Doctor" },
    { id: 5, mid: 4, fid: 3, name: "Child 1", title: "Student" },
    { id: 6, mid: 4, fid: 3, name: "Child 2", title: "Student" }
], function() {
    console.log("Family tree loaded successfully");
});
```

--------------------------------

### Count FamilyTree Nodes with FamilyTree.childrenCount() and FamilyTree.childrenTotalCount()

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Count the direct children of a node using FamilyTree.childrenCount() and the total number of descendants using FamilyTree.childrenTotalCount(). These methods require the tree instance and the parent node.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    nodes: [
        { id: 1, name: "Parent" },
        { id: 2, mid: 1, name: "Child 1" },
        { id: 3, mid: 1, name: "Child 2" }
    ]
});

tree.onInit(function() {
    var parentNode = tree.getNode(1);
    var childCount = FamilyTree.childrenCount(tree, parentNode);
    var totalCount = FamilyTree.childrenTotalCount(tree, parentNode);
    console.log("Direct children:", childCount);
    console.log("Total descendants:", totalCount);
});
```

--------------------------------

### Configure Toolbar in FamilyTreeJS

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Enable and customize the built-in toolbar for operations like zoom, fit, layout switching, and fullscreen. Customize toolbar icons and menu export options.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    toolbar: {
        layout: true,
        zoom: true,
        fit: true,
        expandAll: true,
        fullScreen: true
    },
    menu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        csv: { text: "Export CSV" }
    },
    nodes: [
        { id: 1, name: "Root" },
        { id: 2, mid: 1, name: "Child" }
    ]
});

// Toggle fullscreen programmatically
tree.toggleFullScreen();

// Customize toolbar icons
FamilyTree.toolbarUI.expandAllIcon = '<svg>...</svg>';
FamilyTree.toolbarUI.fitIcon = '<svg>...</svg>';
```

--------------------------------

### Add Partner Node Programmatically

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Adds a partner node to an existing node in the tree. The partner's ID is linked via the 'pids' property. A callback can be provided, and a third boolean argument controls immediate UI updates.

```javascript
tree.addPartnerNode({
    id: 4,
    pids: [3],
    name: "Child's Partner"
}, function() {
    console.log("Partner added");
}, true);
```

--------------------------------

### Check Mobile Device with FamilyTree.isMobile()

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Use FamilyTree.isMobile() to detect if the current environment is a mobile device. This is useful for applying mobile-specific UI or logic.

```javascript
// Check if running on mobile device
if (FamilyTree.isMobile()) {
    console.log("Mobile device detected");
}
```

--------------------------------

### Check for Null, Empty, or Undefined with FamilyTree.isNEU()

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Utilize FamilyTree.isNEU() to check if a given value is null, empty, or undefined. This is a convenient way to validate input or check for missing data.

```javascript
// Check if value is null, empty, or undefined
if (FamilyTree.isNEU(someValue)) {
    console.log("Value is empty");
}
```

--------------------------------

### Update and Remove Nodes in FamilyTree

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Demonstrates updating a node's data using `updateNode` and removing a node using `removeNode`. `canRemove` is used to check if a node can be safely removed.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name", field_1: "occupation" },
    nodes: [
        { id: 1, name: "John Doe", occupation: "Engineer" },
        { id: 2, mid: 1, name: "Jane Doe", occupation: "Teacher" }
    ]
});

// Update a node's data
tree.updateNode({
    id: 1,
    name: "John Doe Sr.",
    occupation: "Senior Engineer"
}, function() {
    console.log("Node updated successfully");
}, true);

// Check if node can be removed (no dependents)
if (tree.canRemove(2)) {
    tree.removeNode(2, function() {
        console.log("Node removed");
    }, true);
} else {
    console.log("Cannot remove node - has dependents");
}

// Get node data
var nodeData = tree.get(1);
console.log("Node data:", nodeData);
```

--------------------------------

### Expand and Collapse Nodes in FamilyTree JS

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Control the visibility of child nodes using `collapse`, `expand`, and `expandCollapse` methods. These methods support targeting specific nodes or applying actions to 'all' nodes, with optional callback functions for completion.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    nodes: [
        { id: 1, name: "Root" },
        { id: 2, mid: 1, name: "Child 1" },
        { id: 3, mid: 1, name: "Child 2" },
        { id: 4, mid: 2, name: "Grandchild 1" },
        { id: 5, mid: 2, name: "Grandchild 2" }
    ]
});

// Collapse specific nodes
tree.collapse(1, [2, 3], function() {
    console.log("Nodes collapsed");
});

// Expand specific nodes
tree.expand(1, [2, 3], function() {
    console.log("Nodes expanded");
});

// Expand all nodes
tree.expand(1, "all", function() {
    console.log("All nodes expanded");
});

// Expand and collapse simultaneously
tree.expandCollapse(1, [2], [3], function() {
    console.log("Expand/collapse complete");
});
```

--------------------------------

### Convert CSV to Nodes with FamilyTree.convertCsvToNodes()

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Convert CSV formatted text into an array of node objects using FamilyTree.convertCsvToNodes(). The CSV should include 'id', 'name', and 'mid' columns.

```javascript
// Convert CSV to nodes
var csvText = "id,name,mid\n1,John,\n2,Jane,1";
var nodes = FamilyTree.convertCsvToNodes(csvText);
console.log("Converted nodes:", nodes);
```

--------------------------------

### Add Curved and Secondary Links in FamilyTreeJS

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Implement curved links (clinks) and secondary links (slinks) for non-hierarchical connections. Links can be added, removed, and their click events handled.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: { field_0: "name" },
    clinks: [
        { from: 2, to: 4, label: "Best Friends", template: "blue" }
    ],
    slinks: [
        { from: 3, to: 5, label: "Mentor", template: "orange" }
    ],
    nodes: [
        { id: 1, name: "Root" },
        { id: 2, mid: 1, name: "Child 1" },
        { id: 3, mid: 1, name: "Child 2" },
        { id: 4, mid: 2, name: "Grandchild 1" },
        { id: 5, mid: 3, name: "Grandchild 2" }
    ]
});

// Add links programmatically
tree.addClink(2, 5, "Godparent", "yellow");
tree.addSlink(4, 3, "Advisor");

// Remove links
tree.removeClink(2, 4);
tree.removeSlink(3, 5);

// Handle link click events
tree.on('clink-click', function(sender, args) {
    console.log("Curved link clicked:", args.from, "->", args.to);
});

tree.on('slink-click', function(sender, args) {
    console.log("Secondary link clicked:", args.from, "->", args.to);
});
```

--------------------------------

### Add Parent Node Programmatically

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Adds a parent node to an existing node, specifying the parent's role ('fid' for father, 'mid' for mother). A callback can be provided, and a third boolean argument controls immediate UI updates.

```javascript
tree.addParentNode(1, 'fid', {
    id: 5,
    name: "Great Grandfather"
}, function() {
    console.log("Parent added");
}, true);
```

--------------------------------

### Add Child Node Programmatically

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Adds a new child node to the tree, specifying the mother's ID (mid) and father's ID (fid). A callback can be provided, and a third boolean argument controls whether the UI updates immediately.

```javascript
tree.addChildNode({
    id: 3,
    mid: 2,
    fid: 1,
    name: "New Child"
}, function() {
    console.log("Child added");
}, true);
```

--------------------------------

### Generate Unique ID with tree.generateId()

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Generate a unique identifier for new nodes using the tree.generateId() method. This ensures that each node has a distinct ID within the tree structure.

```javascript
// Generate unique ID
var newId = tree.generateId();
console.log("Generated ID:", newId);
```

--------------------------------

### Configure FamilyTree JS Edit Form

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Customize the built-in edit form by defining fields, bindings, buttons, and validation rules. The `generateElementsFromFields` option controls automatic element generation. Custom buttons can be added or removed, and UI events like 'save' and 'cancel' can be handled.

```javascript
var tree = new FamilyTree('#tree', {
    nodeBinding: {
        field_0: "name",
        field_1: "birthDate",
        img_0: "photo"
    },
    editForm: {
        titleBinding: "name",
        photoBinding: "photo",
        generateElementsFromFields: false,
        buttons: {
            edit: { icon: FamilyTree.icon.edit(24, 24, '#fff'), text: "Edit" },
            share: { icon: FamilyTree.icon.share(24, 24, '#fff'), text: "Share" },
            pdf: null // Remove PDF button
        },
        elements: [
            { type: 'textbox', label: 'Full Name', binding: 'name' },
            { type: 'date', label: 'Birth Date', binding: 'birthDate' },
            { type: 'select', label: 'Gender', binding: 'gender', options: ['Male', 'Female', 'Other'] },
            { type: 'textbox', label: 'Occupation', binding: 'occupation' },
            [
                { type: 'textbox', label: 'City', binding: 'city' },
                { type: 'textbox', label: 'Country', binding: 'country' }
            ]
        ]
    },
    nodes: [
        { id: 1, name: "John Doe", birthDate: "1980-01-15", gender: "Male" }
    ]
});

// Edit UI events
tree.editUI.on('save', function(sender, args) {
    console.log("Saving:", args);
});

tree.editUI.on('cancel', function(sender, args) {
    console.log("Edit cancelled");
});

// Show edit form programmatically
tree.editUI.show(1, false); // false = edit mode, true = details mode
```

--------------------------------

### Customize FamilyTree JS Templates

Source: https://context7.com/balkangraph/familytreejs/llms.txt

Utilize built-in templates or define custom ones to control node appearance. Custom templates can be created by extending existing ones and modifying properties like size and node SVG structure. Tags can be used to apply specific templates to nodes.

```javascript
var tree = new FamilyTree('#tree', {
    template: "olivia",
    nodeBinding: {
        field_0: "name",
        field_1: "title",
        img_0: "photo"
    },
    tags: {
        "highlighted": {
            template: "belinda"
        },
        "executive": {
            template: "mila",
            nodeMenu: {
                details: { text: "View Details" },
                edit: { text: "Edit Profile" }
            }
        }
    },
    nodes: [
        { id: 1, name: "CEO", title: "Chief Executive", tags: ["executive"] },
        { id: 2, mid: 1, name: "Manager", title: "Department Head", tags: ["highlighted"] },
        { id: 3, mid: 1, name: "Employee", title: "Staff Member" }
    ]
});

// Access and modify templates
FamilyTree.templates.myTemplate = Object.assign({}, FamilyTree.templates.ana);
FamilyTree.templates.myTemplate.size = [300, 150];
FamilyTree.templates.myTemplate.node = '<rect x="0" y="0" width="300" height="150" fill="#ffffff" stroke="#cccccc" rx="10"></rect>';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.