Item logo image for froede

froede

Item media 4 (screenshot) for froede
Item media 1 (screenshot) for froede
Item media 2 (screenshot) for froede
Item media 3 (screenshot) for froede
Item media 4 (screenshot) for froede
Item media 1 (screenshot) for froede
Item media 1 (screenshot) for froede
Item media 2 (screenshot) for froede
Item media 3 (screenshot) for froede
Item media 4 (screenshot) for froede

Overview

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

Details

  • Version
    0.5.1
  • Updated
    July 24, 2026
  • Offered by
    Munito
  • Size
    34.3KiB
  • Languages
    English
  • Developer
    Email
    torres@orquio.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Related

WPGraft - Copy anything to your website builder

5.0

Copy any website and paste it into your website builder as a fully editable page.

MD Viewer

0.0

Renders .md files from file:// URLs as rich HTML. Right-click → View Raw Markdown.

Markdown Viewer

5.0

Renders local and hosted Markdown files in GitHub style, with a one-click toggle between preview and source.

Edit website

4.3

Use Edit Website: Easily web edit, change text, and page edit on and off content instantly. Alter a website​ with ease

Aperture CSS — Visual CSS Inspector & Editor

5.0

Inspect and edit CSS on any page. Drag any value, see which rule won and why, and keep your edits as a reviewable diff.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Source Patch

0.0

An extension for your browser that makes editing the source code of your website easy.

Real Page Source

0.0

View the fully rendered source code of any webpage, the live source after all JavaScript has executed.

Modify — Visual CSS Editor for AI Coding Agents

5.0

Edit live webpages with a visual CSS editor, then copy exact changes as a structured prompt for terminal AI coding agents.

cssPicker - copy css from website

2.8

copy html and css from any website

htmlGenius

5.0

HTML在网页中实时编辑+精确批注修改意见+一键发送给Codex、Claude Code等Agent自动修改+团队共享批注

PagePatch - HTML File Editor

5.0

Edit local HTML files directly in Chrome with rich formatting tools and save changes as the same file or a copy.

WPGraft - Copy anything to your website builder

5.0

Copy any website and paste it into your website builder as a fully editable page.

MD Viewer

0.0

Renders .md files from file:// URLs as rich HTML. Right-click → View Raw Markdown.

Markdown Viewer

5.0

Renders local and hosted Markdown files in GitHub style, with a one-click toggle between preview and source.

Edit website

4.3

Use Edit Website: Easily web edit, change text, and page edit on and off content instantly. Alter a website​ with ease

Aperture CSS — Visual CSS Inspector & Editor

5.0

Inspect and edit CSS on any page. Drag any value, see which rule won and why, and keep your edits as a reviewable diff.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Source Patch

0.0

An extension for your browser that makes editing the source code of your website easy.

Real Page Source

0.0

View the fully rendered source code of any webpage, the live source after all JavaScript has executed.

Google apps