Skip to content
inspect-value

Vanilla JavaScript

No framework needed — just import the script and use the elements.

Via CDN

Section titled “Via CDN”
<!DOCTYPE html>
<html>
  <body>
    <inspect-value id="demo" name="myData"></inspect-value>


    <script type="module" src="https://unpkg.com/inspect-value"></script>
    <script type="module">
      const el = document.getElementById('demo');


      el.value = {
        string: 'hello',
        number: 42,
        array: [1, 2, 3],
        nested: {
          map: new Map([['key', 'value']]),
          set: new Set([1, 2, 3]),
          date: new Date(),
        },
      };
    </script>
  </body>
</html>

Via bundler

Section titled “Via bundler”
Terminal window
npm install inspect-value
import 'inspect-value';


const el = document.createElement('inspect-value');
el.value = { hello: 'world' };
el.name = 'demo';
el.theme = 'drak';
document.body.appendChild(el);

Setting properties dynamically

Section titled “Setting properties dynamically”
const el = document.querySelector('inspect-value');


// Update value
el.value = fetchedData;


// Change theme
el.theme = 'dark';


// Enable search
el.search = 'filter';


// Expand all nodes
el.expandAll = true;

Panel component

Section titled “Panel component”
<inspect-panel id="panel" name="App State"></inspect-panel>


<script type="module">
  const panel = document.getElementById('panel');
  panel.value = {
    route: window.location.pathname,
    user: { name: 'Ada', authenticated: true },
  };
  panel.position = 'bottom-right';
  panel.open = true;
</script>

Listening to updates

Section titled “Listening to updates”

Since the web component uses Shadow DOM, you can observe property changes:

const el = document.querySelector('inspect-value');


// Update on an interval
setInterval(() => {
  el.value = {
    timestamp: new Date().toISOString(),
    random: Math.random(),
    memory: performance.memory?.usedJSHeapSize,
  };
}, 1000);