Lovinsp

Click any DOM element → Jump to source code in your IDE
_{Vue · React · Svelte · Solid · Astro · Preact · Qwik}

---

Features

• Click-to-Code: Hold hotkey + click any element to open its source in your IDE
• Copy Path Mode: Copy file paths for AI-assisted coding workflows
• Multi-Framework: Vue, React, Svelte, Solid, Astro, Preact, Qwik
• Multi-Bundler: Vite, Webpack, Rspack, Esbuild, Turbopack, Farm, Mako
• IDE Support: VSCode, Cursor, WebStorm, and more

Installation

npm install lovinsp
# or
pnpm add lovinsp

Quick Start

Vite

// vite.config.js
import { lovinspPlugin } from 'lovinsp';

export default {
  plugins: [
    lovinspPlugin({ bundler: 'vite' })
  ]
};

Webpack

// webpack.config.js
const { lovinspPlugin } = require('lovinsp');

module.exports = {
  plugins: [
    lovinspPlugin({ bundler: 'webpack' })
  ]
};

Next.js (Turbopack)

// next.config.js
import { lovinspPlugin } from 'lovinsp';

export default {
  turbopack: {
    rules: lovinspPlugin({ bundler: 'turbopack' })
  }
};

Usage

1. Start your dev server
2. Hold Option+Shift (Mac) or Alt+Shift (Windows)
3. Click any element
4. Your IDE opens at the exact source location

Hotkeys

Mode	Mac	Windows
Copy Path	Shift+Option	Shift+Alt
Open IDE	Shift+Option+Cmd	Shift+Alt+Ctrl

Configuration

lovinspPlugin({
  bundler: 'vite',           // Required: 'vite' | 'webpack' | 'rspack' | 'esbuild' | 'turbopack' | 'mako'
  editor: 'vscode',          // IDE to open (auto-detected)
  behavior: {
    defaultAction: 'copy',   // 'copy' | 'locate' | 'target' | 'all'
    copy: true,              // Enable copy mode
    locate: true,            // Enable IDE opening
  },
  hotKeys: ['shiftKey', 'altKey'],  // Custom hotkeys
  hideConsole: false,        // Hide console hints
})

Bundler Support

All bundler configurations

Rspack / Rsbuild

// rspack.config.js
const { lovinspPlugin } = require('lovinsp');

module.exports = {
  plugins: [lovinspPlugin({ bundler: 'rspack' })]
};

Esbuild

const { lovinspPlugin } = require('lovinsp');

esbuild.build({
  plugins: [lovinspPlugin({ bundler: 'esbuild', dev: () => true })]
});

Nuxt

// nuxt.config.js
import { lovinspPlugin } from 'lovinsp';

export default defineNuxtConfig({
  vite: {
    plugins: [lovinspPlugin({ bundler: 'vite' })]
  }
});

Astro

// astro.config.mjs
import { lovinspPlugin } from 'lovinsp';

export default defineConfig({
  vite: {
    plugins: [lovinspPlugin({ bundler: 'vite' })]
  }
});

UmiJS (with Mako)

// .umirc.ts
import { lovinspPlugin } from 'lovinsp';

export default defineConfig({
  mako: {
    plugins: [lovinspPlugin({ bundler: 'mako' })]
  }
});

Vue CLI

// vue.config.js
const { lovinspPlugin } = require('lovinsp');

module.exports = {
  chainWebpack: (config) => {
    config.plugin('lovinsp').use(lovinspPlugin({ bundler: 'webpack' }));
  }
};

Farm

// farm.config.js
import { lovinspPlugin } from 'lovinsp';

export default defineConfig({
  vitePlugins: [lovinspPlugin({ bundler: 'vite' })]
});

Migrating from code-inspector (Cloudsmith)

If you were using code-inspector from a private Cloudsmith registry, follow these steps to migrate to the new lovinsp package on npm:

1. Remove old packages

# Remove old code-inspector packages
pnpm remove code-inspector @code-inspector/core @code-inspector/vite @code-inspector/webpack
# or
npm uninstall code-inspector @code-inspector/core @code-inspector/vite @code-inspector/webpack

2. Clean up .npmrc

Remove or comment out Cloudsmith registry configuration from your .npmrc:

- @code-inspector:registry=https://npm.cloudsmith.io/your-org/your-repo/
- //npm.cloudsmith.io/your-org/your-repo/:_authToken=${CLOUDSMITH_TOKEN}

3. Install lovinsp

pnpm add lovinsp
# or
npm install lovinsp

4. Update imports

- import { codeInspectorPlugin } from 'code-inspector';
+ import { lovinspPlugin } from 'lovinsp';

Or for individual adapters:

- import { vitePlugin } from '@code-inspector/vite';
+ import { vitePlugin } from '@lovinsp/vite';

5. Update configuration

// vite.config.js
- codeInspectorPlugin({ bundler: 'vite' })
+ lovinspPlugin({ bundler: 'vite' })

Package name mapping

Old (code-inspector)	New (lovinsp)
code-inspector	lovinsp
@code-inspector/core	@lovinsp/core
@code-inspector/vite	@lovinsp/vite
@code-inspector/webpack	@lovinsp/webpack
@code-inspector/esbuild	@lovinsp/esbuild
@code-inspector/turbopack	@lovinsp/turbopack
@code-inspector/mako	@lovinsp/mako

API compatibility

The API remains 100% compatible. Only the package names and import paths have changed. All configuration options work exactly the same.

Packages

Package	Description
lovinsp	Main plugin (use this)
@lovinsp/core	Core logic
@lovinsp/vite	Vite adapter
@lovinsp/webpack	Webpack adapter
@lovinsp/esbuild	Esbuild adapter
@lovinsp/turbopack	Turbopack adapter
@lovinsp/mako	Mako adapter

Credits

Based on code-inspector by @zh-lx.

License

MIT