Domshift

Shape and shift the DOM with magic. Domshift lets you edit your React app visually while it is running locally, automatically writing those changes back into your source code.

It is built for local development and works by opening a lightweight proxy in front of your dev server and injecting an overlay into the page.

Fastest path

From the root of your React app:

npm install -D @agrimsinghx/domshift

Start your dev server, then in a second terminal run:

npx @agrimsinghx/domshift

If you want to try it without installing first:

npx @agrimsinghx/domshift@latest

Features

• AI Fallback Export: "Copy to AI" lets you bypass AST compilation errors by exporting a clean JSON payload for an AI to implement your exact drag-and-drop moves!
• Z-Index Multi-Click: Rapid-click over overlapping elements to cycle through the Z-index stack—no more fighting stacked layers to select the background!
• Visual Transforms: Move, scale, and rotate components effortlessly.
• Shortcuts: Hit Ctrl+Z to undo and Ctrl+Y to redo in the visual canvas.

Basic flow

1. Start your React dev server (e.g. npm run dev)
2. In a second terminal, run npx domshift
3. Click an element to inspect and select it. Rapid-click or use Alt+Click to pierce through overlapping elements.
4. Edit properties in the sidebar, drag to move, or scale/rotate.
5. Review pending changes in the UI.
6. Click Confirm to apply them to your source files, or Copy to AI if you'd prefer an LLM implement the changes!

Publishing

To publish this package to npm:

cd packages/cli
npm publish --access public

License

MIT