Skip to content

Getting Started

Build and install a minimal RBrowser plugin in three files.

Install

npm install --save-peer react
npm install @rbrowser/plugin-sdk

React is a peer dependency

The SDK does not bundle React. Plugins that don't use React can omit it — the @rbrowser/plugin-sdk/hooks subpath is the only React-dependent entry point.

Quick start

A minimal plugin is three files.

1. manifest.json

{
  "id": "com.example.hello",
  "name": "Hello RBrowser",
  "version": "0.1.0",
  "apiVersion": "1",
  "minHostVersion": "0.1.0",
  "entry": "index.js",
  "permissions": ["state:read", "navigation:write", "highlight:write"],
  "panel": { "position": "right", "title": "Hello", "defaultWidth": 280 }
}

See Manifest for every field.

2. src/index.tsx

import { createRoot } from 'react-dom/client'
import { definePlugin } from '@rbrowser/plugin-sdk'
import { RBrowserHostProvider, useSelectedRNA, useSpecies } from '@rbrowser/plugin-sdk/hooks'

function Panel() {
  const species = useSpecies()
  const rna = useSelectedRNA()
  return (
    <div style={{ padding: 12 }}>
      <h3>Hello, {species.name}!</h3>
      {rna ? <p>Selected: {rna.transcriptName ?? rna.transcriptId}</p> : <p>No transcript selected.</p>}
    </div>
  )
}

export default definePlugin({
  render(container, host) {
    createRoot(container).render(
      <RBrowserHostProvider host={host}>
        <Panel />
      </RBrowserHostProvider>
    )
  }
})

The default export is your Plugin Module; host is the Host Bridge.

3. Pack and install

# build your bundle (e.g. via Vite/Rollup) → dist/index.js
npx rbrowser-plugin pack --manifest manifest.json --bundle dist/index.js --out dist/hello.rbp

Then open RBrowser → Plugin Store → drag dist/hello.rbp into the panel. See Packaging & CLI for the full .rbp format and CLI options.

Next steps