auto_html is a Rails extension for transforming URLs to appropriate resource (image, link, YouTube, Vimeo video,...). It's the perfect choice if you don't want to bother visitors with rich HTML editor or markup code, but you still want to allow them to embed video, images, links and more on your site, purely by pasting URL. Checkout live demo.

Example usage

Transforming string with text and URLs is done with auto_html method:

include AutoHtml

auto_html('Hey! Checkout out:') { simple_format; link(:target => 'blank') }
=> "<p>Hey! Checkout out: <a href='' target='blank'></a></p>"

You'll probably have user input stored in model, so it's a good place to automate and even store this conversion for performance reason. This is done with auto_html_for method. Let's say you have model Comment with attribute body. Create another column in table Comments called body_html (this is optional, but recommended for performance reasons). Now have something like this:

class Comment < ActiveRecord::Base
  auto_html_for :body do
    youtube(:width => 400, :height => 250)
    link :target => "_blank", :rel => "nofollow"

... and you'll have this behaviour:

Comment.create(:body => 'Hey check out this cool video:')  
=> #<Comment id: 123, body: 'Hey check out this cool video:', body_html: '<p>Hey check out this cool video: <iframe class="youtube-player" type="text/html" width="587" height="350" src="" frameborder="0"> <br /></iframe></p>'>

Note that order of invoking filters is important, ie. you want html_escape as first and link amongst last, so that it doesn't transform youtube URL to plain link.

Now all you have to do is to display it in template without escaping, since plugin took care of that:

<% for comment in @comments %>
   <li><%= comment.body_html %></li>
<% end %>

If you need to display preview, no problem. Have something like this as action in your controller:

def preview
  comment =[:comment])
  render :text => comment.body_html

Plugin is highly customizable, and you can easily create new filters that will transform user input any way you like. For instance, this is the image filter that comes bundled with plugin:

AutoHtml.add_filter(:image) do |text|
  text.gsub(/http:\/\/.+\.(jpg|jpeg|bmp|gif|png)(\?\S+)?/i) do |match|
    %|<img src="#{match}" alt=""/>|

Non-ActiveRecord models

AutoHtml uses standard ActiveModel API, which means that you can include AutoHtmlFor module (that automates transformation of the field) in any non-ActiveRecord model that uses ActiveModel. Here's working mongoid example:

class Post
  include Mongoid::Document
  include AutoHtmlFor

  field :body

  auto_html_for :body do

Rake and Capistrano tasks

AutoHtml has a Rake task for rebuilding cached in DB column values. Usage:

rake auto_html:rebuild CLASS=yourmodel

Where 'yourmodel' is the name of model which values you want to rebuild.

If you want to run it on remote server, just add this to your deploy.rb:

require 'auto_html/capistrano'

Now you can run:

cap auto_html:rebuild CLASS=yourmodel

Bundled filters

For filter list and options they support check here.


Specify the gem in Gemfile of the project

gem "auto_html"


As everything these days it's on github:

Published 2010-08-15 · Home user 420
Jacky Alciné 2012-10-20 21:22:47 UTC

First, I like the having Github as a basis of commenting, very nice!

Also, can you implement a JavaScript version of this? It'd be nice to not have to call back the server each time to handle work like this. user 420
Tambe257 2013-05-25 15:22:24 UTC

Does this work with Heroku? I got it working great locally, but when I push to Heroku it breaks. I get this in the heroku log:
2013-05-25T15:17:59.244206+00:00 heroku[router]: at=info method=GET path=/favicon.ico fwd="" dyno=web.1 connect=8ms service=16ms status=304 bytes=0 user 420
eGlaza 2013-07-07 12:52:13 UTC

Ready for Rails 4? I need this gem in my rails 4 app, but i don't know if it will work. 140
Dejan Simic 2014-04-11 16:52:32 UTC

It does.

light24bulbs 2014-06-12 03:25:28 UTC

You misspelled include in the first code segment 140
Dejan Simic 2014-07-12 16:36:21 UTC

Thanks! Fixed.

tedma4 2015-02-01 00:14:30 UTC

I'm new to ror, so could you tell me how you display the preview after a link is placed.