Take the 2-minute tour ×

Do you know a tool that can generate the div order of your layout based on what you draw unto it? Something like a mockup tool that could generate HTML code probably using a grid system. Like drawing a DIV on dreamweaver but generates good css not divs with fixed positions.

To give you an idea. Something like this that is more advanced and can generate complex layouts.


Something that has a live preview which would help you speed up your conversion of PSD layouts into HTML and CSS.

Something like 960 Grid System 2.0 Dreamweaver Extension by DMXZone this: http://www.youtube.com/watch?v=ptmV2Zgf66s&feature=related

share|improve this question

1 Answer 1

It's called a WYSIWYG (What You See Is What You Get) editor, and it was all the rage back in the days of Frontpage. Even Dreamweaver could do it.

The code they created was (is?) horrific compared to what you could create if you wrote the code yourself, and I've found them to be more prone to poor rendering consistency, but that was 14 years ago so they're probably better now.

And drawing DIVs versus good CSS: that's a hand written code quality. A WYSIWYG, at least in my experience, does not do relative positioning very well, and tends to really only be good at table-based layouts.

Anyways, KompoZer has been around a while and is free, so it's probably worth a try. I didn't find it until after I'd graduated to hand-written code, and so I've only used it very cursorily: http://kompozer.net/

A google search turns up a few more possibilities: https://www.google.com/search?q=wysiwyg+html+editor

share|improve this answer
Ok so , there is none that actually produces good relative positioning. I was asking this because I am about to make one. I am a programmer by the way. So far the links on my post are the closest to what I wanted but I want a more complex one that could generate "good code" using any css grid framework. –  Aivan Monceller Mar 3 '12 at 5:36

Your Answer


