Show / Hide Table of Contents

Getting Started

Family Tree JS extends Org Chart JS, with more functionalities added.

System requirements

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


  1. Download BALKAN FamilyTreeJS file form here.
  2. Unzip the file and add it to you root directory.
  3. In your html document between the head tags include the code bellow, and then Family Tree JS will be installed.
            <script src="www.[yourdomain].com/FamilyTree.js"></script>

Your first BALKAN FamilyTreeJS project

With BALKAN FamilyTreeJS included in your webpage you are ready to create your first Family Tree JS.

  1. Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your Family Tree JS.
            <div style="width:100%; height:700px;" id="tree"/>
  2. Add script tags anywhere in a webpage, containing the following code:
            var family = new FamilyTree(document.getElementById("tree"), {
                nodeBinding: {
                    field_0: "name"
                nodes: [
                    { id: 1, pids: [2], name: "Amber McKenzie" },
                    { id: 2, pids: [1], name: "Ava Field" },
                    { id: 3, mid: 1, fid: 2, name: "Peter Stevens" }  
  3. You should now see the following Family Tree JS on your webpage:


nodes: is the data source. The 'id' property is mandatory.

pids: are the partner ids, represents connection between two partners (wife and husband).

mid: mother id.

fid: father id.

gender: male or female.

nodeBinding: 'name' property form the data source will be bound to 'field_0' ui element from the template.

TypeScript Declaration File

The download package includes .d.ts file.
In order to have intellisense for your .js file in Visual Studio Code, you need to inclide this refference in the top of the file:

    /// <reference path="FamilyTree.d.ts" />


We believe in a simple, transparent and flexible licensing and pricing model that is aligned with the business value BALKAN App delivers to you. All licenses include one year of maintenance and technical support and are available on perpetual base.