Reference

Complete prop reference for the SeqViz Dash component — every attribute, its type and default, and a Python example you can paste into a Dash app.

Try props interactively GitHub

Import: from dash_seqviz import SeqViz

All props are optional. Position and range fields (start, end) are zero-indexed base positions. Direction fields use 1 for forward strand, -1 for reverse, 0 for none. Want to drive every prop live? Open the component explorer.

Core

The minimum set to render a sequence.

id#

string

The identifier used to reference this component in Dash callbacks. Required if you intend to read or write the component's props from a callback.

SeqViz(
    id="my-seqviz",
    seq="ATGCATGCATGC",
)

seq#

string

The sequence to render. Accepts DNA, RNA, or amino-acid sequences. Case is preserved but not meaningful; whitespace is ignored.

SeqViz(seq="ATGCGTACGTTAGCGATCGATCGATAGCTAGCTAG")

name#

string

Display name for the sequence. Rendered in the center of the circular viewer, and used as a label elsewhere in the UI.

SeqViz(
    seq="...",
    name="pUC19",
)

viewer#

"linear" | "circular" | "both" | "both_flip" default: "both"

Layout of the viewers. "both" shows circular on the left, linear on the right; "both_flip" swaps them. "linear" and "circular" render a single view.

SeqViz(seq="...", viewer="circular")

style#

dict (CSS)

CSS styles applied to the component's outer container. Almost always used to set height and width.

SeqViz(
    seq="...",
    style={"height": "500px", "width": "100%", "border": "1px solid #e2e8f0"},
)

Content layers

Overlays that annotate or decorate regions of the sequence.

annotations#

list of shape default: []

Named, optionally directional regions drawn as labeled arcs (circular) or bars (linear) above the sequence. Use for genes, CDS, promoters, terminators, RBS, etc.

{"start": int, "end": int, "name": str, "direction"?: 1 | -1 | 0, "color"?: str}
SeqViz(
    seq="...",
    annotations=[
        {"start": 100, "end": 400, "name": "GFP",
         "direction": 1, "color": "#2a9d8f"},
        {"start": 450, "end": 500, "name": "Terminator",
         "direction": 0, "color": "#6c757d"},
    ],
)

primers#

list of shape default: []

Directional primers rendered as arrows. direction is required: 1 for forward, -1 for reverse.

{"start": int, "end": int, "name": str, "direction": 1 | -1, "color"?: str}
SeqViz(
    seq="...",
    primers=[
        {"start": 0,   "end": 22,   "name": "M13F",
         "direction": 1,  "color": "#2563eb"},
        {"start": 980, "end": 1000, "name": "M13R",
         "direction": -1, "color": "#e76f51"},
    ],
)

highlights#

list of shape default: []

Colored background fills behind a range of bases. Useful for drawing attention to regions without labeling them.

{"start": int, "end": int, "color"?: str}
SeqViz(
    seq="...",
    highlights=[
        {"start": 50, "end": 75, "color": "#fde68a"},
    ],
)

translations#

list of shape default: []

Ranges whose amino-acid translation is drawn beneath the sequence. direction is required: 1 translates the forward strand, -1 the reverse strand.

{"start": int, "end": int, "direction": 1 | -1, "name"?: str, "color"?: str}
SeqViz(
    seq="...",
    translations=[
        {"start": 100, "end": 499, "direction": 1, "name": "GFP ORF"},
    ],
)

enzymes#

list of (string | shape) default: []

Restriction enzymes whose recognition sites should be marked on the sequence. Pass built-in enzyme names as strings (250+ bundled with seqviz) or define custom enzymes with a shape.

str # built-in enzyme name {"name": str, "rseq": str, "fcut": int, "rcut": int, "color"?: str, "range"?: {"start": int, "end": int}}
# Built-in enzymes by name
SeqViz(seq="...", enzymes=["EcoRI", "BamHI", "HindIII"])

# Custom enzyme
SeqViz(
    seq="...",
    enzymes=[
        {"name": "MyCutter", "rseq": "GAATTC",
         "fcut": 1, "rcut": 5, "color": "#e76f51"},
    ],
)

Appearance

Colors, zoom, and layout details.

colors#

list of str default: []

Fallback palette for annotations, translations, and highlights that do not set their own color. Colors are assigned in order and wrap around.

SeqViz(
    seq="...",
    colors=["#2a9d8f", "#e76f51", "#f4a261", "#264653"],
    annotations=[
        {"start": 0,   "end": 100, "name": "A"},
        {"start": 200, "end": 300, "name": "B"},
    ],
)

bpColors#

dict default: {}

Per-base coloring. Keys are either bases ("A", "T", "G", "C") for all occurrences, or integer indexes for coloring specific positions.

# Color every base by identity
SeqViz(
    seq="...",
    bpColors={
        "A": "#ff6b6b", "T": "#4ecdc4",
        "G": "#ffe66d", "C": "#95e1d3",
    },
)

# Color only specific positions
SeqViz(seq="...", bpColors={42: "#e76f51", 43: "#e76f51"})

zoom#

shape default: {"linear": 50}

Zoom level of the linear viewer. 0 is maximum overview (whole sequence in one row); 100 is base-level detail.

{"linear": int # 0-100}
SeqViz(seq="...", zoom={"linear": 80})

showComplement#

bool default: True

Whether to render the complement strand beneath the sequence in the linear viewer. Set False for a single-strand view (useful for protein or RNA sequences).

SeqViz(seq="...", showComplement=False)

Behavior

Input and runtime knobs.

rotateOnScroll#

bool default: True

When True, scrolling over the circular viewer rotates it. Set False so the page scrolls normally through the viewer — preferred when embedding inside a longer Dash layout.

SeqViz(seq="...", rotateOnScroll=False)

disableExternalFonts#

bool default: False

Set True to skip downloading the external web fonts used by seqviz. Useful for offline or air-gapped deployments where font CDNs are unreachable.

SeqViz(seq="...", disableExternalFonts=True)

enableCopyEvent#

bool default: True

When True, Ctrl/Cmd+C inside the viewer copies the currently selected sequence range to the clipboard. Set False to leave copy handling to the surrounding page.

SeqViz(seq="...", enableCopyEvent=False)

enableSelectAllEvent#

bool default: True

When True, Ctrl/Cmd+A inside the viewer selects the entire sequence. Set False to defer to the browser's default Select-All.

SeqViz(seq="...", enableSelectAllEvent=False)

State & events

Props you read from — or write to — in Dash callbacks.

selection#

shape

The currently selected range. Read via Input(..., "selection") to react to user selections, or write via Output(..., "selection") to programmatically select a range.

{"start": int, "end": int, "clockwise"?: bool}
from dash import Input, Output, callback

@callback(
    Output("info", "children"),
    Input("seqviz", "selection"),
)
def show_selection(sel):
    if not sel:
        return "No selection"
    return f"Selected {sel['start']} - {sel['end']}"

searchResults#

list read-only

Match ranges produced by the search prop. Updated by the component; treat as read-only.

@callback(
    Output("hit-count", "children"),
    Input("seqviz", "searchResults"),
)
def count_hits(results):
    return f"{len(results or [])} matches"

onSelection#

function

JavaScript callback invoked on every selection change. Passed through to the underlying seqviz library for JS-only consumers — in a Dash app, prefer reading the selection prop via Input.

onSearch#

function

JavaScript callback invoked when search results change. In a Dash app, prefer reading searchResults via Input.

Dash internal

Managed automatically by Dash — you do not set these yourself.

setProps#

function internal

Dash supplies this automatically so the component can report prop changes back to the Python callback layer. You never set this manually.