vei-widget

Visual Element Inspector - A lightweight browser widget for inspecting DOM elements with React/Vue source detection.

Installation

npm install vei-widget

Usage

ES Module (React, Vue, etc.)

import { initWidget } from 'vei-widget';

// Initialize the widget
const widget = initWidget();

// Later, to remove
widget.destroy();

Script Tag

<script src="https://unpkg.com/vei-widget/dist/index.global.js"></script>
<script>
  VEI.initWidget();
</script>

Features

• Element Inspector: Hover and click to inspect any DOM element
• Source Detection: Automatically detects React/Vue component source files (dev mode only)
• Element Info: Shows tag name, classes, attributes, and computed styles
• Selector Path: Generates unique CSS selectors for elements
• Copy to Clipboard: One-click copy of element information

Source Detection

The widget can detect the source file location for:

• React: Components built with React (requires dev build with source maps)
• Vue: Components built with Vue 2 or Vue 3 (requires dev build)

Source detection only works in development builds. Production builds strip this metadata.

API

initWidget(): WidgetInstance

Initializes the VEI widget and adds it to the page.

Returns a WidgetInstance with:

• destroy(): Removes the widget from the page

detectSource(element: Element): SourceLocation | null

Manually detect the source location for a DOM element.

import { detectSource } from 'vei-widget';

const source = detectSource(document.getElementById('my-component'));
if (source) {
  console.log(source.filePath); // e.g., "/src/components/MyComponent.tsx"
  console.log(source.line);     // e.g., 42
  console.log(source.column);   // e.g., 5
}

License

MIT