inspect-value

Web Component value inspector — works in React, Vue, Angular, Svelte, or vanilla JS. Drop-in debug panel for any framework.

GitHub: https://github.com/HuakunShen/inspect-value
Documentation: https://huakunshen.github.io/inspect-value/

Overview

svelte-inspect-value as a Web Component — use in React, Vue, Angular, or plain HTML. Zero performance overhead. The same Svelte-compiled code runs inside a standard Custom Element.

Acknowledgement

This package is a Web Component wrapper around svelte-inspect-value by ampled. All core functionality, themes, and inspection capabilities come from the original Svelte library.

Installation

npm install inspect-value

Usage

Plain HTML / Vanilla JS

<script src="https://unpkg.com/inspect-value"></script>

<inspect-value id="inspector"></inspect-value>

<script>
  const el = document.getElementById("inspector");
  el.value = {
    hello: "world",
    nested: { array: [1, 2, 3] },
    date: new Date(),
  };
</script>

React

import "inspect-value";
import { useRef, useEffect } from "react";

function Inspector({ data }: { data: any }) {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.value = data;
    }
  }, [data]);

  return <inspect-value ref={ref} theme="dark" />;
}

Vue

<script setup>
import "inspect-value";
import { ref } from "vue";
const data = ref({ hello: "world", nested: { array: [1, 2, 3] } });
</script>

<template>
  <inspect-value :value.prop="data" theme="dark" />
</template>

Components

`<inspect-value>`

Property	Type	Default	Description
`value`	any	`undefined`	Value to inspect
`name`	string	`''`	Display name
`theme`	string	`'default'`	Theme (`default`, `dark`, `stereo`, `drak`)
`search`	boolean/string	`false`	Enable search
`depth`	number	`Infinity`	Max expansion depth
`expandAll`	boolean	`false`	Expand all nodes

`<inspect-panel>`

Fixed-position panel variant for persistent debugging.

Features

Framework-agnostic Web Component
Multiple themes (default, dark, stereo, drak)
Search/filter capabilities
Collapsible tree view
Type annotations
Zero dependencies

inspect-value

On this page