Getting Started

System requirements

• Family Tree JS 2 runs on any server that supports HTML. You can even run it locally from a filesystem.
• Family Tree JS 2 does not depend on any third-party JavaScript library.
• Family Tree JS 2 works in all modern browsers and uses SVG for graphics rendering.

Installation

In your HTML document, include the following script inside the head tag:

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

Your first Family Tree JS project

With Family Tree JS 2 included in your webpage, you are ready to create your first Family Tree.

1. Add a div in your webpage. Give it an id and set a specific width and height.

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

2. Add script tags anywhere in your webpage containing the following code:

<script>
  let familyTree = new FamilyTree2(document.getElementById('tree'));

  familyTree.addFamilyMembers([
    { id: 1, fatherId: 2, motherId: 3, spouseIds: [4, 5], name: 'Me' },
    { id: 2, fatherId: 19, motherId: 18, name: 'Father' },
    { id: 3, fatherId: 17, motherId: 16, name: 'Mother' },
    { id: 4, name: 'Spouse 1' },
    { id: 5, fatherId: 12, motherId: 13, name: 'Spouse 2' },
    { id: 6, fatherId: 2, motherId: 3, name: 'Sibling 1' },
    { id: 7, fatherId: 2, motherId: 3, name: 'Sibling 2' },
    { id: 8, fatherId: 1, motherId: 4, name: 'Child 1' },
    { id: 9, fatherId: 1, motherId: 4, name: 'Child 2' },
    { id: 10, fatherId: 1, motherId: 4, name: 'Child 3' },
    { id: 11, fatherId: 1, motherId: 4, name: 'Child 4' },
    { id: 12, name: 'Father in Law' },
    { id: 13, name: 'Mother in Law' },
    { id: 14, fatherId: 17, motherId: 16, name: 'Uncle 1' },
    { id: 15, fatherId: 17, motherId: 16, name: 'Uncle 2' },
    { id: 16, name: 'Grandmother 1' },
    { id: 17, name: 'Grandfather 1' },
    { id: 18, name: 'Grandmother 2' },
    { id: 19, name: 'Grandfather 2' }
  ]).draw(1);
</script>

3. You should now see the following Family Tree on your webpage:

Edit in BALKAN Code

Here we have added images to the data and collapsed some nodes:

Edit in BALKAN Code

Where:

• nodes is the data source. The id property is mandatory.
• motherId is the mother id.
• fatherId is the father id.