Clobber

About

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