I’m in the process of designing a browser based system that will allow non-technical users to quickly and easily change the content of certain parts of a web page via a WYSIWYG template-based drag-and-drop editor. Essentially, the user can choose from a few prepared templates, drop some image files into predefined areas within the template, edit some text or links in predefined areas, and the result will be reflected on the actual website.

I have a simple prototype of the editor interface written in Polymer, which works great so far. I am now trying to figure out the best way to save the results of this server-side, and produce the final static HTML output based on it. I’m pretty keen on keeping Polymer client-side, as the interface is rather complex and dynamic and more traditional pure-Javascript approaches can get very messy very quickly.

However, including the same Polymer templates client-side is not feasible I think; I’ll need to produce compact, no-Javascript, highly compatible pure HTML output.

The obvious solution would be to prepare two parts to the same template: an editable Polymer version which results in some blob of attributes being stored on the server (e.g. template: 1, placeholder1: imageXYZ, placeholder2: "Foobar", etc.), coupled with some server-side rendering process which takes this data and produces the final HTML output. The problem is that this requires two versions of the same HTML template to be kept in sync.

Another solution may be to produce some meta-template from which both an editable version and the rendered result can be produced programmatically; this approach seems to be very complex though, possibly too complex for the scope of this project.

Are there any other well known approaches for dealing with this problem, or well defined meta-template libraries/systems/approaches that will work well in my scenario? Or will I simply have to bite the bullet and accept the redundancy as part of the task?