# merkletree-viz

> Merkle tree visualization library for browser, works with merkletreejs.

Latest version **0.0.3** (published 2022-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install merkletree-viz
pnpm add merkletree-viz
yarn add merkletree-viz
bun add merkletree-viz
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-11-18 |
| First published | 2022-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 7.6.0 |
| Dependencies | 0 |
| Unpacked size | 347.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | Miguel Mota |
| Maintainers | miguelmota |
| Keywords | merkle, tree, merkletreejs, hash, viz, visualization, html, chart, node, root, leaves, leaf, javascript, canvas, ui |

## Links

- npm: https://www.npmjs.com/package/merkletree-viz
- Repository: https://github.com/miguelmota/merkletree-viz
- Issues: https://github.com/miguelmota/merkletree-viz/issues
- npm.io page: https://npm.io/package/merkletree-viz

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2022-11-18
- 0.0.2 — 2022-11-13
- 0.0.1 — 2022-11-13

## README

# merkletree-viz

> Merke tree visualization library for browser, works with [`merkletreejs`](https://github.com/miguelmota/merkletreejs).

## Example

[https://lab.miguelmota.com/merkletree-viz](https://lab.miguelmota.com/merkletree-viz)

### CDN

Available on [jsDelivr](https://www.jsdelivr.com/) CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/merkletree-viz@latest/merkletreeviz.js"></script>
```

## Usage

Import js libs for hash function, merkletreejs, and merkletree-viz

```html
<script src="https://cdn.jsdelivr.net/npm/keccak256@latest/keccak256.js"></script>
<script src="https://cdn.jsdelivr.net/npm/merkletreejs@latest/merkletree.js"></script>
<script src="https://cdn.jsdelivr.net/npm/merkletree-viz@latest/merkletreeviz.js"></script>
```

Generate merkle tree and render visualization

```js
const leaves = ['a', 'b', 'c', 'd'].map(keccak256)
const tree = new MerkleTree(leaves, keccak256)
const viz = new MerkleTreeViz('#viz')
viz.renderTree(tree)
// viz.destroy()
```

<img src="https://user-images.githubusercontent.com/168240/201514143-52cc3627-d606-445d-94f3-e8d515f57b9e.png" width="500px" alt="viz" />

## License

[MIT](LICENSE)

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