Diet Coda: Slick Web Dev on the Go

If you’re a Mac OS X user and involved in the web design/development scene, you’ve probably heard of the indie developers Panic and, more specifically, their product Coda.¬†Coda is an all-in-one web development enviroment that pulls together multiple tools such as visual CSS generation, file transfer and reference together with a text editor supporting a range of languages. Last month, Panic released Coda 2, a signifcantly updated version of the software.

Alongside the release of Coda 2, Panic also released Diet Coda, an accompanying $19.99 app for iPad that’s already disrupting the long-term stereotype of an iPad being useless for productivity. Diet Coda combines a text editor with a powerful FTP-based file manager making editing your files stored online a pleasant and productive experience. Let’s take a look…

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Getting Started

Once you download Diet Coda, you’ll be able to add a new project to the app in much of the same way as you would create a site in the Mac OS X app. The immediate disadvantage of the app presents itself here in that it has no sense of local storage. Unfortunately, you can’t edit local files nor connect to a service like Dropbox. The only way to use Diet Coda is in conjunction with an SFTP/FTP server, which is certainly not what everyone wants to do. This is something I really hope Panic introduces later, especially with iCloud, which could be a fantastic way of syncing projects between the version of Coda on Mac OS X and Diet Coda on your iPad.

Setting up and connecting a new site in Diet Coda.

Be warned, your twenty dollars will be wasted if this isn’t a way you want to work. The way I assume Panic sees Diet Coda is not an app for necessarily creating new things, but rather making updates and edits to existing projects, perhaps ones that are already live. If that’s what you’re looking for though, keep reading, because Diet Coda is a pretty great app overall.

File Transfers

Diet Coda brings what it describes as “the power of Transmit” to the iPad (Transmit being another Panic app, an FTP/SFTP/S3 client). The file transferring in Diet Coda is top notch, and is on the same level as similar clients for desktop platforms.

Within the file transfer window, you can peruse the files on your SFTP/FTP connection and delete them, rename them, duplicate them and move them. You can even modify the file permissions in a special GUI in the sidebar.

The FTP client built into Diet Coda.

I did mention before that Diet Coda’s more about making edits than creating new stuff. However, as long as you get passed the initial hurdle of connecting to somewhere, you’re completely free to create new files in Diet Coda. Just by tapping on the plus sign in the top-right corner, you can add new files and folders in an instant.


Whether you’re editing an existing file, or starting a new one, you launch the editor by tapping on the file in question and hitting the blue “Edit in Diet Coda” button in the sidebar.

When the file’s loaded up, Diet Coda won’t look too¬†dissimilar to a regular text editor with syntax highlighting (Diet Coda support CSS, HTML, JavaScript, PHP and Ruby syntaxes, changeable in the gear menu in the top-right). In fact, there’s very little difference other than the interface feeling more minimalist and less cluttered. Don’t interpret that as Diet Coda being necessarily less featured; it simply offers the most room available in the iPad’s screen real estate to the code itself.

Editing a file in Diet Coda.

What does take prominence is the virtual keyboard, which has an extra layer at the top. This row of keys contextually makes available common symbols and shortcuts, such as less and more-than signs, and a key for making indentations. Ultimately, these are very useful if you’re using the touch keyboard, but I’d always recommend the added bulk of a physical keyboard when doing a job like this. I have no trouble with the virtual keyboard, but using a physical one can turn out to be a more productive input method for some.

Diet Coda also includes some really useful aspects of Coda, such as code clippings. By using the page icon in the top-right row, you can easily insert one of the preset, or one your saved, clippings, as well as create new ones. Also incredibly useful, by tapping on the line number at the top, you can type in a specific line and jump right too it! You can also preview the file you’re working on (although, soft links to images/CSS won’t work).


AirPreview in Coda 2 for Mac OS X.

I’m not going to go too in-depth when talking AirPreview, since it’s really a feature of Coda 2, than of Diet Coda.

AirPreview allows you to use your iPad, equipped with Diet Coda, as a remote previewing tool. Once setup, you can hit a button in Coda 2 on your Mac and, via AirPlay-style magic, have the file appear in Diet Coda as a preview. When you refresh on your iPad, or simply save the file on your Mac, the preview will update.

A site being beamed from Coda 2 into Diet Coda via AirPreview.

Final Thoughts

Diet Coda is a very impressive app, and it’s one that I reckon should be in any web designer’s arsenal. It may not be fantastic for creating from scratch, some alternative apps can over more local connections (Textastic, for example, can sync with Dropbox or over a built-in WebDAV server), but it feels like the most sophisticated one I’ve used.

The price may throw you, however, at $19.99. Alternatives are available for $9.99 and below, which are also worth considering. Fortunately, I managed to get the app in the launch sale for half price, and I’m certainly happy with my purchase.

If you’re interested in the release of Coda 2 for Mac OS X, I took a look at it over at WebDesignTuts+ too.


A new app from Mac OS X developer Panic, bringing a nicely featured FTP client and code editor to iPad.