diff --git a/README.md b/README.md
index e137663f..5673697c 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
# vizarr
[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/hms-dbmi/vizarr/master?filepath=example%2Fgetting_started.ipynb)
+[![launch ImJoy](https://imjoy.io/static/badge/launch-imjoy-badge.svg)](https://imjoy.io/#/app?workspace=vizarr&plugin=https://github.com/hms-dbmi/vizarr/blob/master/example/VizarrDemo.imjoy.html)
![Multiscale OME-Zarr in Jupyter Notebook with Vizarr](/screenshot.png)
diff --git a/binder/environment.yml b/binder/environment.yml
index 2a257316..62640a8d 100644
--- a/binder/environment.yml
+++ b/binder/environment.yml
@@ -14,4 +14,4 @@ dependencies:
- pip:
- imjoy>=0.10.0
- imjoy-jupyter-extension
- - imjoy-rpc
+ - imjoy-rpc>=0.2.11
diff --git a/example/README.md b/example/README.md
index 8c127536..04cb97b4 100644
--- a/example/README.md
+++ b/example/README.md
@@ -33,4 +33,8 @@ This notebook a contains a `vizarr` example visualizing a generic multiscale Zar
$ jupyter notebook mandelbrot.ipynb
```
+## Display an Image in an ImJoy Plugin [![launch ImJoy](https://imjoy.io/static/badge/launch-imjoy-badge.svg)](https://imjoy.io/#/app?workspace=vizarr&plugin=https://github.com/hms-dbmi/vizarr/blob/master/example/VizarrDemo.imjoy.html)
+
+This [demo plugin](VizarrDemo.imjoy.html) shows how to build an image visualization plugin with `vizarr` in [ImJoy](https://imjoy.io).
+
diff --git a/example/VizarrDemo.imjoy.html b/example/VizarrDemo.imjoy.html
new file mode 100644
index 00000000..cd21e79c
--- /dev/null
+++ b/example/VizarrDemo.imjoy.html
@@ -0,0 +1,83 @@
+
+[TODO: write documentation for this plugin.]
+
+
+
+{
+ "name": "VizarrDemo",
+ "type": "native-python",
+ "version": "0.1.0",
+ "description": "A demo plugin which uses Vizarr to visualize images",
+ "tags": [],
+ "ui": "",
+ "cover": "",
+ "inputs": null,
+ "outputs": null,
+ "flags": [],
+ "icon": "extension",
+ "api_version": "0.1.8",
+ "env": "",
+ "permissions": [],
+ "requirements": ["repo:https://github.com/hms-dbmi/vizarr.git", "conda: zarr scikit-image"],
+ "dependencies": []
+}
+
+
+
diff --git a/example/imjoy_plugin.py b/example/imjoy_plugin.py
index 5f984878..2c0ad096 100644
--- a/example/imjoy_plugin.py
+++ b/example/imjoy_plugin.py
@@ -44,7 +44,7 @@ async def setup(self):
async def run(self, ctx):
viewer = await api.createWindow(
- type="viv-plugin", src="https://hms-dbmi.github.io/vizarr"
+ type="vizarr", src="https://hms-dbmi.github.io/vizarr"
)
if self.view_state:
await viewer.set_view_state(self.view_state)
diff --git a/example/requirements.txt b/example/requirements.txt
index d5aa8b5c..99cb4413 100644
--- a/example/requirements.txt
+++ b/example/requirements.txt
@@ -3,7 +3,7 @@ ipywidgets>=7.0.0
scikit-image
imjoy>=0.10.0
fsspec
-imjoy-rpc
+imjoy-rpc>=0.2.11
zarr
numba
requests
diff --git a/multimodal_registration_vizarr.ipynb b/multimodal_registration_vizarr.ipynb
index afa2e850..862d52b6 100644
--- a/multimodal_registration_vizarr.ipynb
+++ b/multimodal_registration_vizarr.ipynb
@@ -673,7 +673,7 @@
"\n",
" async def run(self, ctx):\n",
" viewer = await api.createWindow(\n",
- " type=\"viv-plugin\",\n",
+ " type=\"vizarr\",\n",
" src=\"https://hms-dbmi.github.io/vizarr/\"\n",
" )\n",
" for img in self.images:\n",
diff --git a/package.json b/package.json
index 4ad42265..5cd903ba 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"deck.gl": "^8.2.4",
- "imjoy-rpc": "^0.2.19",
+ "imjoy-rpc": "^0.2.22",
"next": "^9.5.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
diff --git a/src/pages/index.js b/src/pages/index.js
index 92261df1..6958a70f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
+import { version as vizarrVersion } from '../../package.json';
import { layerIdsState, sourceInfoState, viewerViewState } from '../state';
const Viewer = dynamic(() => import('../components/Viewer'));
@@ -37,7 +38,11 @@ function App() {
useEffect(() => {
async function initImjoy() {
const { setupRPC } = await import('imjoy-rpc');
- const api = await setupRPC({ name: 'viv-plugin' });
+ const api = await setupRPC({
+ name: 'vizarr',
+ description: 'A minimal, purely client-side program for viewing Zarr-based images with Viv & ImJoy',
+ version: vizarrVersion,
+ });
const add_image = async (props) => addImage(props);
const set_view_state = async (vs) => setViewState(vs);
api.export({ add_image, set_view_state });