lovinsp

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
• Agent Chat Sidebar: Select a component, review the attached source context, and send change requests to a local coding agent
• Source Priority: Prefer business components over UI primitives like shadcn/ui while keeping the full component tree available
• 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

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
  sourcePriority: [
    { match: /src\/components\/ui\//, priority: -10 }, // Lower shadcn/ui primitives
  ],
  agent: {
    // Runs in the local Node server. Use this handler or configure a command.
    async onRequest(request) {
      console.log(request.prompt, request.source.file)
      return 'Request sent to agent.'
    },
    // command: 'your-agent-cli',
    // args: ['--file', '{file}', '--line', '{line}'],
    // input: 'prompt',
  },
  hideConsole: false,        // Hide console hints
})

Bundler Support

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

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

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

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

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

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

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

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

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

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

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

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

// 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

API compatibility

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

Packages

Credits

Based on code-inspector by @zh-lx.

License

MIT