Skip to content

RBrowser Documentation

4.2 Quick Start

typekey/rbrowser-doc

Quick Start¶

Three common starter tasks with complete runnable code.

Task 1 — Launch the full browser via `mountBrowser`¶

import { mountBrowser } from "@rbrowser/main";

// Returns a { renderer, unmount } handle
const { renderer, unmount } = mountBrowser("rbrowser");

That's it — the toolbar + default GRCh38 data come up immediately. renderer is the synchronously-available renderer instance you can navigate / drive its managers with right away; unmount() tears the whole browser down.

Task 2 — Headless renderer with a custom initial locus¶

import { TranscriptBrowserRenderer, defaultConfig } from "@rbrowser/main";

const renderer = new TranscriptBrowserRenderer({
  ...defaultConfig,
  renderer: {
    ...defaultConfig.renderer,
    containerId: "rbrowser",
  },
  locus: {
    rna: { transcript: "VAMP3-201", up: 5000, down: 5000 },
    mode: "rna",
  },
});

renderer.mount();

import { TranscriptBrowserRenderer, defaultConfig } from "@rbrowser/main";

const renderer = new TranscriptBrowserRenderer({
  ...defaultConfig,
  renderer: { ...defaultConfig.renderer, containerId: "rbrowser" },
});

renderer.mount();

// Add a BigWig channel
renderer.channelManager.addDirect({
  name: "RNA-Seq (sample 1)",
  plot: "bar",
  data: {
    method: "remote",
    format: "bigwig",
    url: "https://example.com/rnaseq.bw",
  },
  style: { height: 60, color: "#3867d6" },
});

// Listen for navigation
renderer.setNavigationChangeCallback((e) => {
  console.log(`${e.source} → ${e.chr}:${e.start}-${e.end}`);
});

// Navigate
renderer.region = "VAMP3-201:5000:5000";

Troubleshooting¶

Container has zero size — canvas invisible¶

The #rbrowser container needs a computable size. Give it explicit dimensions, or let it grow inside a flex / grid layout (as the example repo does):

/* explicit dimensions */
html, body, #rbrowser { width: 100%; height: 100%; margin: 0; }

/* or: fill via flex (what the example repo does) */
body { display: flex; height: 100vh; margin: 0; }
#rbrowser { flex: 1; min-width: 0; }

"Container element #rbrowser not found"¶

mountBrowser calls getElementById immediately. Make sure the DOM is ready before calling it (place the script at the end of <body>, or wait for DOMContentLoaded).

No data shows up¶

Check the network panel. The default config uses public GRCh38 data sources; for shared/public endpoints you may hit a CORS policy, which RBrowser handles automatically. Swap in your own reference — see IReferenceConfig.