Clobber

Clobber lets you edit your own static HTML pages directly in the browser. Hold Cmd (or Ctrl on Windows), click any tagged element, and start typing. Replace images with a click. Hit Cmd-S to save everything back to your local files. No CMS. No database. No build step. No framework. Just your HTML files and a browser. HOW IT WORKS Tag elements you want to be editable with a simple data attribute: <h1 data-edit="hero.title">Your headline here</h1> <img data-edit="hero.photo" src="images/hero.jpg"> Turn on Clobber from the toolbar icon, then Cmd-click to edit. Text becomes inline-editable. Images open a file picker. When you save, Clobber writes your changes back to the original files on disk. WHAT MAKES IT DIFFERENT Most browser-based editors save by serializing the live DOM. That causes problems: JavaScript-generated content gets baked into your HTML, formatting changes even when content doesn't, and git diffs explode with noise. Clobber never touches the live DOM at save time. Instead, it fetches your original source HTML, pairs each element with its source counterpart, and records edits as byte-range patches against the original string. On save, patches are spliced in reverse byte order so nothing outside an edited range moves. The result: your git diff shows exactly what you changed. Nothing more. FEATURES Inline text editing with contenteditable Image replacement via native file picker Image deletion (removes the tag from source, leaves the file on disk) Multi-page editing across your entire site File System Access API for direct local file read/write Optional Node helper server for Safari and Firefox Download fallback for any browser Vercel deploy hook button for one-click publishing Timestamped backups before every save Sanity check warns you if a save looks suspicious Dark, minimal editing UI that stays out of your way SAFETY Clobber has three independent safety layers: Source-DOM pairing ensures JavaScript-generated content is never editable. If it's not in your source HTML, you can't accidentally save it. Sanity check compares the patched output to the original. If the size delta is unusually large, you get a confirmation prompt before the write goes through. Timestamped backups copy each file before overwriting. Rollback is always one copy away. WHO IT'S FOR Clobber is for developers and designers who maintain static HTML sites — landing pages, portfolios, microsites, side projects — and want to make quick content edits without opening a code editor. It's not a CMS replacement. It doesn't do collaboration, permissions, drafts, or structured content. It does one thing: lets you edit the page where you can see it, and saves what you changed. OPEN SOURCE Clobber is MIT licensed and fully open source. https://github.com/savonge/clobber