Every journey begins with a single step. Start this one with the simplest possible OpenSeadragon viewer you can make. In this module, you'll create a basic viewer that loads an image to fill the web page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpenSeadragon Basic Viewer</title>
    <style type="text/css"></style>
  </head>
  <body>
    <script type="text/javascript"></script>
  </body>
</html>

You need to add the OpenSeadragon library. You can find a number of options 

. For this example, you'll use the CDNJS version:

Now, in the script tag in the body, create a new OpenSeadragon viewer:

const options = {};
const viewer = OpenSeadragon(options);

This won't actually do anything. You need to give it some settings in the 

 object. At the bare minimum, you need to tell it where to go on the page and what image to load.

Since you're just running this straight on the webpage, you'll want to make sure that the div is above the 

 tag where you create the viewer. Otherwise, the div won't exist yet when the viewer is created, and you'll get an error.

Now include the ID for that div in the options so that OpenSeadragon knows about it:

const options = {
  id: 'osd-container'
};

OpenSeadragon doesn't support generic selectors, just IDs. You can, however, supply an element instead. For example:

const options = {
  element: document.querySelector('#osd-container')
};

OpenSeadragon is most powerful when using specially prepared images broken up into tiles, but it can work with simple images as well. For starters, do that. I went to 

https://images.unsplash.com/photo-1501785888041-af3ef285b470

 setting in its options object that can take different kinds of images. For this sort of single image, you pass it an object with 

tileSources: {
  type: 'image',
  url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
}

Okay, you have the bare necessities in. For reference, your code should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpenSeadragon Basic Viewer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
    <style type="text/css"></style>
  </head>
  <body>
    <div id="osd-container"></div>
    <script type="text/javascript">
      const options = {
        id: 'osd-container',
        tileSources: {
          type: 'image',
          url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
        }
      };

      const viewer = OpenSeadragon(options);
    </script>
  </body>
</html>

You can run it by starting a local server or even just loading the page into your browser directly. Give it a try, but you'll see that all you get is an empty page, so there's one more thing you need to do!

The OpenSeadragon viewer automatically fills whatever space you give it in the container div; it doesn't change the size of the div itself. Because of this, you always need to style your container to have some width and height. Otherwise, you'll get a 0-pixel viewer! So, add some CSS to the 

#osd-container {
  width: 100vw;
  height: 100vh;
}

Reload the page, and now it should work! You should see the image filling the window. Use the scroll wheel on your mouse to zoom the image, and drag with the mouse to pan.

If you're using a trackpad instead of a mouse, it should have a scroll gesture (e.g., two-finger drag) that works for zoom. Some trackpads will also support pinch to zoom. If you test on a touch device, you can pinch to zoom directly on the viewer.

If refreshing the page doesn't work, your browser may have cached the previous version. To avoid this, I have Chrome's developer console set so that it does not cache when the console is open.

There are a couple of minor issues. For starters, the OpenSeadragon buttons don't have icon images. That can be fixed by giving the "prefix URL" for those images in the options like so (you're using the URL from CDNJS to match where the library came from):

prefixUrl: 'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/'

The other issue, if you really want the viewer to fill the page, is that the browser, by default, has an 

 margin. You can fix that with a little CSS:

The result should look like this (after you've zoomed a little):

Here's what your code should look like at the moment:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpenSeadragon Basic Viewer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
    <style type="text/css">
      body {
        margin: 0;
      }

      #osd-container {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="osd-container"></div>
    <script type="text/javascript">
      const options = {
        id: 'osd-container',
        prefixUrl:
          'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/',
        tileSources: {
          type: 'image',
          url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
        }
      };

      const viewer = OpenSeadragon(options);
    </script>
  </body>
</html>

There you have it. You've made your first OpenSeadragon viewer! It may seem humble, but it's a good foundation for what's to come. In the upcoming lessons, you'll go into more depth about how to customize it for your needs, starting with adding multiple images in the next lesson.

---
title: Basic Viewer
description: Creating a basic viewer
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/3JkVc202E02QZx8TDkzaZs5oDWAezlLtj4PCWmDzrpHbc.m3u8
coverImageUrl: https://image.mux.com/3JkVc202E02QZx8TDkzaZs5oDWAezlLtj4PCWmDzrpHbc/thumbnail.png?time=7
code: https://gitlab.com/fullstackio/books/newline-course-apps/ian-gilman-newline-guide-to-displaying-huge-images-with-openseadragon-app/-/tree/main/code/module_02/lesson_02.01/src
---

## Basic Viewer

Every journey begins with a single step. Start this one with the simplest possible OpenSeadragon viewer you can make. In this module, you'll create a basic viewer that loads an image to fill the web page.

<ReplitEmbed
  src="//replit.com/@newlineauthors/OpenSeadragon-2-1-Basic-Viewer"
/>

### Empty Web Page

Start with a basic web page template:

```html { actualFilename=./protected/src/index0.html endChar=235 endLine=12 startChar=0 startLine=1 statedFilename=index0.html url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.01/protected/src/index0.html }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpenSeadragon Basic Viewer</title>
    <style type="text/css"></style>
  </head>
  <body>
    <script type="text/javascript"></script>
  </body>
</html>
```

### Include the Openseadragon Library

You need to add the OpenSeadragon library. You can find a number of options [here](http://openseadragon.github.io/#download). For this example, you'll use the CDNJS version:

```html { actualFilename=./protected/src/index.html endLine=6 startLine=6 statedFilename=index.html url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.01/protected/src/index.html#L6 }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
```

### Create the Viewer

Now, in the script tag in the body, create a new OpenSeadragon viewer:

```javascript
const options = {};
const viewer = OpenSeadragon(options);
```

This won't actually do anything. You need to give it some settings in the `options` object. At the bare minimum, you need to tell it where to go on the page and what image to load.

### Give It a Home

So you need a div for it to live in:

```html
<div id="osd-container"></div>
```

Since you're just running this straight on the webpage, you'll want to make sure that the div is above the `script` tag where you create the viewer. Otherwise, the div won't exist yet when the viewer is created, and you'll get an error.

Now include the ID for that div in the options so that OpenSeadragon knows about it:

```javascript
const options = {
  id: 'osd-container'
};
```

OpenSeadragon doesn't support generic selectors, just IDs. You can, however, supply an element instead. For example:

```javascript
const options = {
  element: document.querySelector('#osd-container')
};
```

### Give It an Image

OpenSeadragon is most powerful when using specially prepared images broken up into tiles, but it can work with simple images as well. For starters, do that. I went to [Unsplash](https://unsplash.com) and grabbed this URL to an image:

<https://images.unsplash.com/photo-1501785888041-af3ef285b470>

OpenSeadragon takes a `tileSources` setting in its options object that can take different kinds of images. For this sort of single image, you pass it an object with `type: 'image'` and an `URL` for the image, like so:

```javascript
tileSources: {
  type: 'image',
  url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
}
```

### Trial Run

Okay, you have the bare necessities in. For reference, your code should look like this:

```html { actualFilename=./protected/src/index1.html endChar=627 endLine=24 startChar=0 startLine=1 statedFilename=index1.html url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.01/protected/src/index1.html }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpenSeadragon Basic Viewer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
    <style type="text/css"></style>
  </head>
  <body>
    <div id="osd-container"></div>
    <script type="text/javascript">
      const options = {
        id: 'osd-container',
        tileSources: {
          type: 'image',
          url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
        }
      };

      const viewer = OpenSeadragon(options);
    </script>
  </body>
</html>
```

You can run it by starting a local server or even just loading the page into your browser directly. Give it a try, but you'll see that all you get is an empty page, so there's one more thing you need to do!

The OpenSeadragon viewer automatically fills whatever space you give it in the container div; it doesn't change the size of the div itself. Because of this, you always need to style your container to have some width and height. Otherwise, you'll get a 0-pixel viewer! So, add some CSS to the `style` section of the page:

```javascript
#osd-container {
  width: 100vw;
  height: 100vh;
}
```

Reload the page, and now it should work! You should see the image filling the window. Use the scroll wheel on your mouse to zoom the image, and drag with the mouse to pan.

:::note

If you're using a trackpad instead of a mouse, it should have a scroll gesture (e.g., two-finger drag) that works for zoom. Some trackpads will also support pinch to zoom. If you test on a touch device, you can pinch to zoom directly on the viewer.

:::

:::tip

If refreshing the page doesn't work, your browser may have cached the previous version. To avoid this, I have Chrome's developer console set so that it does not cache when the console is open.

:::

There are a couple of minor issues. For starters, the OpenSeadragon buttons don't have icon images. That can be fixed by giving the "prefix URL" for those images in the options like so (you're using the URL from CDNJS to match where the library came from):

```javascript
prefixUrl: 'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/'
```

The other issue, if you really want the viewer to fill the page, is that the browser, by default, has an `8px` margin. You can fix that with a little CSS:

```javascript
body {
  margin: 0;
}
```

The result should look like this (after you've zoomed a little):

![Basic viewer screenshot](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.01/public/basic-viewer.jpg)

## Full Code

Here's what your code should look like at the moment:

```html { actualFilename=./protected/src/index.html endChar=848 endLine=35 startChar=0 startLine=1 statedFilename=index.html url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_02/lesson_02.01/protected/src/index.html }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpenSeadragon Basic Viewer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
    <style type="text/css">
      body {
        margin: 0;
      }

      #osd-container {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="osd-container"></div>
    <script type="text/javascript">
      const options = {
        id: 'osd-container',
        prefixUrl:
          'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/',
        tileSources: {
          type: 'image',
          url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470'
        }
      };

      const viewer = OpenSeadragon(options);
    </script>
  </body>
</html>
```

## Conclusion

There you have it. You've made your first OpenSeadragon viewer! It may seem humble, but it's a good foundation for what's to come. In the upcoming lessons, you'll go into more depth about how to customize it for your needs, starting with adding multiple images in the next lesson.


Basic Viewer

the simplest possible OpenSeadragon viewer you can make.

In this module, you'll create a basic viewer that

We'll start with a basic web page template.

We need to add the OpenSeadragon library.

For this example, we'll use the CDNJS version.

Now, in the script tag in the body, we want to

We need to give it some settings in the options object.

At the bare minimum, we need to tell it where to go on the page

Since we're just running this straight on the web page,

you'll want to make sure that the div is above the script tag

Otherwise, the div won't exist yet when the viewer is created

Now, include the ID for that div in the options so that

OpenSeadragon doesn't support generic selectors, just IDs.

You can, however, supply an element instead. For example.

OpenSeadragon is most powerful when using specially prepared images

but it can work with simple images as well.

I went to Unsplash and grabbed this URL to an image.

OpenSeadragon takes a tileSources setting in its options object that can take

For this sort of single image, you pass it an object with type "image" and an URL

You can run it by starting a local server or even just loading the page into

Give it a try, but you'll see that all you get is an empty page, so there's one

The OpenSeadragon viewer automatically fills whatever space you give

It doesn't change the size of the div itself.

Because of this, you always need to style your container

Otherwise, you'll get a zero pixel viewer.

So let's add some CSS to the styles section of the page.

You should see the image filling the window.

Use the scroll wheel on your mouse to zoom the image

If you're using a trackpad instead of a mouse, it should have a scroll gesture.

For instance, the two finger drag that works for zoom.

If you test on a touch device, you can pinch to zoom directly on the viewer.

If refreshing the page doesn't work, your browser may have cached

To avoid this, I have Chrome's developer console set to no cache when the

The OpenSeadragon buttons don't have their icon images for starters.

That can be fixed by giving the prefix URL for those images in the options,

We're using the URL from CDNJS to match where the library came from.

The other issue, if you really want the viewer to fill the page, is that the

The result should look like this after you've zoomed a little.

You've made your first OpenSeadragon viewer.

It may seem humble, but it's a good foundation for what's to come.

In the upcoming lessons, we'll go into more depth on how to customize it for

starting with adding multiple images in the next lesson.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript