← Back to list

Importing GEDCOM Data Just Got Easier with Family Tree JS 2

If you’ve ever tried importing genealogy data into a web app, you know that parsing and mapping GEDCOM files can be tricky. With Family…

Zorry Pesheva in JavaScript in Plain English · 2025-08-09 06:14 · 0 claps · 1.7 min read
#javascript #web-development #genealogy #gedcom #family-tree
Open on Medium ↗
Wiki topics: 🌐 · Web Development 👨‍👩‍👧 · Family & Parenting

Importing GEDCOM Data Just Got Easier with Family Tree JS 2

If you’ve ever tried importing genealogy data into a web app, you know that parsing and mapping GEDCOM files can be tricky. With Family Tree JS 2, that process is now as simple as calling one method:

FamilyTree2.convertGedcomToFamilyMembers(text, fieldBinding)

This new feature lets you open a .ged file, map GEDCOM tags to your own data model, and instantly display a family tree in your browser.

Load GEDCOM data in Family Tree JS 2

Load GEDCOM data in Family Tree JS 2

Why This Matters

GEDCOM has been the standard format for genealogy data exchange for decades. Until now, loading that data into a web-based family tree required custom parsing logic. With Family Tree JS 2, it’s all built-in. You can import data from tools like Ancestry, MyHeritage, or RootsMagic without writing your own parser.

How It Works

Pick a GEDCOM File Use the browser’s File System Access API to let the user select a .ged file.

Map Fields Provide a fieldBinding object that tells Family Tree JS 2 how to map GEDCOM tags to your node properties:

let fieldBinding = { "NAME": "name",   "BIRT_DATE": "dateOfBirth" };

Convert & Display

Call convertGedcomToFamilyMembers() and then render your tree:

let familyMembers = 
  FamilyTree2.convertGedcomToFamilyMembers(text, fieldBinding);  
familyTree.addFamilyMembers(familyMembers).draw(familyMembers[0].id);

Example in Action

Here’s the complete workflow in a nutshell:

// 1. Pick file
let [fileHandle] = await window.showOpenFilePicker({ 
    types: [{ accept: { 'text/plain': ['.ged'] } }]
});
// 2. Read text
let text = await (await fileHandle.getFile()).text();
// 3. Map fields
let fieldBinding = { "NAME": "name" };
// 4. Convert and draw
let familyMembers = FamilyTree2.convertGedcomToFamilyMembers(text, fieldBinding);
familyTree.addFamilyMembers(familyMembers).draw(familyMembers[0].id);

That’s it — from file selection to fully rendered family tree in just a few lines.

Ready to Try It?

We’ve put together a live demo so you can see the feature in action: 🔗 Load GEDCOM Data in Family Tree JS 2

With this update, importing genealogy data is no longer a backend task — it can happen entirely in the browser, instantly.

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 200k supporters? We do not get paid by Medium!

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok and Instagram. And before you go, don’t forget to clap and follow the writer️!


메타데이터
post_id
b89fa0e7ae0b
slug
importing-gedcom-data-just-got-easier-with-family-tree-js-2-b89fa0e7ae0b
url
https://javascript.plainenglish.io/importing-gedcom-data-just-got-easier-with-family-tree-js-2-b89fa0e7ae0b
canonical_url
https://javascript.plainenglish.io/importing-gedcom-data-just-got-easier-with-family-tree-js-2-b89fa0e7ae0b
author_url
https://medium.com/@pesheva
status
ok
fetched_at
2026-07-18 09:42:59