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
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