How to make a web page editable in real-time and save locally?

Question

I have a basic .html file i use for my homepage, it has links to various websites i visit with html and some css

Im looking to make it editable in real-time (in the browser) and making it save automatically directly to the .html file

not sure where to start?

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content — Alon Eitan, Jul 25 '16 at 12:30
Welcome to Stack Overflow. [Read here](http://stackoverflow.com/help/mcve) for more information about how to create a Minimal, Complete and Verifiable question. — Toby, Jul 25 '16 at 12:30
Browser don't have the ability to edit html and save it automatically since that's usually not required, and may even be a security flaw. You'll need to send requests to a server that saves the modified page. — Carcigenicate, Jul 25 '16 at 12:31

zhibirc · Answer 1 · 2016-07-25T13:01:06.433

1

Try in console on any page:

document.documentElement.contentEditable = true;

edited Jul 25 '16 at 13:01

answered Jul 25 '16 at 12:59

zhibirc

180
14

This doesn't save automatically to a HTML file though. – Ashwin Ramaswami Jul 25 '16 at 13:00
It's true. Use AJAX for sending data to server, for example, see http://jsfiddle.net/ch6yn/ – zhibirc Jul 25 '16 at 13:04
The question said **locally** not "on a remote server". – Quentin Jul 25 '16 at 13:06

score 0 · Answer 2 · edited May 23 '17 at 11:58

It is not possible to automatically save an HTML page to the client locally. However, it is possible to let the user download the current page, say, by clicking a button that says "Download." See this answer for an example of the implementation.

However, if you want to save it to the server, you can do that using AJAX requests. You will need a server-side implementation of this, not just static HTML, though.

How to make a web page editable in real-time and save locally?

2 Answers2