A one-file web page that edits itself — nostalgia meets modern tooling

The idea

A developer reimagined a lost piece of the web: the humble index.html as a living, writable thing. Patrick Weaver says the project grew from a nostalgic itch — those early days when a few .html files felt like a tiny neighborhood of sites — and from current “file-first” experiments such as TabFS, mmm.page and Beaker Browser. The goal was simple: let an HTML file edit its own DOM, persist changes back into itself, and keep the whole website in one file. There’s a small, bittersweet thrill to that — like discovering a secret passage back to the Web’s original read/write promise.

How it works

The prototype started with getElementById() and innerHTML hacks and then evolved: a control panel for metadata, a shift from separate index.html/script.css/script.js files to a single-file layout, and two refactors — Vite modules, then TypeScript — to tame messy event listeners. Early editing replaced elements with textareas; that proved fiddly. Switching to contenteditable="true" let edits happen in-place and simplified save/cancel logic (original contents are stored in data- attributes). Supported blocks include h1–h6 and p text, images (stored as Data URLs so the file stays self-contained), and wrapped links. It has been reported that the demo is hosted at doodles.patrickweaver.net/one-pager and that the edit UI only appears when the file is opened via file:/// or at that specific URL — elsewhere a page created with One Pager remains read-only unless you download the index.html.

Why it matters

This isn’t a pitch for replacing CMSes or frameworks. Rather, it’s a compact experiment in tooling and taste: modern build systems and TypeScript solving a very old problem — how to keep web pages tangible. There are practical limits (mobile UX is “not great,” images as Data URLs bloat files, editing is gated by where the file is opened), but the project carves out a niche for tiny, maintainable, single-file sites. Nostalgia, meet practicality. Want a little web-magic in one file? This is how you do it.

Sources: patrickweaver.net, Hacker News