JS9JS9 Docs Demos GitHub

Getting Started with JS9

JS9 brings the astronomical image display and analysis of DS9 to the browser. FITS I/O, WCS, and image processing run client-side in WebAssembly, so display and much of the analysis work with no server at all.

There are two ways to use JS9:

  • The editor — a complete image viewer + analysis UI you drop onto a page with one call.
  • The library — the JS9 public API, to drive JS9 from your own interface and scripts.

Quick start

Include the JS9 files, add an empty <div>, and call JS9.create() with its id:

<link rel="stylesheet" href="js9-allinone.css">
<script src="js9-allinone.js"></script>

<div id="viewer"></div>
<script>
  JS9.create("viewer", {
    image: "myimage.fits.gz",
    opts: { colormap: "viridis", scale: "log" }
  });
</script>

That builds a full editor inside #viewer and loads your image. Prefer no script? Use the declarative form: 

<div class="JS9Editor" data-image="myimage.fits.gz" data-colormap="viridis"></div>

Pass layout: "viewer" or "minimal" for a lighter UI, and toggle individual parts (menubar, toolbar, colorbar, panner…). See Add JS9 to a Web Page for the layouts and the classic hand-placed-div approach.

Installation

Load the files from a CDN, or clone and self-host.

CDN

Load JS9 straight from a CDN — no build step. Pick a source:

<link rel="stylesheet" href="https://js9.sarhatabaot.net/js9-allinone.css">
<script src="https://js9.sarhatabaot.net/js9-allinone.js"></script>

These URLs always serve the latest build of the master branch and are not versioned, so the files can change under you. That is fine for trying JS9 out. For production, pin a version: download js9-allinone.* from a GitHub release (e.g. 3.10.0) and self-host it, or use the npm source from 3.10.1 on.

Clone & self-host

git clone https://github.com/sarhatabaot/js9
cd js9
npm install        # also builds the deployable site into _site/
npm run serve      # preview at http://localhost:8080

Copy the built files to your web server: either the single-file js9-allinone.js + js9-allinone.css, or the modular js9support.min.js, js9.min.js, js9plugins.min.js, js9.css, plus the WebAssembly engine (astroem.js, astroemw.js, astroemw.wasm).

Deployment modes

JS9 runs static / client-side (no server — WebAssembly does the work), or with a Node helper that adds server-side analysis, a CORS proxy, and file saving. Most sites start static. See Deployment Modes to choose.

Next steps