diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.jsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
similarity index 98%
rename from geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.jsx
rename to geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
index edf3f60..7ef0ec5 100644
--- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.jsx
+++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
@@ -222,6 +222,6 @@ export default class ComlexFamilyTree extends React.Component {
   }
 
   render() {
-    return <div className="f3" id="FamilyChart" ref={this.cont}></div>;
+    return <div className="f3" id="FamilyChart" ref={this.cont as any}></div>;
   }
 }
diff --git a/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts b/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
new file mode 100644
index 0000000..f1f2752
--- /dev/null
+++ b/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
@@ -0,0 +1,67 @@
+declare module "family-chart" {
+  type f3data = any;
+  type f3tree = any;
+
+  type f3State = {
+    data: any;
+    main_id?: any;
+    tree?: f3tree;
+    node_separation?: number;
+    level_separation?: number;
+  };
+
+  interface f3Update {
+    tree: (props) => void;
+    mainId: (mainId) => void;
+    data: (data: f3data) => void;
+  }
+
+  interface f3Store {
+    state: f3State;
+    update: f3update;
+    getData: () => f3data;
+    getTree: () => f3tree;
+    setOnUpdate: (cb: (props) => void) => void;
+    methods: any;
+  }
+
+  function createStore(initial_state: f3State): f3Store;
+
+  function CalculateTree({
+    data_stash,
+    main_id = null,
+    is_vertical = true,
+    node_separation = 250,
+    level_separation = 150,
+  });
+
+  function d3AnimationView(p: {
+    store: f3Store;
+    cont: HTMLElement | null;
+    Card?: any;
+  });
+
+  const handlers: any;
+
+  type F3elements = {
+    Card: (props: {
+      store: f3Store;
+      svg: HTMLElement;
+      mini_tree: boolean;
+      link_break: boolean;
+      cardEditForm?: boolean;
+      card_dim: {
+        w: number;
+        h: number;
+        text_x: number;
+        text_y: number;
+        img_w: number;
+        img_h: number;
+        img_x: number;
+        img_y: number;
+      };
+      card_display: ((data: any) => string)[];
+    }) => (p: { node; d }) => HTMLElement;
+  };
+  const elements: F3elements;
+}