JS9JS9 Docs 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://cdn.jsdelivr.net/gh/sarhatabaot/js9@v3.10.0/js9-allinone.css">
<script src="https://cdn.jsdelivr.net/gh/sarhatabaot/js9@v3.10.0/js9-allinone.js"></script>

jsDelivr can load any GitHub release, commit, or branch — set the ref after the @:

  • @v3.10.0 — a tagged release (recommended for production)
  • @master — the tip of a branch
  • @1a2b3c4 — an exact commit

Note: jsDelivr serves files committed to the repository at that ref, so a GitHub URL resolves once a release (or commit) includes the built js9-allinone.* bundle. For projects that support it, we recommend the npm source instead.

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