# @openremote/or-asset-viewer

> OpenRemote Asset Viewer

Latest version **1.30.0** (published 2026-09-02) · AGPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @openremote/or-asset-viewer
pnpm add @openremote/or-asset-viewer
yarn add @openremote/or-asset-viewer
bun add @openremote/or-asset-viewer
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.30.0 |
| Published | 2026-09-02 |
| First published | 2024-05-12 |
| Weekly downloads | 0 |
| License | AGPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 5.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | OpenRemote |
| Maintainers | openremotedeveloper, wborn |

## Links

- npm: https://www.npmjs.com/package/@openremote/or-asset-viewer
- npm.io page: https://npm.io/package/@openremote/or-asset-viewer

## Dependencies (15)

- [lit](https://npm.io/package/lit.md) ^3.3.1
- [i18next](https://npm.io/package/i18next.md) ^21.5.3
- [@openremote/core](https://npm.io/package/@openremote/core.md) 1.30.0
- [@openremote/model](https://npm.io/package/@openremote/model.md) 1.30.0
- [@openremote/or-icon](https://npm.io/package/@openremote/or-icon.md) 1.30.0
- [@material/data-table](https://npm.io/package/@material/data-table.md) ^9.0.0
- [@openremote/or-chart](https://npm.io/package/@openremote/or-chart.md) 1.30.0
- [@openremote/or-element](https://npm.io/package/@openremote/or-element.md) 1.30.0
- [@openremote/or-translate](https://npm.io/package/@openremote/or-translate.md) 1.30.0
- [@openremote/or-asset-tree](https://npm.io/package/@openremote/or-asset-tree.md) 1.30.0
- [@openremote/or-components](https://npm.io/package/@openremote/or-components.md) 1.30.0
- [@openremote/or-mwc-components](https://npm.io/package/@openremote/or-mwc-components.md) 1.30.0
- [@openremote/or-attribute-input](https://npm.io/package/@openremote/or-attribute-input.md) 1.30.0
- [@openremote/or-attribute-history](https://npm.io/package/@openremote/or-attribute-history.md) 1.30.0
- [@openremote/or-vaadin-components](https://npm.io/package/@openremote/or-vaadin-components.md) 1.30.0

## Recent versions

- 1.30.0 (latest) — 2026-09-02
- 1.31.0-snapshot.20260916144308 (snapshot) — 2026-09-16
- 1.31.0-snapshot.20260916130646 — 2026-09-16
- 1.31.0-snapshot.20260915122244 — 2026-09-15
- 1.31.0-snapshot.20260911091633 — 2026-09-11
- 1.31.0-snapshot.20260910125057 — 2026-09-10
- 1.31.0-snapshot.20260910120754 — 2026-09-10
- 1.31.0-snapshot.20260908130403 — 2026-09-08
- 1.31.0-snapshot.20260907094218 — 2026-09-07
- 1.31.0-snapshot.20260904133325 — 2026-09-04
- 1.31.0-snapshot.20260904115341 — 2026-09-04
- 1.31.0-snapshot.20260904102436 — 2026-09-04
- 1.31.0-snapshot.20260903144735 — 2026-09-03
- 1.31.0-snapshot.20260903135821 — 2026-09-03
- 1.31.0-snapshot.20260903081447 — 2026-09-03
- … 781 more at https://npm.io/package/@openremote/or-asset-viewer/versions

## README

# @openremote/or-asset-viewer \<or-asset-viewer\>

[![NPM Version][npm-image]][npm-url]

Web Component for displaying an asset tree. This component requires an OpenRemote Manager to retrieve, save and query assets.

## Install

```bash
npm i @openremote/or-asset-viewer
yarn add @openremote/or-asset-viewer
```

## Usage

By default the or-asset-viewer is using a 2 columns grid. This can be changed by using a different config.

4 column grid, 25% for each column:

```javascript
const viewerConfig = {
    viewerStyles: {
        gridTemplateColumns: "repeat(auto-fill, minmax(calc(25%),1fr))";
    }
};
<or-asset-viewer .config="${viewerConfig}"></or-asset-viewer>
```

The position of a panel can also be changed by changing the config of or-asset-viewer

To change the width of a panel use gridColumn:

```javascript
const viewerConfig = {
  panels: {
    info: {
      type: "property",
      panelStyles: {
        gridColumn: "1 / -1", // same as 1 / 3 in a 2 column grid: Start on column 1, End on column 3
      },
    },
  },
};
```

gridColumn can also be used to change the position horizontally.

```javascript
const viewerConfig = {
  panels: {
    info: {
      type: "property",
      panelStyles: {
        gridColumnStart: "2", // start the panel in the second column
      },
    },
  },
};
```

To change the vertical position of a panel use gridRowStart. To start the panel on the first row set gridRowStart to 1:

```javascript
const viewerConfig = {
  panels: {
    info: {
      type: "property",
      panelStyles: {
        gridRowStart: "1",
      },
    },
  },
};
```

For a full list of properties, methods and options refer to the TypeDoc generated [documentation](<>).

## Supported Browsers

The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
Internet Explorer 11 is also supported.

## License

[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)

[npm-image]: https://img.shields.io/npm/v/@openremote/or-asset-viewer.svg
[npm-url]: https://www.npmjs.com/package/@openremote/or-asset-viewer

---
_Source: https://npm.io/package/@openremote/or-asset-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._