Coda: Integrated Web Development

Web design, traditionally, is a task which requires many different applications. You’ll need some sort of text editor, an FTP client, software for navigating documents (generally Finder), a web browser for previewing your site and often another tool for storing code snippets. This has worked well for several years, and any attempt to re-invent such a traditional workflow is commendably risky.

Coda came on the scene just under two years ago as a piece of software capable of integrating each of these different tools into one monolithic application. It received a great deal of acclaim and has come a long way since its conception. This review is far from an “exclusive” – Coda has been covered many times elsewhere over the past few years – but it will go some way towards outlining the features which make it stand out from using several independent applications. I’ll explain the main workflow process, and give my opinion on what works brilliantly and what I miss from dedicated tools.


Logically, all the work you do in Coda is split down into different ‘Sites’. These can be automatically imported from Transmit (if you’re already a user) or added manually. A screenshot is automatically downloaded as used as the thumbnail for the site – a nice touch!

Managing site with Coda

Managing site with Coda

Each site has a remote and local folder associated with it, along with subversion and terminal settings if appropriate. This allows Coda to keep the two destinations in sync and know which files to publish. Whenever you open or close a site, the status of the window is saved – i.e. Coda can automatically restore your session when coming back to the app at a later date. This is a great time saver over manually opening your FTP and editing applications each time you start working.

Files, Publishing & Subversion

Managing files is a feature which is vital to get right. It’s handled through a similar interface to Transmit, confined to a sidebar on the left of the screen. You can swap quickly between local and remote files, and easily add new files and folders. Uploading a file (or marking it to be published) can be achieved through the feature-rich right click menu.

Editing and publishing files

Editing and publishing files

Coda is able to track changes to local files and perform a batch publish feature which uploads all those files which have been changed since the last update. This is another big time saver, and a feature only possible with the integration of FTP and editing software.

If you’re familiar with subversion you’ll be pleased to know that the latest version of Coda has integrated support. In essence, subversion is a system for managing and retaining versions of all the files you upload and edit. Having the functionality integrated with Coda is a huge time saver over managing a repository manually.

Editing & CSS

The majority of your design and development time is likely to be spent editing code. For Coda to be a success, support for editing really needed to be second to none. Fortunately, Panic seemed to hit the nail on the head and users have been receptive to the built in syntax coloring, line numbering, auto completion and block editing. The CSS editing tools were designed to compete with the popular CSSEdit, and do so to a good level. The differences between the two systems may lead you to prefer one over the other, but both are solid tools for editing and previewing CSS changes.


It’s also possible to collaborate live on a particular document with other users through the Subetha Engine. Whilst I haven’t tested this functionality, it looks good and would be great in a development team environment to ensure you don’t tread on each other’s toes:

Simple collaberation

Simple collaberation


The ability to quickly preview a document can become a repetitive headache when constantly swapping between your editor and browser. Because Coda integrates a Webkit browser, you’re able to literally see your code and preview side by side. This can update in real-time when previewing locally, or automatically on each save for a remote file.

Live previewing locally and online

Live previewing locally and online

In a similar vein to several browser add-ons, Coda is able to provide a DOM inspector tool for navigating through the different tags in your document. A breadcrumb trail at the bottom of your screen shows clearly where you’ve come from to reach a particular element. This is coupled with a decent Javascript debugger to track down any script errors which may crop up (nobody’s perfect!).

Storing Code Snippets

I often find myself repeatedly Googling a particular code snippet or function and have never really settled on a local solution for storing and organizing clips of code. Coda has support for this built-in through the ‘Clips’ interface. It takes the form of a draggable, slightly transparent window which you can stash at the corner of your screen for regular reference:

Code snippets with 'Clips'

Code snippets with 'Clips'

A few in-built clips cover simple HTML code and a basic page structure to get you started on a new document.

Books & Terminal

Not content with simply providing editing, publishing, previewing and collaboration features, Coda also packs support for an in-built terminal for remote SSH access and a reference library for storing your developer sites and books. The app has one book built-in – The Web Programmer’s Desk Reference – a $60 value.

Connecting via SSH

Connecting via SSH

Using the in-built Terminal can be handy for altering server files, managing a database or otherwise tinkering with permissions and settings not available from a particular file. Not a requirement for everyone, but handy nonetheless.

Competitors & Limitations

There are a number of different competing applications which aim to achieve a similar concept. The most recent and conceptually similar is Espresso from MacRabbit, which offers more or less the same feature set as Coda. It’s free for now, but likely to be priced at around €60 ($77) when it comes out of beta.

With regard to book support, I’d really like to be able to import PDF books which I’ve previously purchased and downloaded (such as the recently released Five Simple Steps). It would be great to make Coda a central reading resource.

I often deal with WordPress and MySQL based sites, so have missed thorough support for managing an SQL database since Coda’s release. I’d absolutely love a nice GUI for managing my database, even if support was fairly limited (adding, removing and editing rows would satisfy me fine).

That said, everyone has a huge variety of needs for web design app features. I’m sure that if Panic listened to every feature request, Coda would have been a bloated, unmanageable application within a few weeks! As with WriteRoom, the beauty and simplicity of the app comes from integrating only the necessary features and executing them to perfection. This becomes ever harder as more and more features are added.

A Free Equivalent Setup

Of course, $99 is a hefty wad of cash to spend on any piece of software. You’ll be pleased to know you can still be a proficient and productive web designer at no cost to yourself. This collection of applications will have you coding and uploading in no time, though not with the same integration and style as with Coda:

  • Editing: TextWrangler
  • Previewing: Safari or a browser of your choice
  • Uploading: Cyberduck
  • Subversion: Versions (€39) – Now that Versions is a paid app (though still great), something such as GitX may be suitable.
  • Terminal: Terminal bundled with OS X
  • Books: Yep for storing and organizing PDF books


I did my absolute best to move all my development into Coda when it was first released in 2007, but it didn’t stick and I found myself reverting to opening Transmit and editing the odd file here and there. Learning about the new features of the app whilst writing this review has convinced me to give it another go, and I expect to be spending a few hours over the next couple of weeks getting the system set up.

Coda is brilliant if you’re a new designer, getting to grips with web design and development. It’s also great if you deal with sites primarily rooted in static HTML and CSS. If, however, you manage projects which are more dynamic and database driven, you may feel that the integrated environment feels a little more restrictive.

I’d definitely recommend giving Coda a go for the 15 day trial, but at $99 you’ll need to be sure it’s going to save you a decent amount of time before purchasing it. I’m interested to know whether you prefer a suite of separate apps or an integrated environment for your development work – are you a Coda fan?