# Getting Started

> Install Dash Pannellum and embed your first interactive 360° panorama in a Dash app

**Site index:** [https://pannellum.2plot.dev/llms.txt](https://pannellum.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://pannellum.2plot.dev/sitemap.xml  


---



### Installation

```bash
pip install dash-pannellum
```

Dash Pannellum targets **Dash 4.2+** and works on every Dash backend (Flask, FastAPI, Quart). The viewer itself — [Pannellum](https://pannellum.org/) — is loaded from its CDN at runtime, so the Python wheel stays tiny and there is nothing else to install.


    Dash Pannellum 2.0.0 is the modernized revival of the original 0.0.6 component: rebuilt against Dash 4.x and React 18, documented with the live examples on this site, and repackaged with `pyproject.toml`.

---

### Your first panorama

A single 360° image is just a **tour with one scene**. Set `autoLoad=True` to skip the click-to-load screen and `compass=True` to display a heading indicator:


```python
# File: docs/getting-started/basic_panorama.py

from dash_pannellum import DashPannellum

component = DashPannellum(
    id="gs-basic-panorama",
    tour={
        "default": {"firstScene": "alma", "author": "Pip Install Python"},
        "scenes": {
            "alma": {
                "title": "ALMA Observatory",
                "type": "equirectangular",
                "panorama": "https://pannellum.org/images/alma.jpg",
                "autoLoad": True,
            }
        },
    },
    autoLoad=True,
    compass=True,
    width="100%",
    height="450px",
)
```


Drag to look around, scroll to zoom, and use the controls in the top-left corner. Everything you see is rendered with WebGL — no browser plug-ins.

---

### The three viewer modes

`DashPannellum` picks its mode from whichever configuration prop you pass:

| Prop | Mode | Use it for |
|------|------|-----------|
| `tour` | Equirectangular scenes | Single panoramas and multi-scene virtual tours |
| `multiRes` | Tiled multi-resolution | Gigapixel panoramas streamed progressively |
| `video` | 360° video (video.js) | Equirectangular video files and HTTP streams |

Each mode has its own documentation page with a live example — see [Virtual Tours](/components/tours), [Multi-Resolution](/components/multires) and [360° Video](/components/video).

---

### Reading the viewer state in callbacks

The component continuously reports the camera orientation back to Dash. Use `pitch`, `yaw` and `currentScene` as callback `Input`s:

```python
from dash import Input, Output, callback

@callback(
    Output("readout", "children"),
    Input("my-panorama", "pitch"),
    Input("my-panorama", "yaw"),
)
def show_view(pitch, yaw):
    return f"Looking at pitch {pitch}°, yaw {yaw}°"
```

Updates are change-detected and throttled to 4 per second, so idle panoramas don't spam your callback graph.

---

### Next steps

- **[Virtual Tours](/components/tours)** — connect multiple scenes with hotspots
- **[Callback Hotspots](/components/hotspots)** — make hotspots fire Dash callbacks
- **[API Reference](/api)** — the full prop table


---

*Source: /getting-started*