For developers
These pages show how to put genomic tools into a teaching web page. Every example is live, and you can open it, read its code, download it and change it.
These pages are for anyone who builds teaching pages: lecturers who write their own course sites, learning technologists, and research software engineers. They cover a genome browser open at the right gene, a protein structure with a variant picked out, a network that students can click through, and R or Python that runs with nothing to install.
Topics
- Embedding genome browsersPut igv.js or JBrowse 2 in a page, load your own tracks, and link to UCSC and Ensembl.
- Showing sequences and alignmentsShow sequences and multiple alignments with Nightingale, or in a few lines of SVG.
- Embedding 3D structure viewersEmbed Mol*, 3Dmol.js or NGL, load PDB and AlphaFold models, and highlight residues.
- Drawing networks with Cytoscape.jsDraw interactive networks with Cytoscape.js and load them from STRING or Cytoscape.
- Working with GalaxyLink into Galaxy, list training tutorials live, and set up a class with BioBlend.
- Running R and Python in a pageRun R with webR and Python with Pyodide in a page, or publish a JupyterLite site.
- Drawing phylogenetic treesDraw trees from Newick files with phylotree.js or d3, and link to Nextstrain.
- Charting genomic dataMake interactive Manhattan plots, volcano plots and heatmaps with Vega-Lite.
How the examples work
Every example is a single HTML file. It loads its libraries from a public CDN at a fixed version, so it keeps working when a library changes, and most check the file’s integrity hash so that a tampered copy will not run. Each guide shows the example running, then its full code, with links to open it on its own or download it. Copy the file to your own site, or open it straight from your computer, and change it for your course.
The data come from public services that allow other websites to use them, such as the UCSC Genome Browser, the RCSB Protein Data Bank, AlphaFold DB and STRING, or from small files that sit next to the examples. Each guide says which, so you know what your page depends on.
We test every example in Chromium (version 141 in our tests) before we publish it, and we date the versions we use. If an example stops working, tell us on GitHub.
Before you build
- Getting started
- How to host a teaching page on GitHub Pages, fix library versions, serve data files that other sites can read, and plan for classroom networks.
- Accessibility
- How to make interactive genomics views work with a keyboard and a screen reader, use colour and motion with care, and write text versions that teach.