{"slug": "show-hn-react-rewrite-a-visual-editor-for-react-that-writes-code-no-llm", "title": "Show HN: React-Rewrite – A visual editor for React that writes code, no LLM", "summary": "React-rewrite, a new open-source visual editor for React applications, allows developers to edit a running React app locally and automatically writes those changes back to the project's source files. The tool, which works with Next.js, Vite, and Create React App, injects an editing overlay via a proxy server and supports property editing, text editing, and element reordering without relying on a large language model.", "body_md": "`react-rewrite`\n\nlets you edit a React app visually while it is running locally, then automatically writes those changes back to the source files in your project.\n\nIt is built for local development and works by opening a proxy in front of your dev server and injecting an overlay into the page.\n\nfull demo:\n[https://x.com/imdonghakim/status/2038230475894899119](https://x.com/imdonghakim/status/2038230475894899119)\n\nYou do not need to download or clone this repo.\n\nFrom the root of your React app:\n\n```\nnpm install -D react-rewrite-cli\n```\n\nStart your dev server, then in a second terminal run:\n\n```\nnpx react-rewrite\n```\n\nIf you want to try it without installing first:\n\n```\nnpx react-rewrite-cli@latest\n```\n\n- Select an element and inspect its component name, file path, and line number\n- Edit supported Tailwind-based layout, spacing, size, typography, and color properties\n- Double-click text to edit it inline\n- Copy, paste, and duplicate elements\n- Delete elements\n- Reorder sibling elements\n- Stage multiple changes and apply them with\n**Confirm** - Undo in-progress canvas changes and review applied changes in the changelog\n\n- Node.js 20+\n- A React project (18+)\n- A running development server\n- Supported app setups: Next.js, Vite, and Create React App\n\nTailwind CSS is recommended if you want to use the property editor. Text editing and some structural actions do not depend on Tailwind.\n\nRun this in the root of the React app you want to edit:\n\n```\nnpm install -D react-rewrite-cli\n```\n\nIf you don't want to install it first, you can also run it directly with `npx react-rewrite-cli@latest`\n\n.\n\n- Start your React dev server as usual.\n- In a second terminal, from the same project root, run:\n\n```\nnpx react-rewrite\n```\n\nIf auto-detection does not pick the right port, pass it explicitly:\n\n```\nnpx react-rewrite 3000\n```\n\nThe tool opens a local proxy in your browser, shows the editing overlay, and writes confirmed changes back into files inside your project.\n\n- Click an element to inspect and select it.\n- Edit properties in the sidebar, drag to reorder where supported, or double-click text to change copy.\n- Review pending changes in the UI.\n- Click\n**Confirm** to apply them to your source files.\n\n```\nreact-rewrite [options] [port]\n\nArguments:\n  port           Dev server port override\n\nOptions:\n  --no-open      Don't open browser automatically\n  --host <host>  Dev server host (default: \"localhost\")\n  --verbose      Enable debug logging\n```\n\n| Shortcut | Action |\n|---|---|\n`Ctrl/Cmd + C` |\nCopy selected element |\n`Ctrl/Cmd + V` |\nPaste copied element as sibling |\n`Ctrl/Cmd + D` |\nDuplicate selected element in place |\n`Delete / Backspace` |\nRemove selected element |\n`Ctrl/Cmd + Z` |\nUndo canvas changes |\n`Ctrl/Cmd + Shift + L` |\nToggle changelog |\n`Ctrl/Cmd + Click` |\nFollow links through the overlay |\n| Double-click text | Edit text inline |\n\n- Run\n`react-rewrite`\n\nfrom your app's root directory so it can detect the framework and safely resolve file paths. - It only works against development builds, not production builds.\n- Only files inside the current project are eligible for writes.\n\nTo work on this repository itself:\n\n```\npnpm install\npnpm build\npnpm test -- --run\n```\n\nFor iterative CLI development:\n\n```\npnpm dev\n```\n\nYou will still need a separate supported React app running locally to test the tool end to end.\n\n```\npackages/\n  cli/      CLI, proxy server, and source transforms\n  overlay/  Injected browser overlay\n  shared/   Shared TypeScript types\n```\n\n", "url": "https://wpnews.pro/news/show-hn-react-rewrite-a-visual-editor-for-react-that-writes-code-no-llm", "canonical_source": "https://github.com/donghaxkim/react-rewrite", "published_at": "2026-05-30 19:24:33+00:00", "updated_at": "2026-05-30 19:46:09.612277+00:00", "lang": "en", "topics": ["ai-tools"], "entities": ["React", "Next.js", "Vite", "Create React App", "Tailwind CSS", "Node.js"], "alternates": {"html": "https://wpnews.pro/news/show-hn-react-rewrite-a-visual-editor-for-react-that-writes-code-no-llm", "markdown": "https://wpnews.pro/news/show-hn-react-rewrite-a-visual-editor-for-react-that-writes-code-no-llm.md", "text": "https://wpnews.pro/news/show-hn-react-rewrite-a-visual-editor-for-react-that-writes-code-no-llm.txt", "jsonld": "https://wpnews.pro/news/show-hn-react-rewrite-a-visual-editor-for-react-that-writes-code-no-llm.jsonld"}}