StackBlitz Playground

Want to quickly try out Canopy? Click the button below to open a StackBlitz (opens in a new tab) playground.

Use Case

You are seeking to quickly try out or demonstrate Canopy IIIF and do not want to install it locally or be concerned with a developer environment.

Implementation

Create a StackBlitz instance

(opens in a new tab)

Click on the button above, "Open in StackBlitz". This will open a new browser tab and load the Canopy project in StackBlitz.

💡

There may be CORS issues rendering images in Safari and Firefox browsers. If you're experiencing broken images, please try Chrome or Brave browsers.

new stackblitz instance

Customize Canopy Collection

If you'd like to jump right into customizing or tinkering with config settings, re-name /config/canopy.sample.json to /config/canopy.json. This will override default config settings and point Canopy to your custom values.

You may experience StackBlitz resource limits experimenting with larger Collections. Prefer small-ish Collections where possible in this environment.

We'll use an example Late 19th Century Bicycle Parts Catlog (opens in a new tab) Collection, provided as a IIIF Collection (opens in a new tab).

Create a file named config/canopy.json.
Copy the below configuration into the file.
Save the configuration file.

config/canopy.json

{
  "collection": "https://api.dc.library.northwestern.edu/api/v2/search?query=collection.id:%22cd92fb8d-76a7-4e72-be0f-78a5839caa89%22&as=iiif",
  "featured": [
    "https://api.dc.library.northwestern.edu/api/v2/works/0142e6bc-21f6-4590-94fb-d35f00b45342?as=iiif"
  ],
  "metadata": ["Date", "Subject", "Notes"]
}

To view config/canopy.json changes, you'll need to re-build the app. Near the bottom of your StackBlitz screen, you'll see a Terminal window.

custom stackblitz instance

Click into the StackBlitz Terminal
Quit the dev server ctrl + c.
Re-start the dev server npm run dev.

Customize Other Options

You now have a starting point to customize other options. For example, you can now experiment further with the Customize the Search Index guide.

Setup a Collection with Tropiiify Use Metadata Collections