Line25

Top HTML & CSS Editing Apps For Mac Designers

Read the full post

When it comes to web design, every designer tends to have their own favourite coding application. Luckily for Mac users there are plenty of options to choose from, this roundup of HTML and CSS editors pulls together the most popular editing apps with a brief overview of their features.

Coda ($99)

View the application website

Coda is the swiss army knife of CSS editing apps, it combines code editing features with FTP, SVN, Terminal and a browser preview to produce a do-it-all app. Coda is one of the most popular choices for Mac based Web Designers and is also my personal preference.

Screenshots

Application screenshot

Application screenshot

CSSEdit ($24.90)

View the application website

CSSEdit is an editing app with a primary focus on Cascading Stylesheets. The application includes some super handy features for writing and debugging your CSS such as Live Preview and the X-Ray Inspector but being a lightweight application designed specifically for CSS edits, you will need a collection of supporting apps in your toolbox.

Screenshots

Application screenshot

Application screenshot

TextMate ($54)

View the application website

TextMate is a comprehensive code editor with a clean and minimal interface. It includes all the common features you would expect from an editing app and has some unique shortcuts that can really speed up the workflow for power users.

Screenshots

Application screenshot

Application screenshot

BBEdit ($99)

View the application website

If you find yourself working with large quantities of files, BBEdit might be the application for you. It includes a range of powerful file browsing and search features that allow you to easily find and make edits to snippets of code buried deep in your website directories.

Screenshots

Application screenshot

Application screenshot

Espresso ($49.84)

View the application website

Espresso is the sister app to CSSEdit, also created by the folks from MacRabbit. Where CSSEdit focused on CSS, Espresso has much wider support for general coding tasks and includes a range of handy navigation, snippet and auto-completion features, not to mention the built in preview engine and FTP support.

Screenshots

Application screenshot

Application screenshot

Dreamweaver ($399)

View the application website

Dreamweaver includes some powerful and unique features for building websites, particularly its infamous ‘Design view’, but it can also be used purely for coding. If you do only use Dreamweaver for coding, the alternative apps mentioned in this post include pretty much the same important features, but also benefit from faster loading times due to their overall more lightweight build.

Screenshots

Application screenshot

Application screenshot

HyperEdit ($24)

View the application website

HyperEdit is a super lightweight coding application that combines the edit pane with a Safari powered preview window which allows for fast and easy page building. With the key features of code highlighting, snippets, live validation and support for HTML, CSS, Javascript and PHP it includes everything you need in a small package.

Screenshots

Application screenshot

Application screenshot

skEdit ($34.95)

View the application website

skEdit is another lightweight coding app that can be easily extended with more language support. It makes sense to limit the application down to only the languages you use to avoid bloat. Otherwise the application includes project support, code completion, snippets and live preview, so it’s definitely a good competitor to the more wider known options.

Screenshots

Application screenshot

Application screenshot

Bonus: Firebug (free!)

View the application website

Although it’s not a code editor at heart, it’s certainly a must-have application for Web Designers. Firebug allows you to tweak and edit your HTML and CSS on your live websites, which can then be ported back to your original files. This live editing cuts out the hassle of changing and re-uploading your files to really speed up your workflow.

Screenshots

Application screenshot

Application screenshot

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

63 Comments

  1. Luke says:

    I wish coda would write code like Espresso would, I'm so used to it now it makes everything else seem archaic. I also wish Espresso had better FTP a terminal and SVN/GIT

  2. Christian says:

    Don't forget to add UltraEdit for Mac to your list!

  3. some good stuff there worth checking out chris. I use dreamweaver for all my coding but might have a look at some of these alternatives.

  4. Nice list! Two editors I feel are missing: Eclipse and Netbeans

    While you could argue that these two are more geared towards programming in languages such as Java, they can just as well be used for HTML/CSS/javascript.

    Another good point of these IDE's: they're free :-)

    • Dylan says:

      Aptana is built specifically for web developers using the Eclipse engine. As far as being free goes, it is quite robust, and it supports Eclipse plugins. That way you get all the FTP/CVS/SVN/GIT( the list goes on ) support you want.

  5. Viktor Dite says:

    i not using any of them beside firebug! Won't be an webdeveloper without firebug! Great Tool!

    For Coding TextWrangler is still the easiest an best for me!

  6. I started out with dreamweaver a few years ago and I really wanted to switch to coda.. But after a few days with it I just missed a few important features.

    I'll have a look into the rest of those apps! Thanks chris!

  7. Now I just need a Mac :P, way nicer apps than on PC

  8. Ibby says:

    awesome list! thanks Chris!

  9. MyFreeWeb says:

    I think anyone who writes markup should learn Emacs :)

    My screenshot: http://mfwb.us/sMSn

  10. Cyber Duck and TextWrangler make a good pairing if you don't need much code/css reference or extra fancy functionality etc. Both free too.

  11. Martin says:

    Great timing: I'm currently trying to make the choice between Espresso and Coda, I have used both as trials and enjoyed them both. Coda is a very complete kit, and Espresso is just a complete pleasure to use. At the moment I'm leaning towards Coda despite the price being significantly higher but I just can't bring myself to order it yet.

  12. James says:

    Go for coda, you will develop better practices in the long run and when you have to edit via nano in terminal it will not be daunting at all :)

  13. MrRayures says:

    I work on "Smultron" a simple and cool editor ^^).
    But before it was free nad now it's on the appstore (Not free…).

  14. Zach says:

    I just can't seem to leave my old favorite. Taco HTML ($24.95 USD) – http://tacosw.com/

  15. robca says:

    Rapidweaver
    realmacsoftware.com

    • Dutch says:

      That's more for amateurs and doesn't fit in this list since it's about HTML and CSS editors. I know that you can write HTML in RapidWeaver, but with all those add-ons people won't bother to learn HTML + CSS to accomplish that stuff because an add-on does it for you. Besides, you use predefined templates and if you write HTML in RapidWeaver, you will only write the content (because the predifined template cannot be modified within RapidWeaver).

  16. Vin says:

    I use espresso, and i´m very happy with it. Only the FTP-Function really sucks. Perhaps i will switch to coda sometimes.

  17. kram says:

    I vote for Aptana. It's free and works very well when you know it. At least with my HTML, CSS and jQuery skills.

  18. I love Espresso. Used to use Coda, but Espresso with some Sugars (HTML5, CSS3, etc) and themes make it awesome to use.

    Panic makes great stuff though, so we’ll see what happens when Coda 2 is eventually released.

  19. Bob says:

    firebug = epic win.

  20. Like that you reviewed dreamweaver just to show some contrast in pricing and weight :-)

    Amused that people actually use Dreamweaver for real :-O It's like frontpage 2010

    • Michael says:

      If you're forced onto a PC and it's available, Dreamweaver (as an editor) is better than those Notepad programs.

      But Coda is awesome and Textmate is essential.

      • Couto says:

        check e-TextEditor if you love textmate and you're a windows user =)

      • Michael J says:

        I work regularly in both platforms (well, mostly in the PC world), so not having to change apps is a boon for me.

        For me, Dreamweaver stays in code view. Features I've learned to love are the Format Source Code button (for viewing other people's work) and the Collapse Tag button. And obviously FTP.

  21. Mike J says:

    I love Coda, but have now fallen in love with KomodoEdit and use it almost exclusively.

    • Stew says:

      Nice to see KomodoEdit get some love! I love that program. The code collapse feature and the amount of languages it reads makes it worth it to me.

  22. Ryan says:

    Coda is my personal favorite too. I recommend it to all of my friends with macs. And if they don't have a mac, i recommend they get one :)

  23. John says:

    Coda, hands down. It's a great piece of software and really good support / community

  24. Jay says:

    Awesome Mac app list Chris. They are all great apps, but I love Coda. thanks for sharing.

  25. Dapad says:

    Yeah , Learning…

  26. Tristina says:

    simple super! Nice post chris

  27. Simply great list of some html css editing apps for mac designers. My vote would be for Dreamweaver and obviously Firebug.

  28. Christian says:

    I only use firebug from this list. I'm developing very cross-platformy, so I ran through a couple of editors since I started coding, including Eclipse and Aptana.
    At the end I got stuck with PHPStorm (or it's "little" brother WebStorm) by JetBrains. The IDE just rocks and works on Windows, Mac, and Linux :)

  29. Moustique says:

    Definitely Dreamweaver and Firebug!!!

  30. Hannah Hurst says:

    A great list of opportunities and knowledge. I will definitely be looking into these further. However I have to say I do have a strong bond with dreamweaver and firebug!

  31. It is amazing how cheap this software is . . . . Firebug is a great resource well recommended to any web developer.

    Cheers guys :)

  32. I sorry disappoint you all, but I use windows and use Sublime Text Editor. Yes, the program need ftp, ok, but it's awesome! My favorite code editor. :)

  33. Hambag says:

    I moved over to mac from pc & crash happy dreamweaver. Tried coda, very nice experience, workflow quick etc.

    I settled on espresso as I like the preview features & validator, firebug I think the FTP is really useful not sure why others don't like it. A couple of things that need improving are the snippets function, it's not very good at organising them like in DW, and the code wrap feature in DW I also miss, where you highlight a piece of code ctrl+t I think then input start & close tags to wrap the highlighted string in.

    My verdict would be for PC switchers try out espresso or coda both very similar, both code CSS & HTML really well.

  34. Ahmed Bolica says:

    I Love Mac <3 Hope Buy it Soon
    Thanks Chris

  35. While all these are all great. You guys are still missing out. It's called the web developer tool bar. (An add on for FF).

    It's a deadly assassin.

  36. Buzz says:

    I started out using the dreaded design view in Dreamweaver… I quickly moved over to using code view 99% of the time and am happy with this most of the time, although it can get a bit clunky. Looks like I'll definitely have to have a look at Coda. Thanks for the list.

  37. Price differences are shocking in some cases.

  38. My option is always Dreamweaver.. But when compared to others the price seems to be high.. but i think its worth working..

    Still waiting for the others to review..

  39. Simona says:

    Excellent article! Another great source for those who wants to see menus, web site trends, galleries, free extension and job for freelancers etc, visit http://www.1artmedia.com, you have online demo and free download. Hope that will be useful for you…

  40. Chris says:

    Great article!

    I'm a long-time PC programmer and I have fallen in love with my Apple computer and I want to make the switch to programming on the Mac.

    On the PC, I used asp.net and sql server for my interactive web sites. I think I need to switch to PHP and MySQL on the Mac.

    Which of the programs above will make it easiest for me to work with PHP and MySQL in porting my web sites? Will Coda do this?

  41. Eloy Anzola says:

    Great list! definitely missing Eclipse.

  42. dave says:

    Seriously? No mention of Aptana? How bout a list of the top free editing apps.

  43. Abbas says:

    If you're a designer, then Dreamweaver has to be the way. For its intigration with the other Adobe apps alone.

  44. No mention of Smultron? It's great I have been using it for a few years now. It's a great lightweigh HTML editor

  45. I must say, I've been using Dreamweaver in code view for some time now. As stated earlier, integration with the suite is fantastic. I also work in Fireworks to do mockups. It's my favorite.

  46. Anthony says:

    Nice list here! I'm not usually one to purchase apps for web editing, I just use bare-bones programs (text wrangler) but I will definitely be looking into Coda, looks great!

  47. I never was a fan of any programs like these. I only work with none-commercial tools like notepad++. The only commercial tool I use is Photoshop, everything else would be luxury.

  48. Sü Smith says:

    I was giving a client a quick tut the other day and discovered that she has a mac. A popular Linux based code editor is available for windows and the mac os as well. It's a nice one called <a href="http://projects.gnome.org/gedit/">Gedit</a&gt;.

    Sometimes I prefer it over Notepad++ in windows as it uses soft and smooth fonts similar to the mac and linux os'.

  49. James W Lane says:

    Coda is my #1 choice on my designs, but depending on the requirement of the project I also use Flux, TextMate, Espresso, and CSSEdit. They all have their good and bad.

  50. sAerts says:

    I'm using dreamweaver for css ( i like the autofill, i dislike the code coloring)
    For html and php ii use dreamweaver or textmate. For js i use textmate!

    Over the years i tried different editors, i was looking for some real mac 'style' programs! To be frankly, some of them look very nice but the problem for me is…. Time! …
    I know my way with dreamweaver and i do need the adobe suite anyway!

    Probably all of these programs have the same features, but it's hard time to figure out which one suits you best…

    There is work to be done and a bunch of edication waiting you…

  51. Michel Joanisse says:

    I've been using dreamweaver for some time now, never once for the design view. There is a lot of beneficial factors to dreamweaver when comparing to other editors ..

    1) auto-complete of character entities, (highly useful)

    2) it's find and replace feature is highly intuitive when used properly. (appending subtle or complex modifications to multiple files that share similar content / structure.)

    etc.

    Dreamweaver is often underrated, with a misconception of being used for new comers, for those who highly rely on the visual / design aspects –

    I disagree, and say it's a great, and undervalued editor, with like all others, both it's plus and down sides.

    All in all, at the end of the day, it's not the editor you use, it's the code you write.

    (I now use Espresso for the bulk of my work, with the occasional use of dreamweaver for certain tasks.)

    If I'd never purchased a copy of dreamweaver, and had to choose again – I would go with Espresso, for it's simplicity, usability, and substantial price difference.

  52. Brad says:

    Chris,

    You have Espresso listed here for $49.84. I just checked their site and it's still 80 bucks… Do you have some super, cool-dude, bro-ham hookup?!!!

    Thanks,
    B

Sorry, comments are now closed