CodeKit 2 - First look

CodeKit 2 was released today. Is this just an iterative release, or is it the harbinger of a brighter day for web-developers?

What is CodeKit

CodeKit helps you build websites faster and better.

Bryan Jones, the developer of CodeKit defines it as a tool for helping web-developers build web-sites faster. Or in his own specific humorous words: "It's like steroids for web-developers". He's actually correct, it is a tool which will in most cases significantly improve your performance regarding creating web stuff. 

CodeKit is a web-site build tool, kinda like Grunt, Gulp and others. What separates CodeKit from the other tools listed is that CodeKit is a visual tool, a proper Mac application. It does not require any knowledge of the terminal, writing JSON, installing Ruby gems or Node programming. It just works!

If you're a web-developer and haven't yet discovered CodeKit you have been missing out! Today, the next generation - CodeKit 2 is out. I have been beta-testing it for some time now, both in smaller and larger projects. These are my initial thoughts.

The updated UI

The UI of CodeKit is in a word, new. It is also in my opinion significantly better.

The main file view of CodeKit is now using a tree view. This means that all of your files are organized into folders. This makes for a much more clean presentation compared to the old "show all files in a list" approach.

Tip: You can have CodeKit 2 ignore entire folders by right-clicking on them and choosing "skip this folder". Great for Node projects!

CodeKit 2 features a new project panel (see the top image), which you get at by clicking the big-ass button in the top left corner. Yep, you can customize how the button looks for individual projects. All the functionality from the first CodeKit is still there, you can add new projects, switch them on and off and handle your Compass stuff from the contextual menu button, and now you can add a Zurb Foundation Project as well.


There's a lot of new UI stuff in CodeKit 2, all of them improvements in my opinion.

Languages, features and frameworks

The first version of CodeKit did support quite a slew of languages, cross-compilers and external tools. You never needed any knowledge of how to install any of these languages when using CodeKit, they where just there - build in. This is also the case for CodeKit 2, with some welcome additions.

New languages


CodeKit 2 adds support for TypeKit and Markdown as well as Autoprefixer, a tool that will add missing user-agent prefixes to your CSS code.

Zurb Foundation and Susy are now supported on the framework side of things. Great for building responsive web-sites.

Also worth mentioning is the addition of CoffeeLint, which will lint your CoffeeScript files before compiling them, making it that much harder to mess up.

Source maps ftw

CodeKit 2 has build in support for source maps, that simply works!

If you ever have tried to set up source maps, you know that it can be quite a pain in the behind to configure correctly. CodeKit 2 performs all that nasty setup for you. This allows you to concentrate on using source maps instead of pulling your hair out trying to make it work correctly. Source maps are supported for CoffeeScript, SCSS, Less, TypeScript and Uglify.js.

The new assets panel

Handling external dependencies like jQuery, Modernizr and Bootstrap can be quite a chore when working on larger projects. Things gets updated, you have to hunt for each individual library on the web and manually check which is the most up to date version and so on.

CodeKit 2 has build in support for Bower, a package manager for the web. Opening the «Assets» panel allows you to browse, search for and install Bower packages. There is also an easy way to update your packages when a new version is available. I particularly like the feature which allows me to update all my installed components in one click.


The Hooks feature is exactly what you think it is. It allows you to create a hook with a set of rules and have it  execute a shell-script or AppleScript when the criteria of the rules are met. In the example above I tell my tests to run when any file has changed in the "kit" folder. This feature could for instance allow you to integrate with other command line tools.

Nifty server-refreshing

This is perhaps the flagship feature of CodeKit 2. It does live reload like before, but now it does so much more. CodeKit 2 will fire up a simple HTML server and give you an URL which you can navigate to on any device on your local network. When you change any of the files in your project CodeKit 2 will automagically update the site on all of the devices, even the remote ones like an iPhone.

Consider the following; You are creating a site which should run on mobile devices, desktop devices and a refrigerator (it could happen!). When you change something in your project, CodeKit 2 will compile it and refresh ALL of your connected devices, including remote devices. This is not only awesome, but it will save you a lot of time and frustration when testing on multiple devices.

But, what if your project needs more than a simple HTML server, like a local Node server running on port 3000?

Support for Node / Wordpress / external servers

CodeKit 2 can expose remote servers by piping their requests through it's own server maintaining the ability to update all your devices when something changes. You simply configure the project with a remote server, in my case a Node server running on port 3000 and when you change for instance a SCSS file in the Node project, the site automatically updates on your Mac, iPhone, iPad and refrigerator. Amazeballs!


There's much more new stuff in CodeKit 2, like the «libsass» compiler which makes compiling your SCSS files insanely much faster and project level settings, a new settings file-format which works better for teams and so on.

So, is CodeKit 2 great?

Let me put it to you this way. 
There is a class of applications where the care and attention to detail permeates ever nook and cranny. It surprises you in positive ways and does stuff which makes you smile. CodeKit 2 is clearly such an application in my opinion.

CodeKit 2 is targeted at a specific audience - web developers. If you find yourself being part of that audience you should consider CodeKit 2, it might just make your day brighter.

CodeKit 2 is available from