This new easy customize thing got me playing with client-side S2 again. This new editor is nice because it removes the two major roadblocks that were preventing the realtime-preview S2 editor before: untrusted code isn't an issue because only one layout is in play and it is trusted, and we don't have to reimplement all of LJ's builtins in JavaScript because this style only uses a subset.
Today, then, I've made a really quick and hacky demo of using client-side S2 to create a realtime preview for this new easy customize thing. I know the tabs and the UI are a bit ugly, but that's not really the point of the demo: any UI could be hooked up to this realtime preview, since it just runs the style code in the browser. There are no round-trips to the server when the preview is updated, except where the browser sends an If-Modified-Since request for stylesheets and images. I'm also aware that some part of my script is upsetting IE a little, but other than a few JavaScript errors it still seems to work. The problem is likely to be in my shoddy editor code rather than in client-side S2 itself.
For those that missed my client-side S2 ramblings a few months back, what's going on here is that the S2 layers are compiled to JavaScript rather than the usual Perl and run in the browser rather than on the server. Aside from a few little differences between JavaScript and Perl that I've not yet accounted for the resulting page is identical but can be refreshed as often as necessary without talking to the server again. The editor then manipulates the code and properties of the style to reflect the user's selections and refreshes to show the new version. Unfortunately, IE seems to be the only browser that can manage to refresh without flickering, but perhaps there's some clever trick that can mask the flicker.
If someone can give me the URLs of a few more TypePad theme stylesheets I can make the demo a little more interesting. ;)