How to edit web pages in browser in real time like visualwebsiteoptimizer.com?

Question

Is there a way to enable in-browser editing of a web page, as done in following video (demo of visualwebsiteoptimizer.com)?

(see video at 0:15)

http://www.youtube.com/watch?v=oy89HnIJsE4&feature=plcp

Basically, what I wish is to be able to:

• take a copy of a web page, (that part is ok),
• somehow enable edit mode (as would be done in any text editor),
• click on the element I wish to edit, and be able to modify the selected element

---

Edit: sorry I wasn't clear enough: my end goal is to enable my users to do live editing online (as done by visualwebsiteoptimizer.com) in a visual way.

Answer 1

You could use designMode=on on the document, or contentEditable=true on specific elements. See for a small demo http://html5demos.com/contenteditable/. In addition, you could also catch mouseclicks and keydowns with jQuery and check the target element as to show options like CSS etc..!

Answer 2

You can try using Jelliphy. Jelliphy is a tool that allows any users to edit any text of a web page, to move and resize elements in the page, to draw on the page, to edit the images and much more.

Jelliphy Lite and Jelliphy Extended are bookmarklets that you can use with any browser for free: just go to the page to change and click the Jelliphy link from your favorites.

Answer 3

1 - use google chrome.

2 - hit ctrl + shift + i

3 - go to elements tab

4 - right click on the html you want to edit and select "edit as html" or double click in the text you want to change in that tab