Sequence Viewer

This javascript tool will allow you to display your sequence of DNA, protein, or others, formatted FASTA-like, and apply some visual improvment for selection and coverage


This is the classic display of a sequence.
Before displaying the sequence you can adjust some rendering options :

  • showLineNumbers (boolean) : Display or not the line numbers
  • wrapAminoAcids (boolean) : Add or not the layout with break-line and blank separation
  • charsPerLine (integer) : Choose the number of letters per Line (must be a multiple of 10) Default: 50
  • toolbar (boolean) : Add a toolbar allowing users to choose the number of letters per line.
  • search (boolean) : Add an input in the header to search for pattern in the sequence. Regular expression is supported.
  • title (string) : Allows to change the title. Default: "Protein Sequence"
  • sequenceMaxHeight (string) : Define the max-height of the sequence. Default: "400px"
  • badge (boolean) : Display the badge with sequence length. Default: true


You can also select and bring to light a part of the sequence.
This sequence will be highlight by the color of your choice.


A coverage with color codes can be apply to the sequence.
For this, you must provide a list, mapping all the sequence with some specific parameters :

  • start
  • end
  • color : text color
  • bgcolor : background color
  • underscore : add underline below the chars
  • tooltip : add tooltip
  • onclick : add click listener

With the coverage, it's also possible to give within the parameters an interval to highlight in the sequence.
An other array will be needed to display the legend of color codes.


The sequence-viewer includes two listeners :

  • onMouseSelection : When selecting a subpart of the sequence with the mouse.
  • onSubpartSelected : When a subpart of the sequence is highlighted.

Those methods take a custom function in parameter to connect the sequence-viewer events to the rest of your application.

Fork me on GitHub