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