@open-editor/vite

@open-editor/vite

A vite plugin for fast find source code.

Install

npm

npm -D i @open-editor/vite

yarn

yarn -D add @open-editor/vite

pnpm

pnpm -D add @open-editor/vite

Usage

add OpenEditor to vite.config.ts.

it only works for process.env.NODE_ENV === 'development'.

import { defineConfig } from 'vite';
import OpenEditor from '@open-editor/vite';

export default defineConfig({
  plugins: [OpenEditor()],
});

press hotkey ⌨️ option ⌥ + command ⌘ + O, then click the HTML element you wish to inspect.

press hotkey ⌨️ command ⌘ + 🖱 click, show component tree.

press hotkey ⌨️ esc or 🖱 right-click to exit inspect.

Options

key	type	default	description
rootDir	string	process.cwd()	source rootDir path
displayToggle	boolean	false	render the toggle into the browser

Playground

react	Source	StackBlitz
vue	Source	StackBlitz