20 Excellent Coda Tips

Now Reading
20 Excellent Coda Tips

I’ve been using Coda for a while now, and it’s become my web development application of choice. There are quite a few great web development applications out there (read “18 Wonderful IDEs for Windows, Mac, and Linux“) but if you’re a Mac user, Coda is easily one of the best.

Here are 20 excellent Coda tips to increase productivity that I’ve gathered during my use of Coda so far.

There are a few things I had to change right away when I first started using Coda. These are all found in Coda’s preferences.

I never use a GUI CSS editor so I set Coda to always open CSS files with the text editor.

Coda Preferences General Tab

Under the Editor tab I’ve check-marked “Show line numbers” and “Use tabs” for indenting. You can hide/show line numbers by pushing Command + Option + L as well.

Coda Preferences Editor Tab

Under the Colors tab I’ve check-marked “Highlight Current line” to make it easier to see where the cursor is when switching back and fourth between applications.

Under the files tab I set files to open when double clicked instead of a single click. You may also need to setup your external editors. Coda automatically used Photoshop for the image formats I use.

Coda Preferences Files Tab

This is how Coda’s navigation bar at the top is by default. This is just a waste of space in my opinion although it is pretty.

Coda Nav Bar Big

I’ve changed mine to display only text titles and as small as possible. Since I don’t use the buttons I have that section minimized most of the time anyway. Instead I use the shortcut keys which I’ll cover next.

Coda Nav Bar Small

Aside from these changes, I’ve left everything else at the default settings. I’ve played around with the color schemes a little but I didn’t find anything I was really happy with so I’ve kept the default color scheme.

If you aren’t using shortcut keys to change modes, now is a good time to learn. Pushing Command + 1-6 changes the mode you’re in. You can switch between your sites, editor, preview, etc. modes very quickly this way.

Pushing Command + Shift + Left or Right Bracket will navigate through your open documents.

Coda automatically indents certain markup for you by default but you’ll still find yourself using the Tab button pretty frequently. Instead of jumping to the front of a line to indent it you can push Command + Left or Right Bracket to indent the line the cursor is currently in.

Pushing Command + Control + C will open up Coda’s clips. Clips is a place to store snippets of code for quickly inserting into documents. You can save snippets for use in all documents or just site specific clips.

Coda Clips General

You can assign tags to quickly insert clips. For example, I’ve set “htmltemp” to insert an HTML 4.01 Template when I start a new document. I would type “htmltemp” into the blank document and push Tab to insert the clip. You can also insert a selection placeholder if the cursor needs to go somewhere specific in the clip after being inserted.

Coda Clips General

Validate your HTML while you’re working. Okay, if you’re experienced with HTML you might only want to use the validation feature when you’re ready to validate, otherwise you’ll have errors popup as you’re typing which can be pretty annoying.

Coda Inline Validation

Coda will tell you what needs to be fixed. Sometimes there is a little orange “snapback” button in the balloon that will take you to the beginning of the error when clicked.

Coda Inline Validation Example

If you aren’t quite comfortable with HTML or CSS yet you can use Coda’s Hints feature to give you a little extra guidance.

Coda Hints

Highlighting something and pushing Command + ‘ will search the books you have available in Coda for the highlighted text. You can also just hold Command and double click a word you want to search for.

Coda's Books

Add more books to reference more information. You can read more about adding more Coda books here.

Coda Books

If you need to edit multiple lines you can do a block edit to do them all at once. You can highlight the text you want to edit and push Command + Shift + B or you can hold down Option and select the lines you want to block edit that way.

Block Edit Text

Highlighting text and pushing Command + Left or Right Bracket will shift the highlighted text left or right. This is great for shifting a whole section of markup for good looking markup formatting.

You can preview files in Coda’s built in Preview mode (which uses the same engine as Safari) and while in that mode you can click the Preview in Browser button in the top right to open the file in the browser of your choice.

You can also push Command + Option + B while in any mode to open and preview the file in the default browser (Safari). When you make changes to the document you can use this shortcut to refresh the preview in the browser a little faster.

Coda Browser Preview

There are three tools included with Coda’s preview mode. These can be helpful for quick development issues (although I still find myself using Firebug 😛 ).

Preview Tools

The left button lets you preview the source code. Kind of strange since you’re just in the preview mode and you could just switch back to the edit mode. However, this lets you edit the source code and preview the changes without actually editing the document. A great feature for testing and debugging.

The center button is the JavaScript log and the right button is the DOM hierarchy inspector. You can quickly find and see elements with this which is helpful if you aren’t sure what’s going on.

DOM Inspector

You can split windows using the icon in the top right of the window (the plus with lines). Pushing Option will change the direction of the lines meaning the split will change from horizontal to vertical (or the opposite if changed in preferences). You can also push Command + Control + L to split the window using shortcut keys (hold option to split the other direction).

Coda Split Windows

Within each window you can independently change modes.

Coda Window Previews

You can also open separate files in split windows by right clicking files in the File Browser and selecting “Open in Split” or by dragging the file into an already open split. Now you can edit two separate files in a split window.

Coda’s file browser is great but you won’t be using it the majority of the time so you can quickly hide/show it by pushing Command + Control + B.

If you need a little help jumping around a document you can pop open the code navigator.

Code Navigator

A little hidden feature with Coda and the code navigator is that you can create “bookmarks” within your code to jump around your document faster using the code navigator. For example.


This would create a bookmark in the code navigator that looks like this.


Basically the bookmark is created with markup comments that use an exclamation point before the bookmark text. You can do this for HTML, CSS, PHP, etc.

Instead of using the code navigator to find things, I use the find features. Pushing Command + F opens the bar to search. Then just type in what you’re looking for and push enter. Coda will scroll the document to the first matching text and highlight it. There are several more shortcut keys for searching and several options you can change if needed. Using the find feature is much faster for me than using the code navigator since my hands never have to leave the keyboard.


By default Coda will automatically close a tag once you’ve opened one. However, that doesn’t always work and I still find myself needing to close HTML tags manually all the time. Pushing Command + Option + . (period) will automatically close the current HTML tag (wherever the cursor is).

While Coda has a lot of great features, there are many features developers still want. There are a few plugins available from third party developers that you can install to give Coda extra functionality. Here is a list of third-party plugins available.