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 favorite 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.

These HTML and CSS editing apps for Mac designers have excellent features such as browser preview, FTP, SVN, terminal, writing and debugging CSS, file browsing, shortcuts to power up your workflow, auto-completion features, live validation, highlighting, project support, and more! Plus, most of these editing apps for Mac are also very lightweight, which means your projects will load fast.

We have gathered here some top HTML and CSS editing apps for Mac designers.  These super lightweight coding applications have all the required features needed for coding awesome web projects and offer support for HTML, CSS, Javascript, and PHP. Check out all of their powerful features, along with some screenshots, to see how they look like.

Coda 

Coda Editing Apps For Mac Designers

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. There are some new features in the updated version of Coda, such as a touch bar you can use to switch instantly between editor and preview, better speed for syntax highlighting and symbol parsing is 10 times faster, as well as some editor improvements, such as vertical indentation guides, customizable column guide, color-coded traditional or visual tabs. Even more, it now comes with local indexing. plugin prefs, CSS overriding and even panic sync, so you can sync your sites, passwords, and private keys to all of your Macs and more.

Screenshots

Application screenshot

Application screenshot

CSSEdit 

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. It helps you clean up your markup with the integrated HTML Tidy support, it has support for Subversion source control management, lets you search one or many files quickly, write scripts in the language of your choice, and more.

Screenshots

Application screenshot

Application screenshot

TextMate 

textmate Editing Apps For Mac Designers

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. It creates a bridge between UNIX underpinnings and GUI so both expert scripters and novice users can benefit from it.

Screenshots

Application screenshot

Application screenshot

BBEdit 

Bare Bones Software BBEdit Editing Apps For Mac Designers

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. You can use it to create and edit files directly on FTP and SFTP servers with built-in Open from FTP/SFTP.

Screenshots

Application screenshot

Application screenshot

Espresso 

Espresso The Web Editor for Mac Editing Apps For Mac Designers

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

Buy Adobe Dreamweaver Editing Apps For Mac Designers

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

hyperedit Editing Apps For Mac Designers

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

skEdit Mac HTML and Text Editor Editing Apps For Mac Designers

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

Firebug

firebug Editing Apps For Mac Designers

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

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

62 Comments

  1. Adam W says:

    I LOVE CSSEdit and still use it. But unfortunately, the developer stopped supporting it years ago. I wish they would bring this back as a stand-alone application instead of rolling it into Espresso.

    Big fan of Coda 2.

  2. Jamie Slater says:

    Atom and Sublime Text deserve a mention.

  3. 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

  4. 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.

  5. 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…

  6. 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.

  7. Advitum Webdesign says:

    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.

  8. 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!

  9. Barry La Vette says:

    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.

  10. Daniel Speranza says:

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

  11. Abbas says:

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

  12. dave says:

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

  13. Eloy Anzola says:

    Great list! definitely missing Eclipse.

  14. 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?

  15. Oxter Infotech Private Limited says:

    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..

  16. CodeMyConcept says:

    Price differences are shocking in some cases.

  17. 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.

  18. Jose Gonzalez says:

    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.

  19. 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.

  20. Ahmed Bolica says:

    I Love Mac <3 Hope Buy it Soon
    Thanks Chris

  21. Web design Telford 1 says:

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

    Cheers guys :)

  22. Nicholas Camp says:

    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. :)

    • Kraig says:

      I have been using Coda 2 for years but I just recently started using Sublime Text on my Mac and it rocks! I love the short cut keys and learn a new trick every day….

  23. 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!

  24. Dapad says:

    Yeah , Learning…

  25. Jay says:

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

  26. Moustique says:

    Definitely Dreamweaver and Firebug!!!

  27. 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 :)

  28. Need Developers says:

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

  29. Tristina says:

    simple super! Nice post chris

  30. John says:

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

  31. 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 :)

  32. Michael Lajlev says:

    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.

  33. 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.

  34. 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.

  35. Bob says:

    firebug = epic win.

  36. Aaron Bazinet says:

    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.

  37. 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.

  38. 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).

  39. 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…).

  40. 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 :)

  41. 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.

  42. Daniel Diggle says:

    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.

  43. Ibby says:

    awesome list! thanks Chris!

  44. 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

  45. Andy Feliciotti says:

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

  46. Patrik Inzinger says:

    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!

  47. 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!

  48. Jaap-Jan Frans says:

    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.

  49. Marty McColgan says:

    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.

  50. Christian says:

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

Leave a response