My collected bag of tips & tricks & stuff for Coda

The selection is a bit subjective, especially the shortcuts – but nevertheless you may find some things you didn’t know yet.. Something wrong? Leave a comment.

This page is updated from time to time, so come back to see if there’s something new.

For some Coda 2 tips, panic itself has a nice and useful blog post

Tips & Tricks

Split view

  • ⌥-click split button: Split in opposite direction (of your default setting).
  • ⌘-click split button: Create a new split with an empty text file.

Files and tabs

  • ⌥-click on the close icon of a file tab: Close all other tabs.
  • ⌥-click toolbar button (Editor, CSS,..): Create a new tab in the given mode.

Path popup for files

  • ⌘-click on file tab show a popup with the path of the file:
    File Path Popup

Create a new folder quickly

  • ⌥-click the new file button under the file list (“+”): create a new folder instead of a new file.

Drag & drop files

  • Drag files into an editor to insert a relative path to this file
  • ⌥-drag files from the Coda File Browser

Viewing images/PDFs in Coda

  • Coda can open images and PDF files.
  • Image (or PDF) dimensions are visible in the status bar.
  • You can also set the zoom level and fit the image to the window there:
    View images in Coda


  • Drag & drop text onto the Clips Panel to create a new clip.

Browser preview

  • The page source in the preview browser is editable
  • Double-click on an element in the Coda DOM Inspector to highlight it in the split source code (if possible).

CSS editor

  • Right click on the styles to access advanced functions (copy, duplicate etc.):
    CSS Editor - Right Click Styles

Edit .htaccess-files with syntax highlighting

About Syntax Modes in Coda 2

Jump to Javascript errors

  • Enable the javascript error log in the preview window
  • Double-click on a javascript error to jump to the error line (if possible):
    Javascript error - Doubleclick in coda preview


  • Often overlooked but useful: Edit>Copy as XHTML and Text>Entab/Detab.
  • You can use Finder Smart Folders in the File Browser.

Assorted Keyboard Shortcuts

Windows & General

Sites/Editor/Preview/CSS/Terminal/Books⌘1 .. ⌘6
Go To Folder…⌥⌘G
Preview in Default External Browser⌥⌘B
Show/Hide Clips^⌘C
Show/Hide Colors⇧⌘C
Show/Hide File Browser^⌘B
Show/Hide Fonts⇧⌘T
Show Special Characters…⌥⌘T
Show Transcript^⌘T
Split Horizontally/Vertically^⌘L / ^⌥⌘L

In the File Browser

Back/Forward⌥⌘← / ⌥⌘→
Parent ⌥⌘↑
New Folder⇧⌘N
New File⌥⌘N
New File (Default type)⌘N

In the Web-Browser (Preview)

Back/Forward ⌥⌘← / ⌥⌘→
Go To Location⌘L
View Source⌥⌘U

While Editing

Balance (Select Enclosing Block)⌘B
Blockedit Selection⇧⌘B / hold ⌥
Close HTML Tag⌥⌘.
Look Up Selected Word in Reference Books⌘’
Go to (Jump) Selection (and highlight it)⌘J
Go to Beginning/End of Line⌘← / ⌘→
Go To Line Number…⇧⌘L
Go to Previous/Next Symbol⇧⌘D / ⌘D
Go to Previous/Next Word⌥← / ⌥→
Shift Text Left/Right⌘[ / ⌘]
Show/Hide Invisible Characters⌥⌘I
Show/Hide Line Numbers⌥⌘L
Show Validation Errors (HTML Mode only)⌥⌘V
Smaller/Bigger Font⌘- / ⌘+
Un/Comment Selection⌘/
Wrap Lines (toggle)⌥⌘W

Find & Replace

Find (in current document)⌘F
Find in Files…^⌘F
Find Previous/Next⇧⌘G / ⌘G
Find & Replace Next^⌘G
Use Selection for Find/Replace⌘E / ⌥⌘E
Hide Find Banner⇧⌘F
Jump to Searchbar⌥⌘F


From Panic: Coda recognizes specially formatted comments in your code as “bookmarks”. These bookmarks appear in the Code Navigator pane, and allow you to jump to the corresponsing line of text with a single click.


/* !bookmark */


<!-- !bookmark -->


/* !bookmark */ or // !bookmark


/* !bookmark */

Codaclips URL syntax


Plugins (recommended ones)

Git integration (for GitX/Gity):

Zen Coding (*):, and here:

White Out (Remove trailing whitespaces):

Line Commands (Move and duplicate lines):

(*) What is Zen Coding? A very cool code completion method, see more details here: