PedEdit - the Pedigree Editor

A web-based pedigree editor for clinical genetics, genetic counseling, and medical research.

Live at pededit.com

Why we built this

Existing browser-based pedigree editors use simple tree layouts that break down with consanguinity, multiple mates, and complex family structures. The correct algorithms exist in R packages like kinship2, but those aren't interactive web tools.

We ported kinship2's layout engine to TypeScript, giving us publication-quality automatic layout natively in the browser. Then we built an interactive editor on top of it, with drag-and-drop repositioning that even most commercial tools don't offer.

Prerequisites

• Node.js 20+
• Python 3.10+
• PostgreSQL 14+
• uv

Setup

1. Install Node dependencies

npm install

2. Create the database

sudo -u postgres psql -c "CREATE USER pededit WITH PASSWORD 'pededit';"
sudo -u postgres psql -c "CREATE DATABASE pededit OWNER pededit;"

3. Create the application config

The backend reads its configuration from /etc/pededit/pededit.json:

sudo mkdir -p /etc/pededit
sudo tee /etc/pededit/pededit.json > /dev/null <<'EOF'
{
  "database_url": "postgres://pededit:pededit@localhost:5432/pededit",
  "allowed_hosts": ["localhost", "127.0.0.1"],
  "cors_allowed_origins": ["http://localhost:5173"],
  "debug": true
}
EOF

4. Set up the backend

cd backend/
uv venv
source .venv/bin/activate
uv pip install -r requirements.txt
python manage.py migrate

5. (Optional) Create a superuser for the Django admin

cd backend/
source .venv/bin/activate
python manage.py createsuperuser

Running

Start both servers in separate terminals:

Backend (from backend/):

source .venv/bin/activate
python manage.py runserver

Frontend (from repo root):

npm run dev:frontend

Then open http://localhost:5173. You'll be redirected to /login. Register an account via the API or the Django admin, then sign in.

To register an account from the command line:

curl -s -X POST http://localhost:8000/api/auth/register/ \
  -H "Content-Type: application/json" \
  -d '{"username":"you","email":"you@example.com","password":"yourpassword"}'

Development

# Run layout engine tests
npm run test:layout

# Type-check the frontend
npm -w @pedigree-editor/frontend run typecheck

Production deployment

See INSTALL.md for step-by-step instructions to deploy on Ubuntu 24.04 with Nginx, Gunicorn, and PostgreSQL.

Project structure

pededit/
├── layout-engine/   # TypeScript layout algorithm (npm workspace)
├── backend/         # Django + DRF API
└── frontend/        # Vite + React + TypeScript