Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Live object editing for django with jQuery UI and Bootsrap
CSS JavaScript Python Shell
Branch: master
Failed to load latest commit information.
editlive Deactivated concurrent editing since it was causing problems..
example_project Updated
.gitignore Updated .gitignore
.gitmodules Integrated autodoc for JavaScript files, updated documentation
README.rst Update README.rst Fixed max django version (again)



Live form editing for django with Bootstrap and jQuery UI

Demo Official site
Documentation Read the Docs
Build server Travis ci BUILDSTATUS


Basic usage

In a template, editlive can take any in context database object and make it editable live with a simple template tag:

{% load editlive_tags %}

{% editlive "object.description" as object_description %}
    {{ object_description }}

This will render the object's property value in a clickable container. When the container is clicked, it changes to a input field according to the field's type.

It's possible to apply template filters to the placeholder's display value like this:

{% editlive "object.description" template_filters="capfirst" as object_description %}

{% editlive "object.date_visit" template_filters="date:'l j M Y at H:i\h'" as date_visit %}

Most other arguments are converted into js options and fed to the jQuery UI widget.

Working with formsets

Formsets are a bit tricky since you need to edit multiple fields with the same id and name attributes.

So for this to work, the id and name attributes must be altered to make them unique. To achieve this, simply pass a formset argument to editlive and give it a meaningful name:

{% editlive "object.first_name" formset="user" as user_firstname %}
{{ user_firstname }}

The input field will then look like this:

<input type="text" maxlength="250" name="user_set-0-first_name" id="id_user_set-0-first_name" />

The magic

To avoid conflicting with other plugins or altering the input field directly, editlive use its own tag to bind the field properties and settings to the right input.

For example, if we were to editlive the first_name property of a user object, the output would look something like this:

<input type="text" maxlength="250" value="Bob" name="first_name" id="id_first_name" />
<editlive app-label="auth" module-name="user" field-name="first_name" data-field-id="id_first_name" data-type="textField" object-id="1" rendered-value="Bob" />

This way editlive stays non-intrusive as it doesn't alter the original input tag.

This also means that you are not constrained to use the editlive template tag, you can hardcode <editlive /> tag in HTML and the JavaScript will hook it up.


This project was created and is sponsored by:

Motion Média (

Something went wrong with that request. Please try again.