Whether you’re a do-it-all designer/developer or if those roles are separate, odds are your typical workflow involves taking a static HTML mockup and wiring it up with all your crazy codes.

So, maybe you’ve got an HTML file with a bunch of dummy data in it that you need to demo for a client. You probably stuck it somewhere in /public because it’s easy. It’s probably got a list of copy-and-pasted garbage in there, too, so it looks like a “real” page with lots of data. And of course there’s the header, footer, and other layout cruft you had to add so it fits the look of the rest of the application.

You’ve gotten some feedback from your client, and made some tweaks to the design. It’s looking pretty good. You’re feeling pretty good. Now it’s time to wire that page into the application.

Still feeling good?

This is the part that sounds so easy until you have to dive in and do it. It’s painful and tedious, but the good news is, it doesn’t have to be. It’s time to let Showoff come to your rescue.

  script/plugin install git://github.com/adamlogic/showoff.git
  script/generate showoff

This plugin is an extraction from a recent project where I got tired of dealing with this same old scenario. I wanted a place where I could stick mockups without thinking about it. I wanted my mockups to use the same layout, CSS, and JavaScript that the rest of my application does. I wanted to be able to use Ruby in my mockups to have access to looping, variables, and data generation (Faker). I wanted partials in my mockups. And I wanted a single place to go where the client and development team could see all of the mockups.

After installing and generating Showoff, navigate to /mockups in your app to see some examples. To make your own, just create a file in app/views/mockups. You can use HTML, ERB, or any other templating language (such as HAML) that your application supports. Yes, it really is that simple.

Here is an example in a fresh Rails app with Ryan Bates’ nifty_layout applied:

I’m sure Showoff isn’t the first plugin to attempt to simplify this process, but I can tell you that it’s working really well for us. Check it out and let us know what you think.

Update: I should also add that this plugin requires Rails 2.3, since it makes use of an engine-style plugin. This basically lets you embed one “mini app” inside of your main app. It’s pretty powerful, and I’ll write more about my experience of extracting this plugin in a a future post.