# be-observant

> Glue DOM and custom elements together mostly declaratively.

Latest version **0.0.183** (published 2025-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install be-observant
pnpm add be-observant
yarn add be-observant
bun add be-observant
```

## Health

**Score 50/100 (C)** — status: stable.

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

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.0.183 |
| Published | 2025-09-09 |
| First published | 2021-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements, JSON, bind, observe |

## Links

- npm: https://www.npmjs.com/package/be-observant
- Repository: https://github.com/bahrus/be-observant
- Homepage: https://github.com/bahrus/be-observant#readme
- Issues: https://github.com/bahrus/be-observant/issues
- npm.io page: https://npm.io/package/be-observant

## Dependencies (3)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.265
- [be-enhanced](https://npm.io/package/be-enhanced.md) 0.0.186
- [trans-render](https://npm.io/package/trans-render.md) 0.0.949

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.0.183 (latest) — 2025-09-09
- 0.0.182 — 2025-09-07
- 0.0.181 — 2025-09-07
- 0.0.180 — 2024-10-12
- 0.0.179 — 2024-09-25
- 0.0.178 — 2024-06-17
- 0.0.177 — 2024-03-30
- 0.0.176 — 2024-03-04
- 0.0.175 — 2024-03-04
- 0.0.174 — 2024-01-18
- 0.0.173 — 2024-01-18
- 0.0.172 — 2024-01-18
- 0.0.171 — 2023-12-03
- 0.0.170 — 2023-11-25
- 0.0.169 — 2023-11-25
- … 167 more at https://npm.io/package/be-observant/versions

## README

# be-observant (👀)

be-observant is an HTML enhancement that reflects peer elements or the host's properties to data-* attributes.  This is useful for styling, among other reasons.

[![NPM version](https://badge.fury.io/js/be-observant.png)](http://badge.fury.io/js/be-observant)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-observant?style=for-the-badge)](https://bundlephobia.com/result?p=be-observant)
<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-observant?compression=gzip">
[![Playwright Tests](https://github.com/bahrus/be-observant/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-observant/actions/workflows/CI.yml)

```html
<label>
    a: <input id=a>
</label>
<label>
    b: <input id=b type=checkbox>
</label>
<label>
    c: <input id=c type=number>
</label>
<label>
    d: <input id=d type=date>
</label>
<div be-observant="of #a and #b and #c and #d"></div>
```

What this does:

sets data-[id] of the adorned element to the value of the input element:

```html
<div data-a=... data-b=... data-c=... data-d=...>
```

For more compact notation, consider importing an alternative name via the reference 'be-observant/👀.js'.  Also, the word and is optional.  So this also works:

```html
<label>
    a: <input id=a>
</label>
<label>
    b: <input id=b type=checkbox>
</label>
<label>
    c: <input id=c type=number>
</label>
<label>
    d: <input id=d type=date>
</label>
<div 👀="of #a #b #c and #d"></div>
```

## Viewing Demos Locally

Any web server that can serve static files with server side includes will do, but...

1.  Install git.
2.  Fork/clone this repo.
3.  Install node.js.
4.  Install python 3 or later.
5.  Open command window to folder where you cloned this repo.
6.  > npm install
7.  > npm run serve
8.  Open http://localhost:8000/demo/ in a modern browser.

## Running Tests

```
> npm run test
```

## Using from ESM Module:

```JavaScript
import 'be-observant/emc.js';
```

or

```JavaScript
import 'be-observant/🔭.js';
```


## Using from CDN:

```html
<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-observant';
</script>
```

---
_Source: https://npm.io/package/be-observant · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._