Building a Web Page That Edits Itself
2 days ago
- #web development
- #self-editing webpage
- #HTML experiment
- The original vision of the web was read/write, and the author aimed to create an HTML file that updates itself, inspired by file-first approaches and the read/write web revival.
- The project evolved from a basic prototype using JavaScript to manipulate the DOM, eventually refactoring into TypeScript modules with Vite for better code organization and bug fixes.
- A key design shift was using contenteditable='true' for in-place editing instead of replacing elements with textareas, simplifying the UI and synchronization, with features like cancel actions via data attributes.
- The final feature set includes text elements (h1-h6, p), images stored as Data URLs, and link-wrapping for text or images, with a control panel for metadata and styles on the right side.
- The editing UI is restricted to local file:/// protocol or a specific subdomain; users can download the index.html to edit elsewhere, and examples are showcased in a gallery.