froede

front + edit + code - click on your localhost page and the change lands in your real source files.

froede is a lightweight toolkit for editing the code behind a running web page or app by clicking on what you see - no diving into the source, no full IDE required. Point at an element on a page running on localhost, change it - text, size, color, typography, spacing, attributes, its position (drag to move) - or delete it, and have that change land in the real source file. Not in a sandbox. Not through an AI agent as a middleman. Not a throwaway DOM tweak that disappears on reload. How it works: - Click any element to select it. Resize handles appear on its corners (Shift+drag to lock to one axis), and a panel shows size, color, typography, spacing and the element's editable attributes. - Drag an element to move it, with smart alignment guides that snap to the edges and centers of the elements around it, Figma-style. Press Backspace to delete the selected element. - Double-click a text element to edit its content in place. - Undo and redo without leaving the page: Ctrl+Z steps back through your edits, Ctrl+Shift+Z redoes them. froede refuses to undo over a file you have edited by hand in the meantime, so your own work is never overwritten. - Editing an element rendered by a loop (an array .map() in React) asks first, then lets you change just that one instance or all of them - a click on one item never silently rewrites the rest. - Resizing writes fluid widths instead of hard pixel values, so it does not break a responsive layout. - Every change writes straight to the real source file on your machine - static HTML and React + Vite projects are both supported. Setup: 1. Install this extension. 2. In your project: npx froede init (skip for static HTML). 3. Run: npx froede - it prints a port and pairing token to paste into this extension's popup. froede is open source (MIT). Full docs, source and security model: https://github.com/Mun1to/froede