Template engine proposal

index.html

<!--
Goal: use your mockups as templates

Do not repeat yourself. Don’t make mockups AND templates. Do both at the same time. Your template is your mockup, so it can be seen in your browser and you can use the same text editor you are using for your mockups.


But how?

With a template engine that uses especial HTML attributes that are removed during template execution.
These non-standard HTML attributes are ignored by web browsers.
-->


<!--
	Iterate over collections with the "foreach" and "as" attributes.
	The first child element will be used as template. The rest of children
	will be removed so you can use them as dummy content.

	In this case "drama_films" is an object passed to the template.
-->
<div foreach="drama_films" as="film">
	<div>
		<!--
			Use the "put" attribute to show data
		-->
		<h2 put="film.title">Example film 1</h2>
		
		<!--
			You can use conditionals
		-->
		<p if="film.comments > 0">
			<span put="film.comments">3</span> comments
		</p>
		
		<!--
			Use the especial "hidden-in-mockup" class to hide
			things in the mockup. Useful for conditionals.
			The template engine will remove all
			"hidden-in-mockup" appearances.
		-->
		<p class="hidden-in-mockup" if="film.comments == 0">
			<span>No comments</span>
		</p>
		
		<p>
			<!--
				You can define or override attributes by using
				put-<attr-name>. For example you can define dummy
				links in your mock-up, and then override them
				with real data while in production.
			-->
			<a href="news-detail.html" put-href="/news/${film.id}">
				continue reading
			</a>
		</p>
	</div>

	<div>
		<h2>Example film 2</h2>
		
		<p>
			<span>No comments</span>
		</p>
		
		<p>
			<a href="news-detail.html">
				continue reading
			</a>
		</p>
	</div>

	<div>
		<h2>Example film N</h2>
		
		<p>
			<span>5 comments</span>
		</p>

		<p>
			<a href="news-detail.html">
				continue reading
			</a>
		</p>
	</div>
</div>

<!--
	Use the "remove" attribute to remove things when the template is executed.
	The best use case is to tell the browser not to display elements
	with "hidden-in-mockup" class.
-->
<style remove> .hidden-in-mockup { display:none } </style>
<!--
	You can also use it for features you are working on and are not finished yet.
-->
<p remove><a href="#">follow me on twitter!</a></p>

looks good, the question is, what is the planned execution architecture?
If its for mockups you would need some Javascript JSFiddle type environment to execute it, or did you have that planned already?

I want a template language to let designers create mockups that are real templates. So they create their mockups with any tool they are used to use, and then by adding some attributes they can "templatify" the mockup and put it in the application server. But don't breaking the mockup in the process. So the resulting file is still a mockup that can always opened directly in the browser.

I'm thinking in an execution engine made in javascript (for nodejs), but it could be written in any other server-side language. The idea is traverse the DOM tree and execute the loops, conditionals,... and then send the resulting document to the browser.

Looks fine.
What about subtemplates? Have you plan to include a mechanism to support them, like
<div include="path_to_subtemplate">
This is an example of the subtemplate content
</div>

If you go with the node approach, I guess there is nothing stopping you from making a jsfiddle type environment, which would say allow you to supply JSON data to the templates to see the output during the mockup process.

About the subtemplates. The idea is that the same file can be used as mockup and as template. So adding subtemplates, includes or something like that would break the mockup (the mockup no longer would be near-to-real).

Doing a jsfiddle type environment is something that is in my mind. I'm thinking about a tool to let the designers edit the templates with a live preview having the ability to switch between the mockup and the processed template. BTW I'm taking a look to Ace http://ace.ajax.org/ to do that :)

Thanks for your comments!

First version now available! :)
https://github.com/gimenete/emmental

I have changed some things but most of the things are as planned. I have implemented it using NodeJS and attributes can contain any javascript expression.