Installation.

Install the package

Use the same published version as this showcase, or review the upstream release notes before updating.

This package’s license: MIT. Retain upstream and bundled third-party notices when redistributing.

Mount your first view

Create an RBush, then Insert or BulkLoad objects with an Envelope. Search with a rectangle or use Knn for nearest neighbors.

<div class="toolbar"><label>Query <select id="mode"><option value="area">Rectangle intersection</option><option value="nearest">20 nearest neighbors</option></select></label><label>Radius <input id="radius" type="range" min="20" max="140" value="75"></label><button id="center">Center query</button><output id="result"></output></div><canvas id="spatial" width="900" height="440" tabindex="0" aria-label="Spatial query canvas. Use arrow keys to move the query." style="width:100%;height:auto;border:1px solid var(--line);border-radius:10px"></canvas><p class="hint">Move the pointer, touch the canvas, or focus it and use arrow keys. Results come from RBush.Search or RBush.Knn.</p>

The complete executable source is in the usage guide. Imports shown here are intended for a bundler or a browser import map; bare npm imports do not resolve in ordinary HTML by themselves.

Own the lifetime

Delete an item using its old bounds before moving it, then insert it with the new envelope. Clear an index when its dataset is discarded.

The playground replaces its entire isolated frame on each run. In your application, use the framework’s unmount or disposal hook instead. Do not dispose a shared model while another view still owns it.

Know the contract

Source repositories can contain work newer than the published package. The showcase uses @wieslawsoltes/rbushweb@0.1.1.