vaRRI-js

Browser-only JavaScript port of vaRRI
Visualise RNA–RNA interactions directly in the browser — no server, no command-line tools required.

Upstream version: Based on the vaRRI Python source as of June 2026 (commit history at BackofenLab/vaRRI).
This port does not include the RNAfold/RNAplfold structure-prediction steps, which require external command-line tools.

Warning

AI-Generated Code Disclaimer: The source code of this project was generated by an AI and may contain errors or inaccuracies. It is recommended to review and test the code thoroughly before using it in a production environment.

---

Table of Contents

1. Overview
2. Project Structure
3. Quick Start
4. Input Website
   • Usage
   • Example Inputs
   • Export
5. JavaScript Library API
6. Input Format Reference
7. License

---

Overview

vaRRI-js is a pure JavaScript rewrite of the Python vaRRI toolkit. It takes RNA secondary-structure and sequence strings in dot-bracket notation, renders them with the Fornac library, and then applies all of vaRRI's post-processing (coloring, highlighting, index labeling, G-U basepair display, …).

What is excluded compared to the original Python vaRRI:

Python feature	Status
RNAfold structure prediction	✗ excluded (requires CLI tool)
RNAplfold accessibility prediction	✗ excluded (requires CLI tool)
Playwright/headless-browser rendering	✗ excluded — replaced by live browser DOM
FASTA file parsing from disk	✗ excluded — use textarea input instead
PNG/SVG file output from CLI	✓ replaced by in-browser download buttons

---

Project Structure

vaRRI-js/
├── index.html          # Input website
├── src/
│   ├── README.md       # JavaScript library documentation
│   └── vaRRI.js        # JavaScript library (main file)
├── fornac/
│   ├── d3.js           # D3.js v4 (vendored from upstream vaRRI)
│   ├── fornac.js       # Fornac library
│   └── fornac.css      # Fornac styles
└── README.md

---

Quick Start

Clone the repository and open index.html directly in a browser — no build step or server needed:

git clone https://github.com/BackofenLab/vaRRI-js.git
cd vaRRI-js
# simply open index.html in your browser, e.g.:
open index.html          # macOS
xdg-open index.html      # Linux
start index.html         # Windows

To use the library in your own HTML page, include the dependencies in the following order:

<link rel="stylesheet" href="fornac/fornac.css" />
<script src="fornac/d3.js"></script>
<script src="fornac/fornac.js"></script>
<script src="src/vaRRI.js"></script>

NOTE: The repository does not track node_modules/. If you want to run tests locally, create it after cloning using:

npm install
npm test

---

Input Website

Usage

1. Open index.html in a modern browser (Chrome, Firefox, Edge, Safari).
2. The page loads with a pre-filled 2-molecule example automatically.
3. Fill in or modify the fields in the left panel:

Field	Description
Structure	Dot-bracket structure string. Separate two molecules with &.
Sequence	RNA sequence (IUPAC characters). Separate two molecules with &.
Start index mol. 1/2	The number assigned to the first nucleotide of each molecule. Defaults to 1. 0 is not valid; negative offsets are supported.
Label interval	Display an index label every N nucleotides. Default: 10.
Coloring	strand — mol. 1 in light blue, mol. 2 in golden yellow. loop — Fornac default base-type coloring.
Highlighting	region — highlight the entire intermolecular region. basepairs — highlight only the basepair nucleotides. nothing — no highlighting.
Background highlighting	basepairs — translucent red polygon around basepair stacks. region — translucent red polygon over the whole region. nothing — disabled.
G-U basepairs as dashed lines	When checked, G-U basepairs are drawn with a dashed stroke.
Highlight subseq 1/2	Comma-separated start-end ranges (using the same index space as Start index). Example: 3-8 or 3-8,15-20.

4. Click ▶ Visualise to render.

Example Inputs

Three built-in examples can be loaded with the buttons at the top of the panel:

Button	Description
2-molecule example	A two-strand RNA-RNA interaction. Demonstrates strand coloring, region highlighting, and background basepair highlighting.
1-molecule example	A single RNA hairpin with Fornac default (loop) coloring.
Pseudoknot	A structure containing square-bracket pseudoknot notation […].

Export

After rendering, use the buttons in the export bar below the visualisation:

Button	Description
⬇ SVG	Downloads a self-contained SVG file with embedded Fornac CSS.
⬇ PNG	Rasterises the SVG to a canvas (2× resolution) and downloads a PNG.

---

JavaScript Library API

Include src/vaRRI.js after the Fornac dependencies. The library exposes a single global object vaRRI with the a set of respective functions.

The src directory provides a detailed vaRRI-js Library API documentation

---

Input Format Reference

Dot-Bracket Notation

vaRRI-js accepts standard dot-bracket notation with the following characters:

Character	Meaning
.	Unpaired nucleotide
( )	Watson-Crick basepair (standard)
[ ]	Pseudoknot basepair (square brackets)
{ }	Pseudoknot basepair (curly brackets)
< >	Intramolecular predicted basepair
&	Separator between two molecules

Two-Molecule Input

Separate structures and sequences of two RNA molecules with &:

Structure:  ..((((...))))...((...((...((..&............))...))...))..
Sequence:   ACGAUCAGAGAUCAGAGCAUACGACAGCAG&ACGAAAAAAAGAGCAUACGACAGCAG

The character positions before & belong to molecule 1; positions after & belong to molecule 2. Intermolecular basepairs are identified automatically as unmatched brackets: an opening bracket in molecule 1 that has no partner in molecule 1 is paired to a closing bracket in molecule 2 (and vice-versa).

IUPAC Sequence Characters

Accepted characters (case-insensitive):

Character(s)	Meaning
A C G U T	Standard nucleotides
R	A or G
Y	C or T/U
S	G or C
W	A or T/U
K	G or T/U
M	A or C
B	C, G or T/U
D	A, G or T/U
H	A, C or T/U
V	A, C or G
N	Any nucleotide

Start Index

Molecule positions are displayed using a 1-based index by default. You can change the start index to any integer except 0. Negative start indices are supported (useful when the visualised region is an excerpt of a longer sequence).

---

License

This project is a port of vaRRI. See LICENSE for the licence terms.

The bundled Fornac library (fornac/) is © 2014 Peter Kerpedjiev and is distributed under its own licence.