Friday, September 29th, 2006

In-Browser Wireframe Prototyping with Frametastic

Category: Showcase

Christian Romney was sick of doing wireframesin powerpoint and photoshop, so he created a quick and dirty in browser wireframe tool called Frametastic, which uses Prototype and under the covers.

Now, before you think this is some uber-cool web development tool, let me give you the caveats:

  • It’s currently Firefox only for reasons I’ve just plain not bothered to figure out (I’m sure it’s something trivial)
  • It keeps state only during the lifespan of the page – refresh, close window, or navigate away and all your work is lost (eventually, I’ll add a dead-simple Ajax call that persists the stored wireframes to the server)
  • It has some small UI bugs like when you name a box, the label keeps focus instead of the box itself

Having said all that, I find it to be extremely useful in my daily work because I don’t require anything more sohpisticated. I’m a big fan of lightweight tools and lightweight processes – I’d call them agile, but don’t want to incur Steve Yegge’s wrath ;). Feel free to download the code and improve it – I’m releasing under the terms of the MIT License – just please be kind and share your improvements with me. Oh yeah, here’s the obligatory demo. Enjoy!

If you’re wondering how to get started, just click and drag a box in the whitespace…


Posted by Dion Almaer at 9:42 am

3.8 rating from 35 votes


Comments feed TrackBack URI

[…] Tired of using unsuitable tools for drawing wireframe diagrams, Christian Romney has built Frametastic (via Ajaxian). It is something that has come out of a personal itch, so maybe not production quality, but it works just fine within its limitations. The cool thing is that it is like a local web application. Unzip the archive and open the index.html in there with your Firefox to start it. Just drag with your mouse in the white area to draw boxes, don’t worry, you can resize and move them later. This is a great tool to build a wireframe as you discuss. The irritating thing for me was, if you have the “Begin finding as you type” feature enabled in the Advanced options, you will not be able to use the shortcuts of this tool. So disable it and give it a go. […]

Pingback by iface thoughts » Blog Archive » Wireframes By Frametastic — September 30, 2006

This is actually pretty cool. Although it’s not as fancy or complex as other Ajax toys out there, but this is simple, light and easy to use

Comment by Simon Jia — October 2, 2006

Do you have a package for windows?

Comment by Vin — January 25, 2007

where to find that frametastic? all the links go to a bad gateway… I looks great but does it really exist?

Comment by didier — October 13, 2007


Why don’t you try our tool –
it’s developed with Mootools JS framework
it’s also browser based
easy to use
fast and reliable
and fetaures unique real-time online collaboration

thanks for trying!

Comment by PeterJPteam — July 15, 2009

Leave a comment

You must be logged in to post a comment.