X-editable for Rails


Add this line to your application's Gemfile:

gem 'x-editable-rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install x-editable-rails



Choose between the following javascripts:

You'll also need to include editable/rails in your scripts for this to work.

#= require editable/bootstrap-editable
#= require editable/rails

Choose the corresponding stylesheets:

// as CSS
*= require editable/bootstrap-editable

// or SCSS
@import "editable/bootstrap-editable";

Enable editing with jQuery:


For custom inputs like the Wysihtml5 editor, add these dependencies:

#= require editable/bootstrap-editable
#= require editable/inputs-ext/wysihtml5
#= require editable/inputs-ext/bootstrap-wysihtml5
#= require editable/inputs-ext/wysihtml5-editable
#= require editable/rails

And related stylesheets:

//= require editable/bootstrap-editable
//= require editable/inputs-ext/bootstrap-wysihtml5
//= require editable/inputs-ext/wysiwyg-color

Making Things Editable

x-editable-rails provides a helper method in your view to make your model values editable. By default, you need to specify the model and property that should be editable. A span element is rendered with data-* attributes used by x-editable.

# the editable object and the attribute to edit
%h1= editable @model, :name

You can customize the tag name and title attribute:

The editable helper method automatically adds these data-* attributes used by x-editable.

# editable object, what_you_want_update, e: exception - when is xeditable? false or can? :edit, object is false
%h1= editable @model, :name, url: model_path, value: @model.name.upcase

Here are some special features to enhance what's baked into x-editable:

source = [ "Active", "Disabled" ]
editable @model, :enabled, source: source
source  = [ "Active", "Disabled" ]
classes = { "Active" => "label-success", "Disabled" => "label-default" }
editable @model, :enabled, source: source, classes: classes, class: "label"
%h1= editable @model, :name, nested: :translations, nid: @model.translation.id

# example of nested resource
%h1= editable [picture.gallery, picture], :name, nested: :translations, nid: picture.translation.id


Add a helper method to your controllers to indicate if x-editable should be enabled.

def xeditable? object = nil
  true # Or something like current_user.xeditable?

You can use CanCan and checks the :edit permission for the model being edited.

def xeditable? object = nil
  can?(:edit, object) ? true : false

"Don't Repeat Yourself" Templates

To make your views cleaner, you can specify all your options for each class and attribute in a YAML configuration file. Attributes where the title or placeholder are not different except maybe capitalized can be left out because they are automatically capitalized when rendered (see above).

This example uses the MailingList class and its attributes. The attribute value can be a string, which is used as the title and placeholder. If you want to specify other options, create a hash of options.

Install configuration file like this: rails g x_editable_rails:install, this step is not necessary

    # Specify placeholder text for each attribute or a Hash of options
    name: Mailing list name
      type: select
        - Active
        - Disabled
      type: email
      title: Reply-to email
      type: email
      type: password
      type: select
      # specify a URL to get source via AJAX (see x-editable docs)
      source: <%= ::Rails.application.routes.url_helpers.mailing_lists_source_path %>

Now you can specify your editable fields without options because they will be inherited from your YAML config.

model = MailingList.new

editable model, :name    # type: "text",   title: "Mailing list name"
editable model, :enabled # type: "select", title: "Enabled", source: [ "Active", "Disabled" ]


Gem also contains demo application with integrated x-editable

cd test/dummy
rake db:migrate
rake db:seed
rails g x_editable_rails:install # optional, it generate config example
rails s


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request