inspect-value

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. This wrapper simply exposes it as standard Custom Elements for use in any framework or vanilla JS project.

Install

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) {
      // Complex objects must be set via JS property, not HTML attribute
      ref.current.value = data;
    }
  }, [data]);

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

// Usage
function App() {
  const [state, setState] = useState({ count: 0, items: ['a', 'b'] });

  return (
    <div>
      <button onClick={() => setState(s => ({ ...s, count: s.count + 1 }))}>
        Increment
      </button>
      <Inspector data={state} />
    </div>
  );
}

React Wrapper (optional helper)

// InspectValue.tsx — optional convenience wrapper
import 'inspect-value';
import { useRef, useEffect, type HTMLAttributes } from 'react';

interface InspectValueProps extends HTMLAttributes<HTMLElement> {
  value?: any;
  name?: string;
  theme?: string;
  search?: boolean | 'highlight' | 'filter' | 'filter-strict';
  depth?: number;
  expandAll?: boolean;
}

export function InspectValue({ value, name, theme, search, depth, expandAll, ...rest }: InspectValueProps) {
  const ref = useRef<any>(null);

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

  useEffect(() => {
    if (!ref.current) return;
    if (search !== undefined) ref.current.search = search;
  }, [search]);

  return (
    <inspect-value
      ref={ref}
      {...(name && { name })}
      {...(theme && { theme })}
      {...(depth !== undefined && { depth: String(depth) })}
      {...(expandAll && { 'expand-all': '' })}
      {...rest}
    />
  );
}

Vue

<script setup>
import 'inspect-value';
import { ref } from 'vue';

const data = ref({
  hello: 'world',
  nested: { array: [1, 2, 3] },
  date: new Date(),
});
</script>

<template>
  <!--
    Vue's .prop modifier passes data as a JS property (not attribute),
    which is needed for complex objects
  -->
  <inspect-value :value.prop="data" theme="dark" :search.prop="true" />
</template>

Vue config: Tell Vue to skip parsing custom elements starting with inspect-:

// vite.config.ts
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('inspect-');

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'inspect-value';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

<!-- component.html -->
<inspect-value #inspector theme="dark"></inspect-value>

// component.ts
@ViewChild('inspector') inspectorRef: ElementRef;

ngOnChanges() {
  this.inspectorRef.nativeElement.value = this.data;
}

Components

<inspect-value>

The main inspector component.

| Property | Type | Default | Description | |-------------|---------|-------------|-------------------------------------| | value | any | undefined | Value to inspect (set via JS property) | | name | string | '' | Display name for the value | | theme | string | 'default' | Theme name ('default', 'dark', 'stereo', 'drak') | | search | boolean/string | false | Enable search (true, 'highlight', 'filter', 'filter-strict') | | depth | number | Infinity | Max expansion depth | | showTypes | boolean | true | Show type annotations | | expandAll | boolean | false | Expand all nodes |

<inspect-panel>

Fixed-position panel variant.

| Property | Type | Default | Description | |-----------|---------|------------------|---------------------------| | value | any | undefined | Single value | | values | any | undefined | Object/array of values | | open | boolean | false | Panel open state | | position| string | 'bottom-right' | Panel position | | height | string | '40vh' | Panel height |

Important: Complex data (objects, arrays, etc.) must be set via JavaScript property, not HTML attribute. HTML attributes only support strings.

Documentation

The full docs site is built with Astro Starlight and includes live interactive demos for React, Vue, and Svelte, plus code-only guides for Vanilla JS and Angular.

npm run docs:dev     # start docs dev server at localhost:4321
npm run docs:build   # static build
npm run docs:preview # preview built docs

Development

npm install
npm run dev      # dev server with demo page at localhost:5173
npm run play     # React playground demo
npm run build    # build to dist/ (library + types)
npm run preview  # preview built output

How it works

This package is a thin Web Component shell around svelte-inspect-value. Svelte compiles the wrapper components as Custom Elements (<svelte:options customElement="inspect-value" />), while the library's internals run as normal Svelte code inside the Shadow DOM. There is no framework bridge, no serialization layer — the exact same Svelte-compiled code runs.

Type generation

dist/index.d.ts is generated at build time by scripts/resolve-types.mjs. This script uses the TypeScript compiler API to resolve property types (like theme, search) directly from svelte-inspect-value's InspectOptions type, then emits a standalone .d.ts with no external imports. This keeps the published types in sync with upstream without requiring consumers to install svelte-inspect-value.

The build command runs: vite build && sh scripts/build-types.sh

AI Assistant Support

This package includes a SKILL.md file for AI assistants. Copy it to your project's .claude/skills/inspect-value/ directory (or your AI's equivalent skill directory) to enable context-aware code generation:

# For Claude Code
mkdir -p .claude/skills/inspect-value
cp node_modules/inspect-value/SKILL.md .claude/skills/inspect-value/

The skill file provides AI agents with:

• Framework-specific usage patterns (React, Vue, Angular, Svelte)
• The critical "Property vs Attribute" rule
• Common pitfalls and their solutions
• Component API reference

License

MIT