Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


                                       ____    _     __     _    ____
   _                                 |____,--|#|---|##|---|#|--.__|_|
((_____((_________________________,--------[JW](___(____(____(_==)        _________
                               .--|##,----o  o  o  o  o  o  o__|/`---,-,-'=========`=+==.
                               |##|_Y__,__.-._,__,  __,-.___/ J \ .----.#############|##|
                               |##|              `-.|#|##|#|`===l##\   _\############|##|
                              =======-===l          |_|__|_|     \##`-"__,=======.###|##|
                                                                  \__,"          '======'

NPM version

npm install -g sniper

CLI Server for Snippets (Visualization examples).

How to use

1. specify all global dependencies in your package.json

  "sniper": {
    "js": ["/build/msa.js"],
    "css": ["/css/msa.css"],
    "first": "msa_show_menu"

js: (array) all js dependencies (paths starting with /build will be ignored at the BioJS registry) (required) first: name of the snippet to be displayed as first example on the BioJS registry (required) css: all css files you need (optional)
snippets: (optional) all snippet folders (default: ["snippets"])

More attributes:

  • buildCSS (will replace css)
  • buildJS (will replace js)

The build attributes can be used to specify alternative locations - in any case the registry will ignore js resources starting with build.

2. Create snippets

Create js files in the examples folder.

var app = require("your-awesome-component");
var instance = new app(yourDiv);

You can safely assume that the variable yourDiv is your main div. Use if your component expects an id. If you dislike this handy wrapping, you can create your own <same-filename>.html file. (In case there is no <same-filename>.html the sniper will automatically generate one with a div and a randomId - you have access to this div as DOM reference via yourDiv).

3. Run the server

sniper <your-dir>

If is ., you don't need to have this argument.

Now you can open localhost:9090.

There are there modes:

  1. Overview mode/list


  1. List all


  1. List one/detail view


  1. Emulate the BioJS registry


(will use the published npm source)

The files are refreshed on every reload.

4. I don't want to run the sniper tool


sniper -c 

This will compile all the snippets to a minimal HTML version, remember that only the example snippets will be uploaded to the registry.

5. If you need to add extra js-Files (or css) for a snippet

... just create the ```same_filename.json`.

{"js": ["<more js dependencies>"]}

6. What other CLI options are available?

  Usage: sniper [options] [pkgdir]


    -h, --help                 output usage information
    -V, --version              output the version number
    -p, --port <number>        port to run
    -c, --compile [directory]  Creates static output
    -v, --verbose              Increase verbosity


How can I request relative data? (e.g. for JSBin)

If you want to download data via XHR you might normally write data/data.json - make it relative by appending ./. So you would have ./data/data.json

How can I transmit my events to the registry?

add this line somewhere after you created your application instance in the snippet. E.g. if you make an XHR request it has to be in the callback.

//@biojs-instance=<variable name of your component>

(this is - under the hood - replaced with instance.onAll and then sends messages to the parent frame).

How does it work?

  • normal file server
  • if you go into one of the special snippet folders, the general config specifies which js and css needs to be there for every snippet.
  • a snippet can either work with yourDiv (a predefined variable pointing to a div container) or define a custom, minimal .html
  • also every snippet can define custom settings, like extra js

An example can be found at biojs-vis-msa.

Why snippets?

Reason: visually appealing example files in the registry (inspired by Angular JS )


CLI Server for Snippets



Code of conduct





No releases published


No packages published