Live-edit React content in the browser and sync the result back to your source files in development.

React Live Edit gives you:

• inline text/style/class editing via a floating toolbar
• drag-and-drop reordering that writes to JSX source
• cmd/ctrl-click source jump for mapped nodes
• custom component support with safe wrapper-level drag behavior
• Vite, Webpack, and Next.js integration paths

npm install react-live-edit

// vite.config.js
import reactLiveEditPlugin from "react-live-edit/vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    reactLiveEditPlugin({
      test: /\.(jsx|tsx)$/,
      options: {
        customComponents: ["FeatureCard", "MilestoneCard", "TeamQuote"],
      },
    }),
  ],
});

// webpack config rule
{
  test: /\.(jsx|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: "react-live-edit/webpack-loader",
    options: {
      customComponents: ["FeatureCard", "MilestoneCard", "TeamQuote"],
    },
  },
}

For dev servers that need explicit middleware mounting:

const { App } = require("react-live-edit/dev-server");

devServer: {
  app: App("app"),
}

Use a custom Express server and mount react-live-edit/dev-server middleware before passing through to Next.

A complete runnable sample lives in:

• samples/nextjs-minimal

options (for Vite plugin / Webpack loader):

• editable: "manual" | undefined manual disables automatic editable-node insertion; use your own data-react-live-editable annotations.
• customComponents: string[] List of component names to treat as custom-instance wrappers for drag/sync/click behavior.

When a component name is listed in customComponents:

• each instance is wrapped with live-edit metadata
• dragging on/around the instance moves the instance as a sibling block
• drops targeting component internals are normalized to the wrapper
• children passed at call-site remain editable and source-mapped

This tool edits source files directly.

• Use in development only.
• Keep source control and backups enabled.
• Do not expose the live-edit update route in production.

• Vite: samples/vite-minimal
• Webpack: samples/webpack-minimal
• Next.js: samples/nextjs-minimal

Run sample:

cd samples/vite-minimal
npm install
npm run dev

cd samples/webpack-minimal
npm install
npm run dev

cd samples/nextjs-minimal
npm install
npm run dev