SeqViz

SeqViz is an open-source, embeddable library for interactive DNA sequence visualization and annotation on the web (Timmons et al. (2020)). It renders circular and linear maps, supports common formats via seqparse (Timmons (2022)), and displays features, primers, and annotations with fast SVG/Canvas rendering.

This package gives you two ways to use it in MyST Markdown and Curvenote:

1. seqviz directive — use a file path or NCBI/iGEM accession ID; the directive and seqparse run at build time and pass the parsed data to the widget.

2. Widget only — use the any:bundle directive with a manually constructed JSON body when you don’t need build-time parsing.

The demos below show each option. The seqviz directive is enabled for this project via the plugin in curvenote.yml.

Demo 1: By accession number¶

Render a sequence by NCBI (or iGEM) accession ID. Data is fetched and parsed at build time using seqparse. Here we use U49845.

Code:

:::{seqviz} U49845
:height: 500px
:viewer: both_flip
:::

Demo 2: By local file¶

Render a sequence from a local GenBank (or FASTA, JBEI, SnapGene, SBOL) file. The file is read and parsed at build time. This example uses the AGTR2.gb file included in this package.

Code:

:::{seqviz} ./AGTR2.gb
:height: 500px
:viewer: both
:::

Demo 3: Widget only (manual JSON)¶

Use the widget without the directive or seqparse by passing sequence and annotations directly in the any:bundle body. No build-time parsing — useful when you already have JSON or don’t use seqparse.

Code:

:::{any:bundle} https://curvenote.github.io/widgets/widgets/seqviz.js
{
  "height": "400px",
  "name": "J23100",
  "seq": "TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC",
  "annotations": [{ "name": "promoter", "start": 0, "end": 34, "direction": 1, "color": "blue" }],
  "viewer": "both_flip"
}
:::

Replace the URL with your hosted seqviz.js (e.g. ./dist/seqviz.js) when not using the CDN.

Installation¶

• Directive (Demos 1 & 2): Add the plugin to your build and ensure seqparse is available so the directive can parse files and accession IDs.

• Widget only (Demo 3): Host seqviz.js and use any:bundle; no plugin required.

Props and options¶

Widget / directive body¶

When using any:bundle or when the directive passes data to the widget:

Directive options¶

For :::{seqviz} path-or-accession:

The directive body can optionally override or extend parsed fields. See seqparse for supported formats and accession types.

How it works¶

• Widget: The seqviz.js bundle is an AnyWidget ESM module. It receives a JSON object (name, seq, annotations, viewer, height, etc.) and renders the sequence view in the browser.

• Directive: The seqviz directive in seqviz.mjs produces a custom block that a transform (in the same plugin) resolves. The transform uses seqparse to read a local file or fetch by accession, then merges the result with any directive body and turns the block into an any:bundle call with seqviz.js and the merged JSON.

Source¶

• Widget and directive: dev.curvenote.components — seqviz

• SeqViz library: Lattice-Automation/seqviz

• seqparse (parsing): Lattice-Automation/seqparse

Further reading¶

• SeqViz (Lattice-Automation/seqviz) — JavaScript DNA, RNA, and protein sequence viewer

• SeqViz plugin article (opensci.dev) — context and examples for the directive

• seqparse — supported file formats and accession IDs

• AnyWidget — widget model used by this package

• MyST Markdown widgets