Espresso 2: Create and Edit CSS3 Like Never Before

Web developers rejoice, Espresso 2 has finally been released and it brings tons of improvements that you’ll definitely want to check out.

Join us was we take a refreshed look at what Espresso is, what’s new about it and why it’s officially at the top of our list of awesome apps that web developers should have.

Espresso 2 is Here


Espresso 2

I’m going to go ahead and admit that I’m a huge fan of Espresso. It’s hands down my favorite IDE and the central piece of my entire web development workflow. In fact, it’s one of my favorite Mac apps period.

Needless to say, when I started reading about the newest version, Espresso 2, I got very excited. Like many of you I had been using the Kaboom releases (beta) for a while but I’ve now switched over to the official stable release and it’s a beauty. Let’s take a look!

CSSEdit Merges with Espresso

I’ll start with the biggest news that accompanies this release: MacRabbit has discontinued its amazing CSS editing application CSSEdit and integrated its features into Espresso.

This is definitely great news for users of both apps as you now get the best of both worlds in one affordable and super powerful package.

Visual CSS Editing

So what’s so good about CSSEdit you ask? The answer is of course that CSSEdit provided a really nice visual UI for adding and adjusting CSS properties. This now appears on the right side of your CSS files in Espresso:


Visual CSS Editing

These controls actually write clean, valid CSS for you as you press the buttons. The panel is split up into three tabs: Text, Decoration and Layout, which together comprise a great deal of the CSS properties that you’ll ever work with.


The Three CSS Editing Tabs

I’m actually not a fan of WYSIWYG code editors, but this is really quite different as it’s entirely code focused and simply helps you style elements faster and more efficiently. It’s an excellent edition that I find myself using all the time.

Code CSS3 Like a Boss

Some really experienced coders might roll their eyes and wonder why they need a visual interface to help them code, but surely even this crowd will appreciate this feature when it comes to CSS3. Coding things like gradients by hand is a such a pain that there are a million online tools to help with the process. Now you can get these types of visual coding tools right in your IDE.


Creating a gradient with visual tools is awesome

As further good news for CSS developers, Espresso 2 is packed with CSS3 support so you won’t have to memorize all those annoying browser prefixes and exact syntaxes. Just start typing and Espresso will finish your thought for you.


For the most part, the Espresso interface should feel just like it always did. There are a few slight tweaks and improvements but it’s close enough to the original that longtime users will feel right at home.


The Espresso 2 Interface

For those not familiar with how Espresso works, there are three basic columns. The first of these contains an interactive file tree for the folder that you’ve deemed the destination for a project (any folder works), your “Workspace” (the files that you’re currently editing), and the “Publish” settings, which allow you to upload files to your server right in Espresso.


Workspace, Project Files and Publish Settings

Also notice the “Preview” icon. One of my favorite things about Espresso is its preview window, which updates live as you change your code, no refresh needed. We’ll discuss this more in a little later.

Code Column

The next column is your active coding window, which shows whatever file you have selected. You can also use multiple tabs or drag out individual windows.


The Coding Column

This section has everything you would expect in a solid IDE: syntax highlighting, a superb autocomplete, line numbers, code folding and more. There are also some excellent time savers like custom macros and built-in Zen Coding functionality, which should delight experienced coders.

Tools Column

The tools column is context-sensitive so it’s different depending on what type of file you’re viewing. For instance, above we saw that visual CSS editing tools that appear here. In an HTML doc though, you get the navigator:


The Tools Column

Here you get an automatically generated outline of your file that allows you to click and jump to any specific portion. This is all pretty standard stuff for advanced code editors but trust me when I say there’s a certain smoothness and finesse to it all that you won’t easily find elsewhere.

Preview Window

As I mentioned above, Espresso has an awesome preview window that updates live without the annoyance of manual refreshes. One really cool feature here is the ability to not just see a local site you’re working on but also any site on the web. You can bring up any website you like and tweak the code while previewing the results live.


You can view and tweak any website right from Espresso


Another great feature of the Espresso 2 preview window is X-ray, which allows you to visualize the bounds, padding and margins on an element and see the applied styles.


Click on an area to see details about it

The X-ray HUD is directly connected to the CSS file so just double click on anything in that little window to be taken directly to that area in your CSS. This is really nice for troubleshooting those tricky layouts.

A Worthy Follow Up

This is the part of the review where I say that the app is good but could be better in certain areas, but I really only have positive things to say about Espresso 2. The Kaboom version, like all pre-release software, had some quirks but as far as I can tell all of these have been smoothed out so if you tried an early preview it’s time to take another look.

The inclusion of visual CSS editing is really icing on the cake of this already superb web development suite. It’s there when you want it to be and out of the way when you just want to code by hand, a perfect combination of useful and flexible. You can even use the controls to go back and tweak what you already wrote by hand.

If you’re a professional web developer, you simply have to try Espresso 2 for yourself. It might just streamline your entire process.


Inside and out, Espresso 2 is a perfect picture of why Mac software has such a stellar reputation. In a time where all of us are filling our Applications folders with quick and dirty $0.99 specials from the App Store, it’s incredibly refreshing to review an app as solid and deep as Espresso. Developers like MacRabbit were around far before App Store gold rushes and are obviously committed to quality in a way that’s not easy to find these days. Priced at $79, Espresso is worth every penny.

Want to get your hands on it before you fork out the dough? Stop by the Espresso website and download the 15-day trial.


One of the best web editing tools for the Mac just got a lot better. I almost never dole out a perfect 10 but I simply love this app. Visual CSS Editing, X-ray on live previews and a lot more make this a must-have for web developers.