10 HTML Editors for OS X
One of the most popular questions on the Macrumors Web Design and Development forum is “What is a good HTML Editor for OS X?” Here’s a list of the most popular suggestions. While many of the editors I will list have other advanced functions, for now I am writing this for those who want to create a basic webpage containing images, CSS, and perhaps some PHP for those looking to start or maintain a blog. This is what I use my HTML editor for, and I’m sure more advanced users will have stronger opinions.
For reference, I look for a couple of things in editors. Syntax highlighting is a must, and usually this isn’t a problem. Section collapsing is very handy for when your code gets too long to be viewed on one page. Some form of managing multiple files via tabs, a drawer, or whatever makes larger projects easier to keep under control. Line numbers are a must when you’re validating your code. Cost is not so much an issue for me, but it’s definitely nice if a program is free as well as being functional.
On the flip side, things that aren’t dealbreakers for me but others like: FTP uploading, WYSIWYG, Live preview, live tag behavior, built-in validator, and built-in external preview.
All that being said, lets get into the list.
1. Adobe Dreamweaver (CS4)- widely acknowledged as king of HTML Editors. It has a lot of nice features, including but not limited to:
- HTML/Coldfusion/PHP/ASP/XSLT/CSS/JavaScript/XML templates
- Code only/split/full WYSIWYG modes
- Live tag suggestion/completion
- Syntax highlighting / Invalid code highlighting
- Section collapsing
- tabbed editing window
- Built-in Preview button
- Line numbers display by default
- Click-to-insert tags
- Auto-cleanup feature (close open tags, remove redundant nested tags, etc)
- Built-in validation
- FTP upload
The obvious downside to Dreamweaver is its cost. At $400 for the Mac version ($200 to upgrade), DW is almost certainly out of range for those just looking for a quick solution. To justify DW’s cost, you’ll need to be depending on it for your professional livelihood. The live preview doesn’t display all elements how they are supposed to fit on the page, and if you’ve got more complex webpages it’s pretty much useless. The auto-cleanup does a good job for the most part- it found nearly all the open tags in my test document and closed them. Removing redundant tags didn’t go as well- it missed several redundant tags in tables and lists. Dreamweaver does have FTP upload, but the process to set it up involves clicking through a seemingly unnecessary number of winds and steps before you’re actually able to do it. However, I always recommend uploading files manually with a dedicated FTP client like Transmit ($30, Panic Software) or Cyberduck (free). I also found Dreamweaver’s live tag completion to be annoying- oftentimes it pops up and completes a tag that I don’t want, or just gets in the way. Collapsing sections also is not nearly as intuitive as the method used by TextMate, but at least it works.
2. Nvu
Nvu is a free alternative to Dreamweaver. Its features include:
- Syntax highlighting
- Line numbers displayed by default
- Tabbed editing window
- Normal/HTML Tags/Source/Preview
- Built-in Validation (kind of)*
- Free!
To be totally honest I was really disappointed with Nvu. For starters, the interface is painfully outdated and slow. The default view is “Normal” which, as far as I can tell, is the same as “Preview” mode with sections denoted by small markers on the page. In source mode there is syntax highlighting, but the highlighting on a tag doesn’t show up until you save the document and the editing window “refreshes.” The Validator* just sends the code to the W3C online validator and prints the results in a window. You can only insert tags from the top navigation menu in Normal, HTML Tag, and Preview mode- what is the point of that? Would it be so hard to click and have h2 tags wrap around a string? FTP upload is included, and is much simpler than Dreamweaver’s. When I first uploaded the HTML from my site, a dialogue box popped up asking if I wanted to activate the spell-checker. Why this isn’t automatically on mystifies me, and when I activated it the program beachballed for upwards of 30 seconds before I force-quit. There is no section collapsing. For the life of me I could not figure out how to turn line wrapping on, so long lines ran right out of the viewing window. Not very handy for writing, say, a paragraph or a long hyperlink. I guess you get what you pay for- Nvu is free.
3. Smultron
Smultron’s features include:
- Syntax highlighting
- Line numbers display by default
- Drawer for file management
- Close tag by keystroke
- Code view
- Free!
Smultron is about as bare-bones as you can get. There is a preferences window for syntax highlighting, but when I pasted my site’s HTML into the editing window none of the tags actually highlighted (somewhat alarming). One thing I did like was the tag closing by keystroke. It does not have FTP upload or any sort of GUI to insert tags. I found a weird issue with long lines- the line highlighting does not like lines when the “line wrapping” preference is turned on. For simple websites, however, Smultron offers a nice, basic editor that won’t take up much space or resources to run.
4. Sandvox
Sandvox’s features include:
- Full WYSIWYG editing
- FTP uploading/publishing
- pre-loaded page themes
- Drawer for managing files
Sandvox is a full WYSIWYG editor, and thus automatically doesn’t get my recommendation (not that that is important to anyone). I will say that it does present a clean, easy to use interface one would expect from such a program, and I can see how anyone interested in creating a quick, nice-looking website. Unfortunately without publishing to the web, you cannot access the HTML code directly, as projects are saved in .svxSite format. However, I do think it’s rather expensive ($57, Karelia Software) for the relative lack of features and flexibility.
5. BBEdit
BBEdit’s features include:
- Syntax highlighting
- Section collapsing
- Drawer for managing files
- Code view
- Preview in browser option
- Syntax checking feature (pseudo-validation)
The polar opposite of Sandvox, BBEdit is my HTML/Text Editor of choice. It as a full set of insertable tags, which unfortunately are only accessible from a tree-style menu which, while complete, is somewhat inefficient. Line numbers are not enabled by default, but at least it’s easy to turn them on (the “T” button on the top opens a drop down menu where you can select line numbers). It has direct FTP upload/download as well as a full range of syntax highlight settings for other languages. The Preview feature opens your page in your browser. The downside is yet again cost- BBEdit is $125 ($30 upgrade, $50 educational price) from Bare Bones Software.
6. TextWrangler
TextWrangler’s features include:
- Syntax highlighting
- Drawer for file management
- Code view
- Free!
Textwrangler is BBEdit’s lite version. It has all the syntax highlighting features and generally the same characteristics as BBEdit, the main difference is that it does not have BBEdit’s exhaustive menu of HTML tags to select. If you know HTML or have a reference sheet next to you, this is probably a non-issue. You can still upload/download to/from an FTP server, but there is no built-in way to preview your page either internally or by launching your browser. However, you can’t beat the price (free), and if I didn’t get BBEdit for free I would have no hesitation using TextWrangler.
7. RapidWeaver
RapidWeaver’s features include:
- Full WYSIWYG editing
- FTP uploading/publishing
- pre-loaded page themes
- HTML code view (not editable)
- Drawer for managing files
RapidWeaver is a popular WYSIWYG page creator. I found the interface to be somewhat confusing, as many aspects of the template seem to be uneditable or at least not readily editable. The ability to view the HTML but not edit directly is frustrating, although you can copy/paste the code to a text editor and in theory upload to your server, replacing the file RW uploads automatically. It also appears that you can’t publish to a local version, which is annoying. RapidWeaver costs $79 from RealMac Software.
8. KompoZer (beta)
Kompozr is touted as a bug-free, universal binary version of Nvu. It’s features include
- Syntax highlighting
- Line numbers displayed by default
- Tabbed editing window
- Normal/HTML Tags/Source/Preview
- Built-in Validation (kind of)*
- Free!
Kompozr runs noticeably faster on my machine, and seems to be smoother as well. However, it is really just a carbon copy of Nvu, and the same shortcomings I mentioned before are still present. Why is there no tag insertion in the Source window? The seemingly redundant Normal/Preview views are still present, and the Validation option is greyed out if you are in the source window, which boggles me. It is free however, and perhaps some of these issues will be resolved in the full release. Even the beta version of KompoZer is not as bad as the latest release of Nvu, however. KompoZer is free.
9. TextMate
TextMate’s features include:
- Syntax highlighting
- Section collapsing
- Line numbers display by default
- Code view
- Auto-cleanup feature (close open tags, remove redundant nested tags, etc)
- Built-in validation
- Section collapse
- Drawer for managing files*
TextMate is what I used before I was able to get BBEdit. While I do prefer BBEdit, TextMate has one feature that I sorely miss- if you have a set of brackets, Textmate highlights the opening bracket when you scroll the cursor over the closing bracket. This is very helpful when you’re trying to find the text enclosed by a tag or a section in your code. It does have its annoyances- the drawer doesn’t open if you create a new document, only if you create a new project. Large files take much longer to load in TextMate than in BBEdit, and indenting a selection of text uses a 3-stroke key command instead of 2. Textmate is available for approximately $53.
10. Taco HTML
Taco HTML’s features include:
- Syntax highlighting/checking*
- tabbed editing window
- Built-in Preview for multiple browsers (including iPhone) and live preview
- Tag insertion via menu
Taco HTML is a step up from Smultron. It does not have FTP upload or built in validation. The syntax checking* is built-in, but I am a bit mystified as to how useful it is because it did not catch my open img tag that I placed in my test document (however it did catch open div, span, and h2 tags). Line numbers are not turn on by default, although it’s simple enough to fix that. Taco HTML is available for $25 from Taco Software.
For those of you looking for a recommendation, it doesn’t get any better than TextWrangler. It’s powerful, fast, and free- and if you know HTML you won’t miss the enhanced functionality that BBEdit offers. If you’re just learning HTML, I always think it’s better not to have the crutch of automatic formatting.
Do you have a favorite HTML editor I didn’t include here? Leave a comment!
The real problem is that, apart from Dreamweaver (overkill and too expensive) there just isn’t a half-way decent html editor for the Mac. Why this is, I don’t know – surely there’s an open source community out there that could hack something up for us? In switching from XP I bought VMFusion simply because my editor of choice, Homesite (which provided the editing engine that underpins Dreamweaver) isn’t available for the Mac – once you’ve used Homesite anything else feels clunky and inadequate and the Mac developers seem to have a special claim on maximum clunkiness. Curious, really, when pretty well everything else for the Mac works so well and so seamlessly.
I guess the one advantage DW has over other “professional” editors is integration with the rest of the Adobe Suite. Apologies to the GIMP users out there, but there’s just no substitute for Photoshop. I really don’t see why they added the WYSIWYG editor though, it just slows everything down and their target customer is just going to ignore it anyway. Thanks for you comment!
id agree with tom, after dreamweaver theres not much else, ive just switched to a mac and been usin expression web on windows for ages, dont think theres much competition for it on mac unfortunately.
Hi there,
I use BBEdit for over 10 years now every day. It really is the best one.
And the annoyance described above doesn’t really count. BBEdit has a balance-brackets function it will highlite matching brakets. With every further CMD-B it will select the matching parent brackets (if they exist). And what’s more: it also has a balance-tags function: the same thing in html and xml documents.
Regards,
Jasper Swart