While working on an upcoming site with Panic’s excellent Coda application, I was constantly frustrated by its lack of a separate live web preview window. Coda is a “one window app” and all content, including the preview, is accessed via tabs in a single window.

I am so used to having a live web preview window available (Dreamweaver has one, as do BBEdit, TextMate, CSSEdit and others) that I found Coda’s lack of one to be the single most frustrating thing about the otherwise excellent application.

So, this last weekend I decided to do something about it and quickly wrote a Live Preview plug-in for Coda, again using the new Cocoa API that I first used with Wrapster.

The result is called Lively and you can grab it here:

http://menumachine.com/download/Lively1.0.zip

Please note that you must be running Mac OS 10.5 (Leopard) in order to use this plugin.

The plug-in is open source and released under the MIT License. You can find the source in the plug-in’s bundle wrapper by selecting the plug-in in the Finder and choosing “Open Package Contents” from the Finder’s contextual menu.

More cleverer

It was very easy to create a separate HTML window to display the current HTML source. The real trick is working with CSS files, which is what I primarily wanted to edit. It turns out this is more complex than I originally thought, and the final result is still not ideal.

With Lively installed, you can open a preview window by choosing the Open Lively Preview Window menu item under the Plug-ins menu, or just press Control-P.

When you begin editing an HTML file, the preview window will show the current page as rendered by WebKit (the same renderer used by Coda). If you then begin editing the code of any CSS file that is linked by the HTML page, the preview will display your current, live CSS edits by overriding the stylesheet on disk.

You can switch back to the HTML view and change the code and the preview will retain your live edits. If you want to revert to the original CSS with no overrides, just click the Reload Page button in the preview window.

Lively tries to be clever about what files it tries to preview. There is a file extension exclusion list embedded in the bundle, which currently blocks the following file extensions from loading in the preview window:

 js rb py pl java c cpp m h txt cgi sh
It doesn’t make much sense to preview these file types for most users. You can of course add or remove from this list by editing the IgnoredFileExtensions.plist file in the plugin’s bundle.

 

Caveats

You knew there would be some. At present Coda’s plug-in API does not allow developers access to any view except the main code editor window. This means that Lively cannot detect any edits you make in the CSS editor unless you switch to the Edit tab after making your changes. Yes, this is annoying but I can’t do anything about it at present.

Also, preview probably won’t work properly for remote files. It won’t pre-process .php and other files, so if you have that code in your page it will be dumped into the preview window. Again, this is a limitation of the Coda API in that plug-ins can’t access the site settings and therefore cannot know which server-side URLs to look at. It would be possible to add some configuration to Lively to add this, but I don’t have time at present to do that.

I hope that Lively is useful for some of you, as always feedback is much appreciated.

(Oh, and MenuMachine users: I haven’t forgotten about you. This tool is extremely useful for me in developing MenuMachine 3).

Update: Thanks to James Bisset, who reported a problem rendering certain pages. It turns out I’d neglected to turn on the UTF-8 support when compiling the PCRE regular expression engine, which was causing a crash (exception) whenever a page containing non-ASCII characters was loaded. I’ve fixed this in version 1.0b2.

Update 2: I’ve revved Lively to 1.0. The changes include:

  • CSS overriding is improved so that the original CSS file is no longer used at all in the rendered output, only the modified CSS
  • image resources and other linked items in CSS files now display correctly
  • the CSS overrides are correctly flushed if the current site changes

56 Responses

  1. teejay Says:

    wow this is awesome. nice work.

  2. sway Says:

    This is great, do you plan to implement this into the coda cascading tabs in the future? This could eliminate the need for an app like CSSEdit if you could get the CSS functionality to work on the fly.

  3. Rob Keniger Says:

    As soon as Panic release an API that allows developers access to the CSS editor, I will update Lively to make use of it, yes. It’s very much something I want to see.

  4. JA Says:

    Thank you so much for this, Rob. I find it so difficult and cumbersome to flip back and forth between edit and preview especially since I use a dual screen setup and Coda makes no use of my second screen. This plugin is brilliant.

    Now that the praise is out of the way, is there anyway you can make this work with PHP? :-) Unfortunately all my sites use PHP, mostly for includes, so as it stands Lively won’t render much at all for me. My menus, my CSS files, footers, etc. are all set as includes. :-/

  5. JA Says:

    Oh hey I just realized you’re with Big Bang. I used Menumachine for years and years with GoLive. Excellent, excellent product. Best menu system in it’s class.

    So if I understand correctly MenuMachine may be coming to Coda as well? :-)

  6. Rob Keniger Says:

    @JA:
    Yes, we will be supporting Coda with the next release of MenuMachine.

  7. Rob Keniger Says:

    @JA:
    I’m looking into a way of doing this, although it will require you re-entering your site details in a Lively configuration panel as Lively can’t access the site settings.

  8. ezkl Says:

    Thank you for taking the time to develop this, Rob.

  9. JA Says:

    “I’m looking into a way of doing this, although it will require you re-entering your site details in a Lively configuration panel as Lively can’t access the site settings.”

    I think that’s a perfectly reasonable stopgap for the added functionality. Of course, at this point I’m just desperate for a solution. Manually loading each preview into a separate browser and hitting refresh over and over while I work all day is a royal pain. And don’t even get me started on the miniscule split view preview… :P

  10. Jackson Says:

    Thanks a million for your efforts. I’m really excited about the possibilities with Coda, now that it supports scripting and plug-ins. I really enjoy trying out new plug-ins and scripts. I’m going to work on a couple more to get scripts myself.

    One thing I really respect about the entire Espresso/Sugar concept, is the fact that they’re so heavily focused on third party developers for their private beta. It’s seriously cool, and I only hope that Panic can manage to satisfy our feature needs, as well as continue to foster the kind of API we all want and need for future plug-in development. I’ve happily handed over my money to Panic already — but I’m keeping an eye on Espresso. I can’t wait to see it when the beta has considerably more features.

    On an unrelated note, I really miss live, on-the-fly CSS editing, with automatic preview.

    I wish Coda would take this more seriously. Firebug (in Firefox) does a better job than their “css editor”

  11. Joey Says:

    “I really miss live, on-the-fly CSS editing, with automatic preview. I wish Coda would take this more seriously. Firebug (in Firefox) does a better job than their css editor”

    This is one area where Coda has always fallen short. I’ve spoken with the developers and offered suggestions in the beta program but the responses I received were that a dedicated live preview window goes against the concept of having a “one window editor.” They’ve since loosened up on this stance but I’m not sure they’re entirely for having this feature.

    So my hope is that Lively will close this gap a bit. Even now when it can’t preview includes it’s proven itself to be marginally useful. I can’t imagine what it will be like when it’s fully working. :-)

    ” I’ve happily handed over my money to Panic already — but I’m keeping an eye on Espresso. I can’t wait to see it when the beta has considerably more features.”

    On paper Espresso seems to meet my needs far better than Coda. However, for now, I’ve given up on that app. The beta program has proven to be unproductive and the developer is entirely unresponsive. Just take a glance at their blog.

    Of course, once Espresso is a real shipping product I will certainly reconsider. But my real hope is that by then Panic addresses the CSS issue. After all it’s Coda biggest flaw.

  12. Jackson Says:

    “On paper Espresso seems to meet my needs far better than Coda. However, for now, I’ve given up on that app. The beta program has proven to be unproductive and the developer is entirely unresponsive. Just take a glance at their blog.

    Of course, once Espresso is a real shipping product I will certainly reconsider. But my real hope is that by then Panic addresses the CSS issue. After all it’s Coda biggest flaw.”

    Since I’m not developing plug-ins, it’s hard to know how responsive they are. I suppose I should sift through the wiki again. I sort of gave up on the beta after a couple releases, when I realized that they genuinely weren’t offering a beta of their product — it’s more like they’re offering a stripped down example of the application’s framework, so developers can write plug-ins. I am not sure if I understand how developers are supposed to be inspired to write plug-ins, if they don’t understand how the application works in the first place.

    If nothing else, Espresso seems a little like a direct response to Coda. I imagine they were concerned that doing nothing in response to Coda could prove to really damage them in the end. After all, their core technology driving the app is “CSSedit” — and I would consider it far more remarkable than what Panic had going for them initially (Transmit?). Heck, I hardly even see any benefit from Transmit. In fact, the filesystem support in Coda (if that’s what it’s called) certainly leaves something to be desired.

    I suppose all-in-all, it’s just an application. I think Panic is very lucky that they have such a passionate group of users. Even though everyone has their complaints, it certainly has turned a lot of heads, and captured a great deal of attention.

  13. Jackson Says:

    Getting back to the topic of “Lively” —

    every preview it loads is plain-html, rendered without any of my CSS.

    For the record, my CSS is in external files (links).

    Example:

    Is this type of CSS supported? I hope I’m overlooking something simple.

  14. Jackson Says:

    Woops. My example looks like this (I chopped it up so it would display in my post):

    link rel=”stylesheet” type=”text/css” href=”./css/style.css” media=”all”

  15. Jackson Says:

    Nevermind. I think the problem stemmed from the fact that I previewed a document I had open in a “split window”

    It seems to work fine on documents in their own tab, without a split.

  16. Jackson Says:

    OMG! (Sorry for the excessive posts)

    Not only is it loading my CSS properly, but my edits render ON THE FLY!

    THANK YOU SOOOOOO MUCH FOR THIS PLUG-IN!

  17. Joey Says:

    Any luck with adding in PHP support or is the API limitation set by Panic a permanent barrier? I’m not impatient (okay, I am :P ), I was just wondering if you hit a roadblock and were waiting on Panic or if there was some sort of work-around.

    I’ve been waiting ages for a dedicated preview window and outside of Espresso (and its never-ending, super-secretive development cycle) your plug-in is my best shot at making that happen. :-)

  18. Lasse Says:

    Thanks a million Rob, highly appreciated! :)

    Works just like CSSEdit for me, even when previewing a PHP file and editing the linked CSS file. Hooray. But then I edit CSS textually, not using the specific editor. (FYI, I’m running MAMP as well.)

    Updates quicker than the Espresso beta too – which made me look into Coda plugins. :)

  19. Matthew Spence Says:

    Spigging awesome

    at last no need to switch to cssedit

  20. Dave Says:

    I think lively is great, just one little thing that I wish it would do, or better have the choice to do, and that is have an always stay on top function. With Dual monitors I’m sure it’s not an issue, but with a single I wind up having coda sized way down so I can see the lively window. I think it could be over coda just not in an area I’m editing and be even cooler.

    Dave

  21. Aaron Says:

    I love love love Lively, but there’s two things that are preventing me from using it.

    1) On-the-fly CSS editing preview seriously slows typing performance, I think because it refreshes too quickly. This is on a Macbook Pro 2.4 w/ 4 gigs of RAM.

    2) If I edit a movable type template with an embedded FLV movie that is hard-coded to a http address, then I get an Adobe security error which can crash my whole computer.

  22. Christian Says:

    I love the concept and implementation of this plug-in, but I find that using it to preview Javascript changes is impossible.

    The only way I have found to get it to use an updated Javascript file is to quit Coda and open the html that uses it again. Live Javascript previews would be nice also, but I’d settle for the refresh button grabbing a fresh copy of the Javascript.

  23. Phil Hanson Says:

    Just wanted to come out of lurking and say, I love this plug in, good work.

  24. Jackson Says:

    Is this what you needed from Panic, in their plugin API?

    (From Rel notes of Coda 1.6.3)
    Added the ability to get the site URL, site local URL, site remote path and site nickname to the Coda Plug-in API

    Just thought you’d like to know (if this is what you actually needed)

  25. bberg Says:

    any plans for a tiger version?

  26. Peter Witham Says:

    Just wanted to say thank you, there is many a time I like to see the preview in a seperate window…you are a hero :)

  27. Nate Says:

    Any chance Lively will be updated to support local servers? The latest Coda plugin API allows you to get the local URL now.

  28. Adam Says:

    BIG thanks! For some reason on a local site I’m testing, it’s not loading the CSS even though Coda’s preview mode is, but this is still a huge help.

    Thanks again, Rob!

  29. Mark McDonald Says:

    Pardon my confusion, but I don’t know why this is an issue. For as long as I can recall, you’ve been able to spawn a new Coda window (File: New Window). Granted it’s a bit cumbersome as you then have to manually open the desired file in the second window, but once done you can switch the window to preview mode and have all the live preview and DOM inspector benefits.

  30. Brakhage Says:

    I just split the window horizontally, select the bottom half, and hit ‘preview’. Live preview in the same window you’re editing in.

    Trick is, the preview pane wants to update itself as you type, so as you type the focus is stolen from the top to the bottom pane. I haven’t figured out how to get around that yet.

  31. Jaap Says:

    Your plugin works great! Only one thing goes wrong. In all my projects I define my css documents, images and all that stuff directly from the root by starting with “/”.
    I saw “JA” had the same problem. It looks like some stuff doesn’t get loaded this way.

    Is there a solution for this?

    Regards,
    Jaap

  32. Randall Says:

    I’d be interested in live preview using an arbitrary user-specified Web address: just reload the page whenever the document is saved. It’s a little thing, but would save me time when I’m editing a code file whose name has nothing to do with the URL.

  33. rado Says:

    thank you! works great

  34. Ibrahim Says:

    I have a normal HTML file with CSS linked using

    CSS changes are not rendered, am I overlooking something?

  35. Drew Says:

    I am having the same problem with my css not being applied to the preview. Really looking forward to this addon but at this point it is useless. Any help would be great!

  36. Drew Says:

    I figured out how to get the css styles to show. I had to give the full link to the stylesheets and it worked flawlessly. Not ideal but it is what it is.

  37. Stéphane Says:

    Wooooo…! This is sooooo nice! Thanks infinitely for sharing this nice work.

  38. sushiboy Says:

    Sadly, there are times where Coda hangs when this plugin is enabled. I hope to see an update in the near future.

  39. Nony Says:

    As someone said, the live preview only works for local HTML files. Instead of using this plugin, simply open a new window for coda, and preview the same file.

    That works far better than this plugin. If you have a long page and you’ve scrolled down in the preview using this page, any changes to the markup will cause the preview window to refresh and go back to the top of the page, which makes it useless for long pages.

  40. Me Says:

    Agrees with above, just open a new window and remove toolbar & filebrowser, thats it :)

  41. randomJames Says:

    Just installed your plugin. It adds much needed functionality to Coda. However I’ve discovered it spikes my CPU something awful. Any suggestions?

  42. TG Developer » Quick Tip: 4 Ways to Auto-Refresh your Browser when Designing new Sites Says:

    [...] Option 4: Coda: Lively [...]

  43. Quick Tip: 4 Ways to Auto-Refresh your Browser when Designing new Sites | Site Design Tips Says:

    [...] Firefox. This one works great, but requires a bit of work to get up and running. Option 4: Coda: Lively Coda users may not be familiar with one of my favorite plugins, called [...]

  44. Quick Tip: 4 Ways to Auto-Refresh your Browser when Designing new Sites | Nettuts+ Says:

    [...] Option 4: Coda: Lively [...]

  45. El rincón de JMACOE » 4 maneras de Auto-actualizar tu navegador cuando diseñas sitios nuevos Says:

    [...] Opción 4: Coda: Lively [...]

  46. Mike Erickson Says:

    Wow, this is sweet, can’t believe it took me this long to discover this gem. Now Apple should give you some commission as it is yet another reason for an even bigger screen (24″ isn’t cutting it anymore)

  47. Jass Says:

    Useful one! Thanks!

  48. Quick Tip: 4 Ways to Auto-Refresh your Browser when Designing new Sites | LionWebMedia.com Says:

    [...] Option 4: Coda: Lively [...]

  49. 4 راه برای refresh خودکار مرورگر هنگام طراحی وبسایت | p30tuts Says:

    [...] coda ممکن است با Lively یکی از پلاگین های مورد علاقه من آشنا نباشند. مانند [...]

  50. Opencart Templates Says:

    Wow! very useful plugin, tired of refreshing. Thanks

  51. Stephan Says:

    Uhm – I don’t get it. OK, maybe I’ve overlooked something in your article but isn’t that exactly what the split screen mode in Coda can do? I have a CSS file in a tab and click the split tab button, and there I have another “window” in that same tab where the same CSS file is displayed initially. I can drag any HTML file from the file browser at the left into either one of the splitted windows and click preview, and there I have the CSS file and the page preview in one (splitted) window, and it will update the preview whenever I change the CSS. See http://www.youtube.com/watch?v=MZMrsxNsHzg

  52. orionrush Says:

    just wondering –

    is there a way to specify a particular url for the window?

    For example if im working on a jquery script – I want to preview the file that’s being acted upon – not the js file itself.

    Also I’ve had some interesting crashes with php pages – specifically where say the script Im working on is part of a cms, and so of course it shouldn’t be renderable – This was me first trying out the plugin so not quite realising how it operates.

  53. Final Says:

    Thank you. SO MUCH! This plugin is great.

  54. Eolake Says:

    Hi,
    Thanks, good work.
    I can’t believe the omission of a preview window.

  55. beelzebomb Says:

    I have to agree with Stephan, with a split screen, Coda gives live updates with one half of an html file in edit mode & the other in preview already.

    Replace the above with a CSS file in the edit mode & a relevant html file in the other half of the split screen as a preview, clicking save should update the html file.

  56. Tim Says:

    People who are writing comments in 2011… the original post was made back in 2008 when Coda did not support live previews.

Leave a Comment