ViennaRNA Web Services

Institute for Theoretical Chemistry

Font size: Increase font size Decrease font size Switch style sheet from default to highcontrast and back

RNA Secondary Structure Visualization Using a Force Directed Graph Layout

forna logo


The forna package provides a web interface for displaying RNA secondary structures using the force-directed graph layout provided by the d3.js visualization library.

The front end makes use of Bootstrap and Knockout.js for the user interfact while the back end uses Flask to serve the static files and provide a REST API. The RNA structure manipulation and graph construction is created using the python forgi RNA structure manipulation library and the provided script. We heavily depend on the python bindings of the ViennaRNA package.


Click on Add Molecule to draw a new secondary structure. The input should contain a sequence and a secondary structure in dot-bracket notation:


You can also use the FASTA format to add multiple molecule at once. If you do not enter a structure, it will calculate the MFE structure at 37°C for you.

In the FASTA header you can specify a name and optionally also the number of the first or last nucleotide:


Zooming can be accomplished using the mouse wheel. Dragging the canvas leads to panning.



Color the nucleotides according to their position in the molecule. Lower numbered nucleotides are closer to the 5' end and are colored green. Nucleotides in the middle are colored yellow whereas nucleotides near the 3' end are colored red.


Color the nucleotides according to the type of structure that they are in:

Green: Stems (canonical helices)
Red: Multiloops (junctions)
Yellow: Interior Loops
Blue: Hairpin loops
Orange: 5' and 3' unpaired region


Color according to the nucleotide types:

Yellow: Adenine
Green: Cytosine
Blue: Uridine
Red: Guanine


Create a custom coloring scheme. The colors for each nucleotide or sets of nucleotide are specified in the text box that appears when the 'set' button is clicked. The format is simple. Numbers entered interpolated to colors and mapped to the respective nucleotides (the first number colors the first nucleotide, the second the second, etc...).

          0.5 0.6 10 13.4
This will color the first four nucleotides such that the first two are lightly colored and the last two are more darkly colored. The scale is interpolated between the lowest and highest value. We currently only use the white-blue color scale, but this will be expanded shortly. Coloring specific nucleotides is possible using the following format:
8:red 10:blue 11:green
These directives will color the 8th nucleotide red, the 10th blue and the 11th green. Ranges of colors can also be entered:
        1-10:green 15-30:red  13,46,101:blue
This will color nucleotides 1-10 green and nucleotides 15-30 red and 13,46, and 101 blue.

Colors can be specified for each molecule individually by preceding them with the molecule's id

        1-10:green 15-30:red  13,46,101:blue
        0.98 .80 0.75
Color ranges and domains
The default color range is white to steelblue. Custom ranges can be specified by entering the following in the custom color screen.
        1-10:green 15-30:red  13,46,101:blue
        0.98 .80 0.75
Color domains can be specified in a similar manner. The domain defines the values over which the colors are spread:
        0.98 .80 0.75


Feel free to enter structures with pseudoknots. Here's the format:
Use your imagination!

Editing the Structure

Links can artificially be added by holding down the shift key and dragging from one nucleotide to another. This will form a spring-loaded bond between two nucleotides. This is useful for drawing interacting pairs of structures. Bonds can be deleted by holding down the shift key and clicking on a bond.

Centering the view

The view can be centered on molecules being displayed by pressing the 'c' key or by clicking on the crosshairs button in the lower left hand corner.


The force can be turned off by either hitting the space key or by flipping the switch in the lower left hand corner of the screen.

Friction / Wobbliness

How 'wobbly' a molecule appears can be adjusted by the friction slider in the settings menu just to the right of the colors menu. Lowering the friction (paradoxically) makes the molecule less wobbly and increasing it makes it more so.

Exterior loop layout

Exterior loops can be drawn in a circular fashion: Or left to float around: The option of which layout to use is left to the user with the "Circularize exterior loops" option in the "Add RNA Molecule" dialog.

PDB Files

Secondary structure can automatically be extracted from PDB files and displayed. Simply click on the dropdown arrow next to 'Add Molecule' and select 'Add PDB File'. This will import every RNA chain in the PDB file and display its secondary structure. Proteins will be added as nodes with a size proportional to their length. Interactions between separate protein and nucleotide chains are displayed as dashed lines. The secondary structure is extracted using MC-Annotate [1].


If you made use of forna in your scientific work, we would really appreciate a citation:

Kerpedjiev P, Hammer S, Hofacker IL (2015). Forna (force-directed RNA): Simple and effective online RNA secondary structure diagrams. Bioinformatics 31(20):3377-9.


Questions and/or comments can be sent to


This work was funded by the Austrian DK RNA program FG748004, by the Austrian FWF, project "SFB F43 RNA regulation of the transcriptome," and the European Commission under the Environment Theme of the 7th Framework Program for Research and Technological Development (Grant agreement no: 323987).


[1] Gendron P, Lemieux S, Major F(2001). Quantitative analysis of nucleic acid three-dimensional structures. J Mol Biol 308:919–936.