sem-edit

Click any element in your running app, describe the change you want, and get a precisely targeted LLM prompt — with the right file, the right symbol, and the right context already resolved.

The problem

Telling an LLM "edit PricingPage.tsx" is imprecise. A rendered button may be owned by its component file, a CSS module, a shared design token, or the parent that controls its layout. sem-edit resolves that causal chain before the LLM gets involved.

How it works

1. Press Ctrl+Shift+E in your dev server to activate the overlay
2. Click any element — sem-edit walks the React/Preact fiber tree to find the owning component and its source location
3. An owner graph (built at dev time from your source) is traversed to rank candidate edit surfaces: the component file, its CSS module, any applied class, text literals, event handlers
4. Type your instruction in the inspector panel — intent is classified (style / copy / behavior / layout / data) and surfaces are re-ranked accordingly
5. Click Copy Prompt or Copy JSON to get a fully assembled context bundle ready to paste into any LLM

The LLM receives the smallest correct surface — not a file dump.

Packages

Package	Description
@sem-edit/vite-plugin	Vite plugin — overlay, indexer, owner graph, ranking, packager

Examples

Example	Framework
examples/react	React + @vitejs/plugin-react
examples/preact	Preact + @preact/preset-vite

Quick start

pnpm add -D @sem-edit/vite-plugin

React (vite.config.ts):

import react from '@vitejs/plugin-react'
import { semEditPlugin } from '@sem-edit/vite-plugin'

export default defineConfig({
  plugins: [react(), semEditPlugin()],
})

Preact (vite.config.ts):

import preact from '@preact/preset-vite'
import { semEditPlugin } from '@sem-edit/vite-plugin'

export default defineConfig({
  plugins: [preact(), semEditPlugin()],
})

A brief on-screen hint shows the activation shortcut when the dev server starts. See @sem-edit/vite-plugin for the full options reference.