Skip to content
Collaborative vectorial annotation tool for ultra high resolution data.
JavaScript HTML Other
Branch: master
Clone or download
Latest commit 79a7207 Jul 13, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore: well, node6 will soon no longer be LTS, so might as well go to… Apr 2, 2019
app Merge pull request #197 from r03ert0/chore/fixVulnAuthTest Jul 13, 2019
bin merge upstream (#6) Jul 16, 2018
.eslintignore ignore .min.js files instead Oct 14, 2017
.eslintrc.js make eslint happier Apr 15, 2019
Dockerfile merge upstream (#6) Jul 16, 2018 Update Oct 15, 2017 fix merge Dec 1, 2015 merge upstream (#6) Jul 16, 2018
host.js logging in hostjs are now more meaningful, reflecting if the request … Nov 28, 2017
package-lock.json new feature: upload annotations programmatically Apr 17, 2019
package.json fix mocha vuln, fix auth test Jul 10, 2019
test.js debug: fixed selectRegion taking null as arg Apr 15, 2019


CircleCI Join the chat at


MicroDraw is a collaborative vectorial annotation tool for ultra high resolution data, such as that produced by high-throughput histology.

Data visualisation uses OpenSeadragon, and data annotation uses Paper.js.

Developer install instructions

as of 2018-07-09

Basic Steps

without docker

  • install nodejs

  • install mongo

  • checkout the repository git clone

  • cd microdraw

  • install the project

    • cd into microdraw
    • npm install
  • run the project

    • in one terminal window start mongod database and leave it run
    • in another terminal: cd into microdraw folder: npm start
  • open http://localhost:3000 to see MicroDraws landing page and click any of the data links provided

  • test data can be viewed at http://localhost:3000/data?source=/test_data/cat.json

with docker

Users management

Microdraw utilises passportjs to manage user login. By default, Microdraw is configured to use Github and local strageties.

You may also want to set the session secret by setting the environment variable: SESSION_SECRET=MySuperDuperSecret

Enable Github signin strategy

  • Get your Github developer keys for your local microdraw url
  • copy paste client id, client secret and callback URL into ./app/auth/github-keys.json

Enable Local signin strategy

  • Set environment variable: LOCALSIGNIN=true

n.b. it is highly advised to not use local strategies to manage users unless absolutely necessary.

Annotations management

Microdraw uses mongodb to manage the annotations by default. You may choose to use a different solution, by replacing ./app/db/db.js and replace with your own backend.

You can set a custom endpoint for mongodb by setting the environment variable : MONGODB=url-to-mongo:27017/db_name

Set up your own local data folder

  • cd to /public directory, put yourDataFolder here which must contain
    • a folder with the folders with your data tiles in dzi format
    • the .dzi file containing the information about your data (generated by the converter)
    • a json file containing information about your data in the following form:
      "pixelsPerMeter": 1000000,
      "tileSources": [


This project is licensed under GNU GPL v3 or any later version.

You can’t perform that action at this time.