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


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.


Source + Demo

3. jQuery TE

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

jQuery TE


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.



5. Storage.js

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


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.


Source + Demo

7. Jeditable

Edit In Place Plugin For jQuery



8. jQuery Inline Edit

Inline Edit supports both single line and multiple line inputs.

jQuery Inline Edit


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


Source (unfortunately no demo)

10. AJAX instant Edit Script – clean HTML

This is an instant edit script.

AJAX instant Edit Script

Source + Demo

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Greg

    the demo for doesn’t work -just has instructions.

    • jquery4u

      @greg, thanks mate I’ve updated.

  • chandu maurya

    5. Storage.js link broken

    • jQuery4u

      Thanks chandu, fixed up.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.