Macaw – A Visual Responsive Web Page Editor


Macaw is a new web editor for web designers and developers. It was one of the first visual RWD (responsive web design) editors available. It came out to Kickstarter backers on December 31, 2013 and debuted to the public in 2014. It is based on the same style of design as graphics tools like Photoshop to help you “draw the web” rather than code it. This should make it easier for web designers to use to create decent HTML, CSS, and even JavaScript to pass on to developers or post directly to the web.

About Macaw

  • Operating Systems: Macintosh and Windows
  • Publisher: Macaw, LLC
  • Price: $79

Best Things About Macaw

  • It is very easy to create responsive designs with multiple breakpoints.
  • There is a shortcut to add placeholder text that is really easy to use.
    (type “lorem#p” where the # is the number of paragraphs you want, then hit the tab key and that number of paragraphs of placeholder text will appear in your document).
  • Macaw generates decent looking HTML, better than you might expect for a WYSIWYG editor.
  • Macaw allows you to choose what elements, classes, and IDs to use.
  • It is reminiscent of image editors like Photoshop, making it more familiar to designers.

But There are Some Drawbacks

  • It can be slow to respond at times.
  • Extra container elements were added that I didn’t expect.

I enjoyed using Macaw. I built a 3-breakpoint simple responsive design website faster than I ever have in the past, and that includes the time it took me to figure out how to use the tool. This, in itself, is pretty amazing to me.

Some of the Features I Really Enjoyed

  • Resizing elements based on the grids was easy.
  • Grouping elements and then giving the resulting container a name like HEADER resulted in HTML5 semantic code much more easily and quickly than I thought possible.
  • I was able to create a responsive design with three breakpoints in very little time.
  • I loved the outline view. Like with Photoshop layers,it was really nice to be able to show and hide elements just by clicking the eye icon. This also helped me see how the code would be written.
  • I chose a random font from the list that was included, and they automatically added the web font code from Google for me. I could also use my own fonts, but there were a lot of choices (even if most of them seemed to be sans serif…).
  • I love that they have a shortcut to add multiple paragraphs of placeholder text right in their text tool.
  • The CSS and HTML it generates can still be a bit more DIV heavy than I would write, but with the outline tool, it’s possible to see that and get rid of some of the extraneous tags.

Get Macaw!

It’s a cool web editor.

Leave a Reply

Your email address will not be published.