Do my visitors need an Evagene account to use the embed?

No. The drawing canvas runs in the browser without authentication. Visitors can draw, annotate, and export their pedigree to PDF, PNG, SVG, GEDCOM, or CanRisk format directly from the embed. Their pedigree is not saved to an Evagene account unless they choose to sign in and save.

Free embed

Embed Evagene's pedigree drawing tool — free iframe for any website

Drop one short <iframe> snippet into any website, blog, course page, learning management system, or app, and you get the full Evagene pedigree drawing canvas. NSGC-compliant notation, gesture drawing, GEDCOM and CanRisk export, and a 1,900-entry catalogue, all running in the browser. No install, no signup, no API key. Free during alpha for educators, students, researchers, bloggers, and family-history users.

Last reviewed: 10 May 2026

Evagene ships two free embeds — pick by goal

If you are not sure which embed fits your situation, the short answer:

Drawing embed ·You're on this page. Visitors create pedigrees from scratch in a live canvas. Anonymous, no signup, free. Best for teaching, blogs, course pages, LMS modules, family-history sites.
Viewer embed ·Read-only display of an existing pedigree fetched from an Evagene account. API-key authenticated (or public-pedigree mode). Best for research dashboards, published-paper companion sites, EHR / patient-portal display patterns. See the viewer embed page →

Both embeds can be used together — for example, a teaching page that uses the drawing embed for student practice and the viewer embed for a worked-example case study.

Live demo — the embed below is the real tool

This page embeds the drawing canvas with the same iframe code shown below. Try drawing a small family: a circle for a female, a square for a male, a line between them for a partnership, and a line down to a child. Use the toolbar inside the canvas for symbol details and exports.

For research, education, and family-history documentation. Not for real patient data.

Get the embed code

Copy the snippet below into the HTML of your page. It is the same iframe used in the live demo above.

embed.html

<iframe
  src="https://evagene.net/draw"
  title="Draw a pedigree — Evagene"
  width="100%"
  height="700"
  style="border:1px solid #e0e0e0; border-radius:8px; max-width:1000px;"
  loading="lazy"
  referrerpolicy="no-referrer">
</iframe>

The defaults are sensible: loading="lazy" defers the iframe load until the user scrolls to it (good for page-speed scores), referrerpolicy="no-referrer" keeps the embedding URL out of analytics noise, and title covers screen-reader accessibility. Adjust height and max-width to fit your layout.

What the embed gives you

The iframe loads the live Evagene drawing canvas at evagene.net/draw. Visitors get the same drawing surface that registered Evagene users see, with the full feature set:

Gesture drawing as the primary input mode — circle for female, square for male, diamond for unknown / unspecified sex; line between two for a partner connection; descend for child; chevrons for twins.
NSGC-compliant notation by default. Affected fills, the proband arrow, deceased diagonals, consanguinity double-lines, pregnancy outcomes, adoption brackets — all rendered to the 2022 NSGC standard.
Disease and trait annotation against the 1,900-entry Evagene catalogue (ICD-10, OMIM, HPO, HGNC mapped).
Exports: PDF, PNG, SVG for the printable artefact; GEDCOM 5.5.1 for genealogy interchange; PED for linkage; Phenopackets v2 for phenotype-aware exchange; CanRisk 2.0 for the off-platform BOADICEA bridge to canrisk.org.
Consanguinity detection with Wright's coefficient calculated from the loop structure.
Mobile-responsive when embedded at width="100%".

Where to use it

The embed is designed for educational, research, and personal-documentation contexts. Some patterns worth highlighting:

Genetics teaching pages

Drop the embed into a Mendelian-inheritance lesson page so students can draw the pedigree from a worked example as they read. Pair with the Evagene reading pathways for a structured curriculum.

Biology textbook websites and OERs

For online biology textbooks (LibreTexts, OpenStax-style sites) and open educational resources, the embed gives readers an active drawing surface alongside the static text and figures.

University course pages and LMS modules

Moodle, Canvas, Blackboard, and Brightspace all support iframe embeds in pages. Use the embed in the practical-skills section of a clinical-genetics MSc module or an undergraduate genetics short course.

Research-lab outreach pages

Labs running outreach or recruitment for family-based research can include the embed as a "draw your family history before our consultation" tool, with the family later imported via GEDCOM into the formal study system. Outreach use only; not for collecting clinical data.

Blog posts and articles about genetics

Science writers covering inheritance patterns, hereditary cancer, or family-history topics can embed the canvas so readers can experiment as they read. Adds depth that a static pedigree image can't.

Genealogy and personal family-history sites

Hobbyist genealogy projects can use the embed to draw a structured pedigree of a family alongside the genealogical narrative. Export to GEDCOM if you want the same family in your genealogy software.

Drawing embed vs viewer embed — full comparison

The two free Evagene embeds solve different problems. The matrix below is the same on the viewer embed page so you get a consistent answer whichever page you land on.

Aspect	Drawing embed (this page)	Pedigree viewer embed
Primary purpose	Visitors create / edit a pedigree	Visitors view an existing pedigree
Embed mode(s)	One iframe, one URL (`evagene.net/draw`)	Three modes: iframe, raw SVG, or JavaScript snippet
Data source	Visitor draws from scratch (or imports GEDCOM in-canvas)	Specific pedigree ID fetched from an Evagene account
Authentication	None — anonymous	API key (server-side) for private pedigrees, or public-pedigree mode
Interactivity	Full drawing, annotation, export	View interactivity (zoom, pan, focus); read-only
Persistence	Visitor's pedigree is local until exported (PDF / PNG / SVG / GEDCOM / CanRisk)	Pedigree lives in the Evagene account; embed reflects current state
Live updates	N/A — visitor controls the canvas	Re-render on `pedigree.updated` webhook
Best contexts	Teaching pages, OERs, course modules, blog articles, outreach, family-history sites	Research dashboards, published-paper companion sites, public-pedigree research figures, web-content display patterns
Cost	Free, alpha	Free, alpha (public pedigrees); API-key tier for private

Which embed should I use? — common scenarios

If the comparison table is more detail than you need, the scenario table below maps "what I'm trying to do" directly to "which embed". The same table appears on the viewer embed page.

Your goal	Pick	Why
Teaching Mendelian inheritance — students draw a pedigree as they read	Drawing	Anonymous, no auth, immediate practice surface
Blog post on hereditary cancer — readers experiment with a pedigree	Drawing	Same; open access, drop-in iframe
LMS module (Moodle / Canvas / Blackboard) for pedigree-drawing exercise	Drawing	Iframe drops into LMS pages; no per-student account
Genealogy hobbyist site — visitor draws their own family	Drawing	Visitor produces their own structured family record, exports GEDCOM
Outreach page for a hereditary-disease charity — no signup required	Drawing	Anonymous canvas keeps the page low-friction
Companion site for a published research paper showing the family pedigree	Viewer (public)	Read-only display of an exact pedigree the authors authored in Evagene
Research dashboard rendering many pedigrees alongside variant tables	Viewer (JS snippet)	Inline SVG, page CSS reaches the diagram, batch-rendered from API
Static SVG of a specific pedigree for a printable PDF or slide	Viewer (raw SVG)	Vector, scales for print without quality loss
Web-content frame inside an EHR / patient portal showing the team's pedigree	Viewer (iframe + API key)	Read-only display of an existing record, key held server-side
Course site that needs both — students draw on one page; a worked-example case study is shown on another	Both	Pair the two embeds — drawing for practice, viewer for authoritative case display

Still uncertain? The simplest heuristic: if your visitors should create a pedigree, use the drawing embed. If your visitors should see a specific pedigree you (or your team) have already built, use the viewer embed.

Using both embeds together

The two embeds are complementary. Where the same project benefits from both, common pairing patterns:

Course site — learn-by-doing then learn-by-example. Drawing embed on the practice / exercise pages; viewer embed (public-pedigree mode) on the worked-example case-study pages so students compare their pedigree to the authoritative version.
Research lab outreach + dashboard. Drawing embed on the public outreach / family-recruitment page (visitors draw their family before contacting the lab; export GEDCOM, attach to an enquiry email); viewer embed (JS snippet) inside the lab's internal research dashboard for the same family once it has been formally captured in Evagene.
Blog post + paper companion site. Drawing embed in a popular-science blog explaining hereditary cancer (readers experiment); viewer embed on the linked paper's companion site showing the published family pedigree statically.
Genetic-counselling teaching module + case archive. Drawing embed for the trainee to draw the family from a vignette; viewer embed displaying the consensus pedigree the panel built during the case discussion.

Customising the iframe

width="100%" — the canvas grows to the parent container, which is what you want for responsive layouts. Combine with a max-width to keep the canvas a comfortable working size on wide screens.
height — 700–800px is the sweet spot for desktop drawing of a typical three-generation family. Increase for larger families; reduce only if you are short on vertical space.
style="border:…; border-radius:…; max-width:…;" — the default 1px grey border with 8px rounded corners reads well in most designs. Override to match your site's design system.
loading="lazy" — defers iframe loading until the iframe approaches the viewport, which is better for Core Web Vitals scoring on long article pages. Drop this attribute if the embed is above the fold and you want the canvas ready immediately.
referrerpolicy="no-referrer" — keeps your hosting URL out of Evagene's request logs. A privacy-friendly default; remove only if you specifically want to send the referrer.
title — required by accessibility standards (WCAG 2.1 SC 4.1.2). Set it to something specific to your page if the default ("Draw a pedigree — Evagene") needs more context.

Privacy, data, and the alpha boundary

Important notes for educators, science writers, and researchers thinking about where the embed fits:

Pedigree drawing happens client-side. The visitor's pedigree lives inside the iframe; the embedding site does not receive it. The embedding site's analytics see a normal page view but not the pedigree contents.
Visitors do not sign in. The embed needs no Evagene account. If a visitor wants to save the pedigree across sessions, they sign in or join the alpha waiting list separately.
Family-history data implicates relatives. A pedigree records information about people who have not personally consented to its capture. For teaching demonstrations, use anonymised or fictional families. For real family-history work, use the embed for personal documentation only.
Not for real patient data. Evagene's alpha is a research, education, and family-history-documentation programme. The alpha terms differ from the marketing-site Privacy Policy; the alpha is not certified for clinical use, has no formal data-protection compliance posture, and must not be used to store or process real patient data. Read the Terms before encouraging clinical or patient use.
Educational positioning. Evagene is positioned as an academic, research, and educational pedigree modelling platform. It is not a medical device, not clinical decision support, and not a diagnostic, screening, referral, or treatment tool. Do not embed it as part of a clinical workflow.

Frequently asked questions

Is the embed really free?

Yes. Free during the alpha programme — no signup, no API key, no usage limits for ordinary educational and personal use. You drop the iframe into your page and the canvas works for any visitor.

What is the difference between this and the embeddable pedigree viewer?

This embed is the live drawing canvas — visitors create pedigrees from scratch. The pedigree viewer embed is a read-only display of an existing pedigree fetched from Evagene. Drawing for teaching and creation; viewer for display.

Do my visitors need an Evagene account?

No. The drawing canvas runs in the browser without authentication. Visitors can draw, annotate, and export to PDF / PNG / SVG / GEDCOM / CanRisk directly from the embed. Their pedigree is not saved to an Evagene account unless they choose to sign in.

What can be drawn in the embedded canvas?

Full NSGC-compliant pedigrees: sex symbols, partner connections, descent, sibship, twins, affected status, deceased status, consanguinity loops with Wright's coefficient, pregnancy outcomes, adoption, carrier annotations, the proband marker. Same gesture drawing, NSGC notation, and 1,900-entry catalogue as the full Evagene tool.

Can I customise the size and look?

Yes — standard iframe attributes (width, height, max-width) and inline style. The default 1px grey border with 8px rounded corners is a sensible starting point; override for your design system.

Does the iframe leak data to the embedding site?

No. The pedigree data lives inside the iframe; the embedding site does not receive it unless the visitor explicitly chooses to share, copy, or export. Pair the embed with referrerpolicy="no-referrer" as in the snippet to keep visit context out of the request.

Can I use the embed for clinical work?

No. Evagene is positioned as an academic, research, and educational pedigree modelling platform — not a medical device, not clinical decision support, not a diagnostic or screening tool. Use the embed for teaching, research demonstration, blog posts, online courses, and family-history documentation. Do not enter real patient data into the alpha embed.

Where does the embed work?

Any HTML page that allows iframes — WordPress, Ghost, Squarespace, Wix, static sites, Notion (via embed blocks), Moodle / Canvas / Blackboard / Brightspace LMS modules, Hugo / Jekyll / Astro / Next.js sites, and most blogging platforms. Modern browsers (Chromium, Firefox, Safari); mobile-responsive when embedded with width="100%".