repository·main·Indexed 43 days ago
https://github.com/donghaxkim/react-rewriteA visual editing tool for React applications that allows developers to edit components, Tailwind styles, and text directly in the browser during local development. It uses a local proxy to automatically write changes back to source files. Compatible with Next.js, Vite, and Create React App (CRA) on Node.js 20+ and React 18+.
To use react-rewrite, ensure your environment meets these requirements:
Before using react-rewrite, ensure your environment meets these requirements:
Follow these steps to start editing your React app visually:
npm run dev or npm start).npx react-rewriteIf the tool fails to auto-detect your development server's port, specify it manually:
npx react-rewrite 3000react-rewrite will open a local proxy in your browser and inject an editing overlay. Changes you confirm in the UI will be written directly to your source files.
The visual editing process follows this flow:
Keep the following constraints in mind when using react-rewrite:
To use react-rewrite to visually edit your React application, follow these steps:
npm install -D react-rewrite-clinpx react-rewriteIf you want to try it without installing it to your project first, you can run:
npx react-rewrite-cli@latestnpm install -D react-rewrite-cli
npx react-rewriteTo use react-rewrite in your project, install the CLI as a development dependency in the root of your React application.
npm install -D react-rewrite-cliFor Tailwind v3 projects, the resolver uses the official resolveConfig utility from the tailwindcss package:
tailwind.config.js, tailwind.config.ts, tailwind.config.cjs, or tailwind.config.mjs) from the projectRoot.resolveConfig(userConfig) to get the fully resolved theme.fontSize tuples [size, lineHeight]) to ensure a consistent token map format.For Tailwind v4 projects, the resolver uses a CSS-first approach:
src, app, styles, css, etc.) for .css or .scss files.@theme { ... } blocks within those files to extract custom CSS properties.--color-* $\rightarrow$ colors--spacing-* $\rightarrow$ spacing--text-* $\rightarrow$ fontSize--font-weight-* $\rightarrow$ fontWeight--radius-* $\rightarrow$ borderRadius--border-* $\rightarrow$ borderWidth--opacity-* $\rightarrow$ opacity--tracking-* $\rightarrow$ letterSpacing--leading-* $\rightarrow$ lineHeightDEFAULT_V4_THEME, where custom properties take precedence.The resolver detects the Tailwind CSS version by inspecting node_modules/tailwindcss/package.json within the provided projectRoot.
"3" if Tailwind v3 is detected."4" if Tailwind v4 is detected.null if tailwindcss is not found in node_modules."unknown" if no version can be determined.A JSXStructuralPath provides a deterministic way to identify a specific JSX element within a component tree. This is used to ensure that operations (like updates or deletions) target the correct element even if the file structure changes slightly.
It consists of:
componentName: The name of the function containing the element.filePath: The relative path to the source file.segments: An ordered array of JSXPathSegment objects representing the path from the component root to the target.Each JSXPathSegment includes a name (tag or component name) and a discriminator to resolve ambiguity (e.g., via key, id, or index).
export interface JSXPathSegment {
name: string;
discriminator:
| { type: "key"; value: string }
| { type: "id"; value: string }
| { type: "index"; value: number }
| { type: "map-template" }
| { type: "root" };
classHint?: string[];
}
export interface JSXStructuralPath {
componentName: string;
filePath: string;
segments: JSXPathSegment[];
}The SketchServer processes several types of messages from clients. These are categorized into sequential operations (which are queued to prevent race conditions) and concurrent/read-only operations.
reorder: Moves a component from fromLine to toLine.undo: Pops the last entry from the undoStack and restores the file content.updateProperty / updateProperties: Updates Tailwind classes or other properties using the batch engine.updateText: Updates the text content of an element.commitBatch: Executes an array of BatchOperation objects.revertChanges: Reverts multiple specific changes using provided undoIds.ping: Returns a pong response.getSiblings: Returns a list of sibling elements for a given file and parent line.discoverFile: Searches for a file by componentName.fileStat: Returns the mtime and size of a specific file.