# 🧬 How to Edit a JSON File with Family Tree Members

Managing family tree data in a JSON file can be an efficient way to store, view, and edit genealogical relationships. With Balkan FamilyTree JS 2, it’s easy to create an interactive family tree, load member data from a local JSON file, and save your changes back to disk — all in the browser!

In this tutorial, we'll walk through how to:

✅ Open a JSON file with family members
✅ Display the data in an interactive family tree
✅ Edit members directly in the tree
✅ Save your updated JSON file

🔧 Features

• File open/save using the File API

• Support for .json format

• Compatible with Family Tree JS 2

• No backend required – everything works client-side

🖥️ Live Example

You can test the live demo here:
👉 Read and Write a JSON - Family Tree JS 2

📜 Full Code Example

HTML

<script src="https://cdn.balkan.app/familytree2.js"></script>

<div class="supported">
    <table class="toolbar" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td class="td-button">
                <button id="open" type="button" class="button open" title="Open File">
                    <img class="icon" src="https://code.balkan.app/_content/core/img/icon-folder.svg" />
                </button>
            </td>
            <td class="td-button">
                <button id="save" type="button" class="button save" title="Save File">
                    <img class="icon" src="https://code.balkan.app/_content/core/img/icon-save.svg" />
                </button>
            </td>
            <td>
                <div id="title" class="title">&lt; Click Save button to save the file locally</div>
            </td>
            <td class="edit">
                <a href="https://code.balkan.app/code-of-the-week/read-and-write-local-csv-file-using-file-api-and-org-chart-js" 
                   target="_blank" class="edit">Edit in BALKAN Code</a>
            </td>
        </tr>
    </table>

    <div id="tree" class="tree"></div>
</div>

JavaScript

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.readOnly = false;
familyTree.templateName = "kitkat";

document.getElementById('save').addEventListener('click', function () {
    saveJSON().then(() => {
        document.getElementById('save').classList.add('disabled');
    });
});
familyTree.onUpdated(() => {
    document.getElementById('save').classList.remove('disabled');
})

document.getElementById('open').addEventListener('click', function () {
    openJSON().then((nodes) => {
        document.getElementById('save').classList.add('disabled');
    });
});

function updateTitle(title) {
    document.querySelector('title').innerHTML = title;
    document.querySelector('#title').innerHTML = title;
}

let fileHandle = null;
let lastModified = 0;

async function openJSON() {
    if (window.parent != window) {
        if (confirm("In order to test the Code you have to open it in a new tab. Would you like to open it in a new tab?")) {
            window.open("https://code.balkan.app/result/family-tree-js-2/read-and-write-a-json")
        }
        return;
    }

    const pickerOpts = {
        types: [{
            description: 'JSON Data',
            accept: { "text/json": [".json"] }
        }],
        excludeAcceptAllOption: true,
        multiple: false,
    };

    let fileHandles = await window.showOpenFilePicker(pickerOpts);
    if (Array.isArray(fileHandles) && fileHandles.length) {
        fileHandle = fileHandles[0];
        lastModified = 0;
        updateTitle(fileHandle.name);
        loadFile();
    }
}

async function loadFile() {
    if (fileHandle != null) {
        const fileData = await fileHandle.getFile();
        if (lastModified < fileData.lastModified) {
            let data = await fileData.text();
            const nodes = JSON.parse(data);
            if (data.length > 0) {
                familyTree.addFamilyMembers(nodes).draw(nodes[0].id);
            }
            else {
                alert("The file does not contain any family members.")
            }
            lastModified = fileData.lastModified;
        }
    }
}

async function saveJSON() {
    if (!window.showSaveFilePicker) {
        alert("This feature is not supported in your browser.");
        return;
    }

    if (window.parent !== window) {
        if (confirm("In order to test the Code you have to open it in a new tab. Would you like to open it in a new tab?")) {
            window.open("https://code.balkan.app/result/family-tree-js-2/read-and-write-a-json", "_blank");
        }
        return;
    }

    const jsonText = JSON.stringify(familyTree.family, null, 2)
    if (!jsonText) {
        alert("No JSON data to save.");
        return;
    }

    const blob = new Blob([jsonText], { type: "text/plain" });

    try {
        if (!fileHandle) {
            fileHandle = await window.showSaveFilePicker({
                suggestedName: "family.json",
                types: [{
                    description: "JSON file",
                    accept: { 'text/json': ['.json'] }
                }]
            });
            updateTitle(fileHandle.name);
        }

        const writable = await fileHandle.createWritable();
        await writable.write(blob);
        await writable.close();

        console.log("File saved successfully");
    } catch (err) {
        console.error("Saving failed:", err);
        alert("Could not save the file.");
    }
}

// setInterval(loadFile, 1000);

CSS

🧪 How It Works

1. Load Button – Uses the File System Access API to let the user choose a .json file containing family member nodes.

2. Display – The Family Tree JS 2 component loads and visualizes the data.

3. Edit – Users can click on a member to update their name or add another member.

4. Save Button – Exports the modified data back into a .json file, with structure preserved.

📂 Sample JSON Format

Here’s what the JSON structure might look like:

[
    { 
        "id": 1, 
        "fatherId": 2, 
        "motherId": 3,  
        "spouseIds": [4], 
        "siblingIds": [5, 6], 
        "childIds": [7],
        "name": "Me",
        "sexOrGender": "female" 
    }, 
    {"id": 2, "name": "Father", "childIds": [1, 5, 6], "sexOrGender": "male" },
    {"id": 3, "name": "Mother", "childIds": [1, 5, 6], "sexOrGender": "female" },
    {"id": 4, "spouseIds": [1], "childIds": [7], "name": "Spouse", "sexOrGender": "male" },
    {"id": 5, "name": "Sibling 1", "sexOrGender": "male", "fatherId": 2, "motherId": 3 },
    {"id": 6, "name": "Sibling 2", "sexOrGender": "female", "fatherId": 2, "motherId": 3 },
    {"id": 7, "name": "Child", "sexOrGender": "female", "motherId": 1, "fatherId": 4 }
]

🔗 Try it yourself

👉 Open and edit your own family tree here:
https://code.balkan.app/family-tree-js-2/read-and-write-a-json#JS

Happy tree editing! 🌳💾