In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery

This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. Please try out demo to see how it works.

Demo (new window) Documentation

Current version 1.5.1 changelog

↓ Exact build of x-editable depends on core library you want to use ↓

Bootstrap (2 or 3)

Twitter Bootstrap has awesome Form markup and Popover plugin allowing pretty in-place editing. For date input it uses bootstrap-datepicker.

jQuery UI (1.9+)

Starting from jQuery UI 1.9 it has Tooltip plugin. In combination with Button widget it is suitable enough for editable form and popup. You can apply any theme of jQuery UI Themeroller.

jQuery (+ poshytip plugin)

The simplest build of X-editable. For inline mode you need only jquery. For popup mode it uses Poshytip plugin. For datetime fields you can use combodate type based on momentjs.

Using CDN :

Provided by cdnjs.com

Latest release

1.5.1 (Nov 4, 2013)

  • support bootstrap popover = auto
  • validate method can change the value
  • select2 tags mode fixed

Thanks to everybody for support and reporting!

Previous versions
For AngularJS projects consider



  • popup and inline modes
  • supported inputs:
    • text
    • textarea
    • select
    • date
    • datetime
    • dateui
    • combodate
    • html5types
    • checklist
    • wysihtml5
    • typeahead
    • typeaheadjs
    • select2
  • client-side and server-side validation
  • customizible container placement
  • toggle by click, dblclick or manually
  • keyboard support (escape/enter/tab)
  • works in IE7+ and all modern browsers
  • unit tested
  • live events

Why editable?

  • fast development, no special FORM markup
  • less number of screens in your application
  • easy adding / removing fields
  • simple backend script for data update
  • more convenient on small forms

Related projects