The SitePoint PHP blog has posted a tutorial on a "different kind of template engine" that makes use of selectors and placeholders to define templates and replace data: Transphporm. In this article they introduce you to the library and give some examples of it in action.

Many PHP template engines (Smarty, Blade, Twig…) are little more than abstracted PHP code, making it easier to write loops, if/then/else blocks, and display variables with less verbosity than vanilla PHP. These traditional template engines require the designer to have an understanding of special syntax. The template engine must also be in place and operational in order to parse data and thus completely render the final design. Nothing wrong with this.

Transphporm follows a different approach that is generally known as “template animation”. What this means is that the web designer creates the entire HTML/CSS/JS page including placeholder content such as “Lorem Ipsum”, then the template engine comes along and replaces parts of the DOM with new data before the final render.

The benefit of this kind of templating is that the designer or one creating the templates doesn't need to know anything about the templating software or a special syntax. Transphporm uses CSS-style selectors to define the replacement location and the data that should fill that spot. They give an example of a simple HTML page with plenty of markup defining the locations of the placeholders. They then show how to define a "tss" configuration, listing out all of the selectors and the content to push in as a replacement. They also talk a bit about DOM concerns, what happens if the template changes and the selector is no longer valid and how to help this with partials. Finally they look at some of the more advanced features like using arrays, working with attributes and conditional changes (among others).