@codedesign/vite-live-edit-plugin

A Vite plugin for live editing React components with AST-powered source mapping. Enables precise, character-level updates to your source files directly from the browser.

Features

- 🎯 AST-Powered Source Mapping - Injects precise location data into JSX elements
- 📝 Text Content Editing - Edit text content directly from the browser
- 🖼️ Image Source Editing - Update image sources with validation
- 🎥 Video Source Editing - Update video src attributes with validation
- 🌐 Iframe Support - Edit iframe src and srcDoc attributes
- ✅ Full Validation - Pre and post-update validation with rollback capability
- 🔒 Security - Validates URLs and content before applying changes
- ⚡ HMR Integration - Automatically triggers Vite's Hot Module Reload
- 🔍 Module Graph API - Query dependency relationships to optimize build operations

Installation

$3

``bash
npm install @codedesign/vite-live-edit-plugin --registry=https://registry.npmjs.org/
`

$3

`bash
npm install @codedesign/vite-live-edit-plugin --registry=https://npm.pkg.github.com
`

$3

`bash
npm install /path/to/codedesign-live-edit-plugin
`

Or using a git repository:

`bash
npm install git+https://github.com/your-org/codedesign-live-edit-plugin.git
`

Usage

$3

`javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { sourceMapperPlugin, enhancedLiveEditPlugin } from '@codedesign/vite-live-edit-plugin';

export default defineConfig({
plugins: [
sourceMapperPlugin(), // MUST BE FIRST - before any other transformations
react(),
enhancedLiveEditPlugin(), // Includes module graph API automatically
],
});
`

$3

1. Source Mapping: The sourceMapperPlugin() injects data-element-id and data-source-loc attributes into JSX elements during development.

2. Live Editing: The enhancedLiveEditPlugin() sets up API endpoints:
- /api/live-edit - Receives update requests from the browser, validates location data, updates source files, and triggers HMR
- /__module_graph - Queries Vite's module graph to find which modules import a given file (useful for smart screenshot capture and impact analysis)
- /__module_errors - Queries all types of errors from Vite's internal state (module errors, transform errors, CSS errors, plugin errors, resolution errors)

$3

The plugin automatically instruments and enables live editing for:

| Element | Attribute | Type | Description |
|---------|-----------|------|-------------|
| , | src | image-src | Image source URLs |
|