Free genealogy website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: kinfold.md, data: kinfold.json

Genealogy website template: first screen on a phone

About this genealogy website template

Genealogy website template: one free HTML file for a family history research service that hands clients a bound folder. It has a worked family tree, three fixed-price packages, four researchers and an enquiry form, set as pale paper sheets with coloured index tabs on a black desk. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 105 KB index.html with its CSS and JavaScript inside, 13 sections, 12 Unsplash photos credited in CREDITS.md, Playwrite US Trad and Reddit Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

A family history researcher, a record agent or a local history society can use it as a family history website template: cover, archives, method, folder contents, a sample case, fees and an enquiry form follow in turn. Among genealogy website templates it is a service site. Someone after a family tree website template may want a tree builder; its one tree is a fixed example of fifteen entries.

Vibe coding this genealogy website template for Claude Code or Cursor goes fastest when you hand over the facts only the firm has: town, method and timeline, folder contents, one real or anonymised case, researchers, fees, reading room hours and enquiry address. The agent replaces the demo text first, then the photos, which include stock portraits of real people. The pedigree chart is read by position: entry one is the client, then two parents per entry.

It is the right base for a small research service that sells fixed packages and welcomes people to a reading room. A practice that bills by the hour and wants a firmer tone suits the law firm template better. The weak spot is navigation: six index tabs are the only fixed navigation, with no wordmark or menu, and their vertical labels are small on wide screens. 8B's builder is the no-code route.

Good for:

Genealogy or family history research serviceArchive, library or local history societyHeritage consultancy or museum shopAny small research or records service that delivers a document pack, with fixed prices and a reading room

Turn the genealogy website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/genealogy-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/genealogy-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/genealogy-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/genealogy-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my research service: firm name and town, how a case runs and how long it takes, what the client receives in the folder, one sample case, researchers and specialties, fixed packages with prices, reading room address and hours, enquiry email and phone>. Replace the demo text, names, prices and photos first. Keep every id, data-8b-section, data-8b-motion and data-8b-part, the classes AGENTS.md lists, fifteen chart entries and four researchers. Never invent fees, memberships or client letters; ask me.

In a terminal

npx degit 8bsite/genealogy-website-template my-site

Genealogy website design prompt for any AI tool

Paste this genealogy website design prompt into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a research service's site from scratch, or hand it to a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.

Build a one-page website for a family history research service that hands clients a bound folder. Static HTML, CSS and a little GSAP; no framework.
Sections in order: index tabs as navigation, opening, archives, method in slips, the folder in four panels, a worked family tree of fifteen entries, four researchers, letters, the reading room, questions, three fixed-price packages, enquiry form, footer.
Type: Reddit Sans for all running text, with heavy uppercase headings; Playwrite US Trad only for handwriting such as photo captions, signatures and the huge pressed words.
Colours: #0d0d0d black desk, #e6ebed pale paper, #d4dce5 blue sheets, #cbcfc6 sage sheets, #c5b9c4 mauve sheets, #1b1b1b ink for text and rules.
Motion: one idea, the family tree pins for about one and a half screens, starts zoomed on the client and pulls back while each generation's lines draw. Respect prefers-reduced-motion.
Avoid: purple gradients, three icon cards, a centred hero with two buttons. Use pale paper sheets with a dotted grain and coloured index tabs on a black desk, and photos with perforated stamp edges.
Copy: short and concrete. Ask me for the town, method and timeline, folder contents, one anonymised case, researchers, package prices, reading room hours and enquiry address; never invent fees, memberships or client letters. Mark every placeholder.
One action: send an enquiry, the form reached from the tabs, the packages and the opening.
Phone: check at 390 px, 44 px tap targets.
Done when: no console errors, visible keyboard focus, and you list every placeholder.

Genealogy website design and motion

Palette

#0d0d0d the black desk behind the sheets, with a faint grain, and the stamp mask colour#e6ebed pale paper sheets, pale index tabs, text on the dark desk and button labels#d4dce5 blue paper sheets and tabs, and the fill of the button hover panel#cbcfc6 sage paper sheets and tabs, the ink bars under the archive items and the link hover highlight#c5b9c4 mauve paper sheets and tabs, and the highlight behind a question on hover#1b1b1b text on the paper, buttons, rules, chart dots and lines, the thread and dark step badges#474747 small grey text on paper: chart details and open entries, photo captions, the towns under the letters and form placeholders#f6f8f9 the paper slips (method steps, visit card, reply note, fee slip), the Story folder panel and tab, the reading window outline and the light edge of the pressed words

Fonts

Reddit Sans: all running text, in weights 400 to 800: tight uppercase 800 headings, 700 buttons, links and step titles, 600 labels, and regular body text
Playwrite US Trad: the handwriting: photo captions, the open chart entries, letter signatures and the huge pressed words, including Yours in the footer, at one weight

Paper sheets stand in one column, 820px wide at most, left of centre on the black desk with room on the right for the index tabs; on phones the sheets fill the width and the tabs run along the top. Each sheet pairs a large uppercase heading with a lead and one device: a list of spellings, slips, folder tabs, a pedigree grid, stamped portraits or fees. Four paper tints alternate; the archives and letters sections sit on the desk.

The page reads as a desk covered in paper. Sheets carry a dotted grain, most photos have perforated stamp edges, and large handwritten words such as Origins and Method are pressed into the sheets with a soft emboss. Colours and fonts are also listed in a DESIGN.md file.

Every value of this genealogy website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the genealogy website page

Navigation
Six fixed index tabs in four paper colours: Cover, Archive, Case, People, Fees, Write; down the right edge on wide screens, along the top on phones
The current tab sticks out further and a hovered tab slides out of the sheet edge, both by CSS and both still running with reduced motion.
One photo. Four spellings.
The first sheet: heading "One photo. Four spellings.", intro, two links, four spellings of a surname with their sources, two stamped photos and a ghost word
On load the heading rises, the intro, buttons and four spelling rows slide up in turn and the two stamped photos settle.
Every hand is readable
A ledger photo with a moving magnifier beside five kinds of entries that are read off it
Scrubbed to the scroll, a paper-edged window with an enlarged copy of the ledger travels down the dimmed photo while the five list titles are underlined one by one.
How a case runs
How a case runs: four step slips joined by a thread that draws itself
An ink thread draws itself from slip to slip as you scroll, and each tilted slip straightens onto its place when the thread reaches it.
Inside every folder
What is in the client folder: four tabs (Tree, Records, Maps, Story), each with a photo, text and two points
The tabs switch the four panels, with arrow keys, Home and End supported, and each photo drops into place the first time it comes into view.
The Marr folder
A worked example: a family tree of twelve named people and three open question marks, growing back four generations
The chart sticks for about one and a half screens of scrolling, starts zoomed on the client and pulls back while each generation's lines draw, dots appear and names wipe in.
Who does the reading
Four researchers as stamp portraits with a name and a specialty
The four portraits start joined in a perforated block and tear apart into their places, four in a row on wide screens and two by two on phones, while the names wipe in.
Letters back
Five client letters on slips that roll slowly sideways
The five letter slips drift left in a slow 70 second loop while the row is on screen, pausing on hover and focus.
Bring the shoebox
The reading room: heading, how to bring the family papers, a visit card with address and hours, and a room photo
As you scroll the room photo grows from a small tilted stamp to the full desk width while its image settles from a close crop.
Questions
Six questions and answers in native <details> elements
The pressed word Asked deepens with the scroll, and a colour bar sweeps behind a question on hover.
Fees
Three fixed-price packages with a price slip that turns over to the one being read
A price slip sticks to the screen and flips over to show the name and price of the package being read.
Open a case
Enquiry sheet: reply time, heading, email with copy button, phone, address and a short form
The reply-time slip drops into place when it first appears, and the pressed word Write deepens with the scroll.
Footer
Footer: name and note, two link columns, a huge pressed word and the copyright line with the Design: 8B credit
A raking light crosses the pressed word Yours from left to right while its shadow edges swing and deepen.

Before you publish the genealogy website site

Replace social preview image, favicon, email address, phone number and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Open a case button on the first screen lead to #contact (the enquiry form) now; point them to your enquiry or booking page, or keep #contact once the form is connected.
See what's in a folder link on the first screen lead to #folder now; point them to keep as is.
Book a visit link in the reading room section lead to #contact now; point them to your visit booking page or an appointment form.
Email address and the copy button in the contact section lead to a mailto link to hello@kinfold.example; the button copies the address now; point them to your enquiry address.
Phone link in the contact section lead to tel:+441904000000 now; point them to your office phone number.
The folder tabs and the copy button need JavaScript; without it all four folder panels show one under another, the copy button does nothing, the family tree has no connecting lines and the Cover tab stays marked, and the form sends nothing either way until you connect a service.
The email copy button needs the clipboard API, which is available only on secure (https) pages.
The pinned family tree stage and the sheet-wide effects can feel long on short screens.
The index tabs are the only fixed navigation (the footer repeats eight section links): there is no wordmark or menu, and the tab labels are small (11px, vertical on wide screens).

Questions about this genealogy website template

Is this a family tree website template free to use?

Yes. It is one index.html under the MIT license, free for your own site or a client's. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and the photos are Unsplash images listed in CREDITS.md. It is a service site with a sample tree, not a tree builder, all laid out in one scroll.

Can I change the family tree to my own client's?

Yes, by editing the HTML. The chart is a list of fifteen entries read by position: the first is the client, then two parents for each entry, with three left as open question marks. Keep fifteen or rework the generations in the script. Without JavaScript the connecting lines do not appear.

Is there a genealogy website design prompt for an AI agent?

Yes, above: a full prompt that works without this file. With the file, download index.html and AGENTS.md into one folder using the repository's curl lines, open it in Claude Code, Cursor or the Codex command line tool, and paste the short prompt. AGENTS.md lists the selectors the scripts use and the facts to ask for.

What must I keep when I edit it?

Keep every id, data-8b-section, data-8b-motion and data-8b-part, the classes AGENTS.md lists, the four portraits and the fifteen chart entries. Keep the header comment, the 8B meta tag and the Design: 8B footer link unless the site owner asks to remove it. With reduced motion on, entrance and scroll animations are off.

Does the enquiry form send anything?

No. As shipped it checks the fields, shows a thank-you line and resets, and sends nothing. Connect Formspree or Netlify Forms, or delete the form and its script. Without JavaScript there is no thank-you line, and the email copy button needs it and an https page.

Can I get a site like this without editing code?

Yes, through a different route. 8B's AI website builder designs a new site from a sentence, not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

Not a genealogy website? More free templates