10 jQuery Live Page Edit Plugins

Sam Deering

Live edit functionality in web pages and web apps is all the rage these days but never fun to implement. This is where jQuery will make it easier for all of us and here is a collection of 10 jQuery Live Page Edit Plugins that your clients may find useful. Check them out… enjoy!

Related Posts:

1. jQuery Plugin: In-Line Text Edit

Inline-edit gives users the ability to make changes to text blocks and view those changes immediately. The input from the users is passed to a server side script before returning the parsed data that is display back to the user.


In-Line Text Edit

Source
Demo

2. LiveXMLEdit

Is a tool for inline editing of XML files. It renders the uploaded XML file and lets you create and delete nodes and attributes, as well as update their values by clicking on them directly.


LiveXMLEdit

Source + Demo

3. jQuery TE

Is an open source library of WYSIWYG model text editor (HTML Editor) component.


jQuery TE

Source
Demo

4. HTML-5-WYSIWYG-Editor

This is part of XVweb project. What’s new in 0.48? * Now language support * Now, you can paste screenshot to editor. Try – press PrintScreen key and paste to edtior.


HTML-5-WYSIWYG-Editor

Source
Demo

5. Storage.js

Simple HTML5 page edits. Uses the new HTML5 content editable attribute and localStorage to bring you HTML5 awesomeness.


Storage.js

Source Code

6. TableEditor

Provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.


TableEditor

Source + Demo

7. Jeditable

Edit In Place Plugin For jQuery


Jeditable

Source
Demo

8. jQuery Inline Edit

Inline Edit supports both single line and multiple line inputs.


jQuery Inline Edit

Source
Demo

9. LiveEdit

The only edit-in-place plugin that met these two criteria:
> Work on elements not yet in the DOM
> Didn’t post anything to the server


LiveEdit

Source (unfortunately no demo)

10. AJAX instant Edit Script – clean HTML

This is an instant edit script.


AJAX instant Edit Script

Source + Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.syrbot.com Greg

    the demo for http://strd6.com/2011/04/liveedit/ doesn’t work -just has instructions.

    • jquery4u

      @greg, thanks mate I’ve updated.

  • chandu maurya

    5. Storage.js link broken

    • http://jquery4u.com/ jQuery4u

      Thanks chandu, fixed up.