When prompting AI coding tools like OpenAI Codex, Cursor, Claude Code, or GitHub Copilot to refactor a frontend component, providing accurate visual context (DOM hierarchy, CSS classes, container dimensions) is often a bottleneck.
ViteLens solves this by letting you Ctrl + Click
multiple UI elements on localhost and 1-click copy structured Markdown context tables directly into your prompt.
When asking an AI model to restyle a complex React/Vue/Svelte view, developers frequently have to:
This friction slows down the AI-assisted development loop.
Press Ctrl + Click
across any UI elements on your page to select them simultaneously. ViteLens generates a clean, structured Markdown table containing:
You can paste this directly into Codex, Cursor, or Claude Code for instant, high-accuracy refactoring.
Need to write E2E tests? Click Record User Flow, click through your workflow in the browser, and export a ready-to-run Playwright or Cypress test suite.
Hover over any element and press Alt + Click
to jump directly to the source file, line, and column in your editor (Cursor, VS Code, Windsurf, WebStorm, Zed, Sublime).
npx vite-lens dev
npm install -D vite-lens
python
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteLens } from 'vite-lens';
export default defineConfig({
plugins: [react(), viteLens({ editor: 'auto' })],
});
Developer tools should never leak into production. ViteLens uses Vite's apply: 'serve'
lifecycle hook to ensure all runtime code is physically omitted from production bundles (vite build
).
ViteLens is 100% open-source under the MIT license: