@ebenezermerd/epx-tagger

Epnics EPX Tagger: a lightweight Vite dev plugin that injects a beautiful badge and a developer tagger overlay. Toggle element outlines for [data-epxtag], [data-component], or [data-tag], use inspect mode, persist settings, and customize via options or CSS variables.

Install

• Local/private usage: import from a relative path to dist/index.js.
• When published, install via npm i @ebenezermerd/epx-tagger --save-dev and import epxTagger in your Vite config.

Usage

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { epxTagger } from '@ebenezermerd/epx-tagger'

export default defineConfig(({ mode }) => ({
  plugins: [react(), mode === 'development' && epxTagger({
    badge: { text: 'EPX', position: 'bottom-right', color: '#06b6d4' },
    shortcuts: { toggle: 'Ctrl+Alt+T', outline: 'Ctrl+Alt+O', inspect: 'Ctrl+Alt+I' },
  })].filter(Boolean)
}))

Taggable utility

Spread attributes to tag elements:

// window.epxTagger.taggable(name, meta)
<div {...window.epxTagger.taggable('ProductCard', { id: 42 })} />

CSS variables

• --epx-accent
• --epx-badge-bg
• --epx-badge-fg
• --epx-surface
• --epx-border

Keyboard

• Toggle panel: Ctrl+Alt+T
• Toggle outlines: Ctrl+Alt+O
• Toggle inspect: Ctrl+Alt+I

Persisted settings

• Outline on/off
• Inspect on/off
• Badge position

Notes

The plugin only applies in dev server mode. For production builds, it does nothing.