Family Circles


In the left menu, the Builder application is accessed by clicking on the icon

any place you see this icon you can click on it to go directly to the builder. If you hold the mouse over the icon it will show a reminder of what it does.


The builder is, as the name implies, where you will be building your very own family circles. All of the things you need to start building are on the left hand side of the screen in boxes. Let me first explain the display a bit before I go into how to build a tree.

Build Box:

There are 3 tabs to the builder box, 2 of them are used to build and edit the trees and the third one doesn’t have a function quite yet.

Family Tab

This tab is primarily what you’ll be using to input people into the system. The top text box is for the last name of the family, the second text box is for the father, the third is for the mother, and the last text box is for the children. While only a single name can be input into the first three text boxes, more than one name can be inputted into the children box. Above the text boxes are 3 buttons: add, delete, and clear. The add button will craft a family tree for whatever family was input into the boxes. The clear button will simply clear the text boxes of whatever’s in them. Clear does not delete the tree or anything if one already exists, it only empties the text boxes so that other things can be inputted. The delete button is only really applicable if you select a family that already exists in the tree. If you select a family and press delete, it will delete the family connection. All the people will still exist, but they will not be connected to each other in any way. In order to get rid of all the people you will have to select them individually and delete them. Another thing you will notice is if you select an already existing family then the add button will turn into an update button. Names can be edited or changed in the builder for an already existing family, and once you’ve changed them to your satisfaction all you have to do is click the update button to have the changes stick.

Person Tab

This tab has the same three buttons at the top that the family tab does (they do exactly the same thing here as they do in the family tab) but the text boxes are a little bit different. The first text box is where the person’s individual name would go. The Avatar text box allows you to input an image URL that will show up beneath the person’s dot on the display. The Page text box allows you to link another webpage via URL to that person’s display. The person’s name will turn blue once they have a URL linked and left clicking on them will open up the linked URL in a new tab. The 4th text box is representative of what family that person is a part of. At this point in time, only children of a family have a last name associated with them: people in Family Circles do not have last names unless connected up with another person, the mother and father don’t usually have a family name of their own.

Config Tab

This is the tab that doesn’t really have a function at this time. Ideally what it will be able to do is allow you to change where the model will center initially, change the fonts, change the colors, etc. It’ll basically be a bunch of customization that isn’t a high priority at the moment.

Export Box:

This is just how you save a file. Type in a name for your file in the text box that says “File Name” and once you’re satisfied with it then click the save button. The file will get immediately sent to your downloads folder and it will be a .json file with whatever name you chose for it before it. For example, if you type “Kennedy Family Tree” it will be "Kennedy Family Tree.json” in your downloads folder. There is no option to select to put it anywhere else at this time, but you’re free to move it out of the downloads folder once it’s put there.

Import Box:

This is how you load up an already existing Family Circle into the builder. The builder is the only way you can edit a Family Circle, so one that is unfinished or one that needs to be updated needs to be loaded first. Loading can be done in two ways, choosing a file or inputting a url.

  • To choose a file all you need to do is click the choose file button and it will bring up a window for you to search your computer. Find the file you’re looking for (it will be a .json file), and once you select it by either double clicking the file or clicking the open button after highlighting it with a single click, then it’ll load up the Family Circle into the builder and it will show up in the empty space on the right.
  • To input a url all you have to do is copy the url of wherever you have the .json file into the URL box and then click the Web button.
Service Box:

If the family that you're building has gotten rather large and unwieldy, then it’s very likely that you will have loaded your .json file into the service instead of the builder directly. When you load a file into the service, you can access the information on that service in the builder by inputting the correct URL into the textbox here and clicking connect. Connecting a service to the builder allows you to integrate the functionality of the builder into that of the explorer: you’ll be able to load up and search only the sections you want like in the explorer, but you’ll actually be able to edit the information since you’re in the builder. It’s important to note that if you edit a file in the builder while a service is connected, when you want to save that file you will have to export from the admin page rather than the builder page. Saving from the builder will only export a file with whatever you have currently displayed in the model on the right rather than the entire data file.

Function Action
1 Button Mouse 3 Button Mouse Touch
Open Related Page
Titles are different color (Blue) if available
Mouse Click Left Mouse Click Single Finger Tap
Look at/Center on Item Double Mouse Click Double Left Mouse Click Double Single Finger Tap
Rotate Model Mouse Drag Left Mouse Drag Single Finger Drag
Zoom In/Out Model CTRL Mouse Drag Middle Mouse Drag/Scroll Wheel 2 Finger Spread/Pinch
Pan Model Shift Mouse Drag
Meta/Command Mouse Drag
Arrow Keys
Right Mouse Drag Double Finger Drag
Expand Relations
Dots are different color (Blue) if available
Shift Mouse Click
Meta/Command Mouse Click
Right Mouse Click Shift Single Finger Tap
Double Finger Tap
Load Build Panel CTRL Mouse Click Middle Mouse Click CTRL Single Finger Tap
Three Finger Tap

Building a Family Circle

Most of this can be deduced simply by my explanation of the various things that show up on the builder, but there are a couple more things that need to be explained before you can really start building your own family tree.

Inputting Text into the Boxes—When you want to input a name into the boxes, you have to press tab once you’re done typing the name in order to turn the name into a grey box with an x to the right of it. When the box is grey, this means that it’s not a name that exists on Family Circles yet and when you’re making your very first circle they all will be grey. To clear a name from the text box, simply press the x to the right of the name. If you want to edit a name instead of clearing it completely, simply click on the letters bit of the grey box and it will unbox the name to let it be edited. You’ll have to press tab again once you’re done changing the name though.

Connecting the Families—Once you have one Family Circle into the display, then you can start linking that up to other families. In order to do this, simply start typing in this new family you’re going to make into the family tab. If this 2nd family has the same starting letter as the first family though, you’ll notice that a drop down menu shows up as you start to type this second one. For example, if Smith was the last name for the first circle you made, and Smith is also the last name for the second, there will be a Smith in a drop down below the name you typed in. You do not want to select the Smith from the drop down menu though. The Smith in the drop down menu represents the first family you made, so unless you’re trying to edit the first family you’ll want to input a new Smith family into the system. However, say this first Smith family had a son named Reggie, and this second Smith family you’re trying to make has Reggie as the father. To connect this 2nd family to the first you would go down to the Father tab, start typing in Reggie, and select him from the drop down menu that shows up (you select him by either clicking on his name with the mouse, or moving down to his name with the arrow keys and pressing enter). You’ll notice that when you do this his box will be green instead of the usual grey: this indicates that Reggie already exists in Family Circles somewhere, and now the builder knows to connect up this new family to the old one. Once you’ve put in all the people for Reggie’s family, you can click add and the builder will create a line out from Reggie connecting to this new family.

Editing Existing Families—If later on you realize that a family you already added needs something else added to it then no problem! Simply hold down the control key and left click (or middle mouse click) on the dot that represents the family and all the information for that family will be shown in the family tab of the build box. If you want to edit the name of a person (but not get rid of that person entirely), then simply click on the text of their name and you’ll be able to type for it again. Once you press tab after editing the name will be displayed in a yellow box to indicate that the change you made to it hasn’t been saved to the builder. In order to get the family circle on the right to change just click the update button. You can also add additional children to a family this way but again, you will have to click the update button before the display on the right will change.

Moving Around the Display—Once your family circles get big enough, you’ll find that moving around the circles will become crucial. Moving around the display on the builder is exactly the same as moving about on the viewer.

Searching For People—If your Family Circles get big enough that you can’t easily find all the people by just scrolling and double clicking anymore, an easy way to locate people you’re looking for is to just go into the person tab and start typing in their name. When you select a person from the drop down menu, the display on the right will center the display on that person. Also, mousing over a name (or moving the selector down with the arrow keys without pressing enter yet) on the drop down menu will highlight that name on the display at the right. This same process can be done to find and center the display on families as well except you'll be searching for them on the families tab.