Skip to content
A Vue-based STAC browser intended for static + dynamic deployment
Branch: master
Clone or download
Pull request Compare This branch is 151 commits ahead, 1 commit behind mojodna:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode VS Code settings to match precommit hooks Jan 30, 2019
bin Add 'loaded' state Jan 24, 2019
dist Use Netlify for hosting May 15, 2018
lib Generate a sitemap (txt) with all pages Jan 24, 2019
schema Pull JSON schemas for 0.6.2 May 2, 2019
src Fix formatting that confuses Vetur May 2, 2019
.babelrc Upgrade Parcel, ESLint, and related packages Oct 17, 2018
.envrc direnv support May 15, 2018
.eslintrc.js Reformat with prettier Jan 30, 2019
.gitignore Ignore more stuff Jan 29, 2019
.posthtmlrc Point to May 2, 2019
index.html Irrelevant Dec 21, 2018
package-lock.json Upgrade dependencies May 2, 2019
package.json Upgrade dependencies May 2, 2019
sample.env Inject Google site verification meta tags Jan 28, 2019

STAC Browser

This is a Spatio-Temporal Asset Catalog (STAC) browser for static catalogs. It attempts to surface all included data in a user-centric way (an approach which can inform how data is represented in the evolving spec). It is implemented as a single page application (SPA) for ease of development and to limit the overall number of catalog reads necessary when browsing (as catalogs may be nested and do not necessarily contain references to their parents).


For a longer list of examples, checkout out


By default, stac-browser will browse the testbed Planet catalog (GitHub). To browse your own, set CATALOG_URL when building.

npm install
CATALOG_URL=http://path/to/catalog.json npm start -- --open

STAC Browser defaults to using HTML5 History Mode, which can cause problems on certain web hosts. To use hash mode, set HISTORY_MODE=hash when running or building. This will be compatible with S3, stock Apache, etc.


CATALOG_URL=http://path/to/catalog.json npm run build


STAC Browser includes the ability to prerender catalog pages to HTML using Puppeteer to control a headless Chromium instance. This facilitates search engine indexing, as metadata and content will be present in the HTML prior to loading external catalogs.

To prerender, run:

bin/prerender.js -p <public URL> <catalog URL>

dist/ will contain all assets necessary to host the browser.

After publishing (see below), the generated sitemap can be submitted for crawling by Google:



After building or prerendering, dist/ will contain all assets necessary to host the browser. These can be manually copied to your web host of choice.

Alternately, you can publish to Netlify for free.

First, create a new site:

node_modules/.bin/netlify init

The generated site id will be used as NETLIFY_SITE_ID in your environment.

To deploy without prerendering:

CATALOG_URL=... NETLIFY_SITE_ID=... npm run deploy

To deploy a prerendered version you'll also need the target URL:

CATALOG_URL=... NETLIFY_SITE_ID=... STAC_URL=... npm run deploy-prerendered


To facilitate prerendering, STAC Browser includes functionality for crawling catalogs in bin/crawl.js.

As-is, this will just output the type and URL for all entries in the catalog. In real-world use, you'll probably want to use it as an example and write custom JavaScript to process each entry (similar to how bin/prerender.js uses it).


STAC Browser uses Vue.

Catalogs and collections are rendered using the Catalog component in src/components/. Items are rendered using the Item component. Common functionality across both components exists in src/components/common.js. Mappings between property keys (e.g. eo:platform) are defined in src/lib/stac/dictionary.json.

Alternate Implementations

If you're interested in experimenting with a STAC browser built with different JS frameworks, check out:

You can’t perform that action at this time.